> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abbyy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Création de fragments HTML

> Créez les fragments HTML qui affichent l’interface du dossier multi-document dans Pega, y compris les fragments par défaut Facture, Bancaire, Contrat, Lettre et Prix.

Les fragments HTML permettent d’afficher des parties de l’interface utilisateur utilisées dans un scénario de traitement multi-document.

Pour créer un nouveau fragment, procédez comme suit :

1. Dans **Dev Studio,** cliquez sur **Records → Technical → HTML Fragment** **→** **Create**.

2. Dans les champs **Label** et **Identifier**, saisissez la valeur suivante : *InvoiceDefaultFragment*.

   <Frame>
     <img src="https://mintcdn.com/abbyy/KEmWsO92hkr7eybZ/images/flexi-capture/connectors/Pega102.png?fit=max&auto=format&n=KEmWsO92hkr7eybZ&q=85&s=298ae9e148f2397191bae099ea38d2e6" alt="Capture d’écran du formulaire Pega Create HTML Fragment avec InvocieDefaultFragment saisi dans les champs Label et Identifier et FlexiCapture for Invoices sélectionné comme contexte d’application." width="1209" height="413" data-path="images/flexi-capture/connectors/Pega102.png" />
   </Frame>

3. Cliquez sur **Create and open**.

4. Dans le champ **HTML Source**, saisissez le code de votre fragment. Le code à utiliser pour chacun des fragments est indiqué ci-dessous.

<Note>
  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*.
</Note>

<div id="invoicedefaultfragment">
  ## InvoiceDefaultFragment
</div>

```
<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>
```

<div id="bankingdefaultfragment">
  ## BankingDefaultFragment
</div>

```
<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>
```

<div id="contractdefaultfragment">
  ## ContractDefaultFragment
</div>

```
<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>
```

<div id="letterdefaultfragment">
  ## LetterDefaultFragment
</div>

```
<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>
```

<div id="pricedefaultfragment">
  ## PriceDefaultFragment
</div>

```
<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>
```
