Les fragments HTML permettent d’afficher des parties de l’interface utilisateur utilisées dans un scénario de traitement de plusieurs documents.
Pour créer un nouveau fragment, procédez comme suit :
- Dans Dev Studio, cliquez sur Records → Technical → HTML Fragment → Create.
- Dans les champs Label et Identifier, saisissez la valeur suivante : InvoiceDefaultFragment.
- Cliquez sur Create and open.
- Dans le champ HTML Source, saisissez le code de votre fragment. Le code à utiliser pour chacun des fragments est indiqué ci-dessous.
Le code de tous les fragments se trouve également dans le dossier d’installation du connecteur, à l’emplacement %Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Configure UI\Multi-document\HTML fragments.
<head>
<meta charset="utf-8" />
<style>
* {
box-sizing: border-box;
}
.value {
color: black;
}
.name{
color: grey;
}
.invoicecolumn {
float: left;
width: 50%;
padding: 10px;
height: 130px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<h1>
Facture <br> <hr>
</h1>
<div class="row">
<div class="invoicecolumn">
<p> <span class="name"> Numéro de facture </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Date de la facture </span> <br> <span class="value"> ---- </span> </p>
</div>
<div class="invoicecolumn">
<p> <span class="name"> Adresse </span> <br> <span class="value"> ---- </span> </p>
</div>
</div>
<h4>Tableau de la facture</h4>
<table style="width:100%">
<tr>
<th>Référence</th>
<th>Désignation</th>
<th>Quantité</th>
<th>Numéro de commande</th>
<th>Prix unitaire</th>
<th>Total</th>
</tr>
</table>
<p> <span class="name"> Total </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Entreprise </span> <br> <span class="value"> ---- </span> </p>
<br>
<h1>
Bancaire <br> <hr>
</h1>
<div class="row">
<div class="bankingcolumn">
<p> <span class="name"> Nom complet </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Ville </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Date de naissance </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> NAS </span> <br> <span class="value"> ---- </span> </p>
</div>
<div class="bankingcolumn">
<p> <span class="name"> Téléphone domicile </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Téléphone travail </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Nom de l'employeur </span> <br> <span class="value"> ---- </span> </p>
</div>
</div>
<h4>Adresse</h4>
<table style="width:100%">
<tr>
<th>Type d'adresse</th>
<th>Pays</th>
<th>Code postal</th>
<th>État</th>
<th>Rue</th>
<th>Ville</th>
</tr>
</table>
<br>
<h1>
Contrat <br> <hr>
</h1>
<p> <span class="name"> Numéro de contrat </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Date du contrat </span> <br> <span class="value"> ---- </span> </p>
<br>
<h1>
Lettre <br> <hr>
</h1>
<p> <span class="name"> Date de la lettre </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Lettre de </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Lettre à </span> <br> <span class="value"> ---- </span> </p>
<br>
<h1>
Prix <br> <hr>
</h1>
<p> <span class="name"> Entreprise </span> <br> <span class="value"> ---- </span> </p>
<h4>Tableau des prix</h4>
<table style="width:100%">
<tr>
<th>Désignation</th>
<th>Prix unitaire</th>
</tr>
</table>