> ## 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.

# HTML-Fragmente erstellen

> Erstellen Sie die HTML-Fragmente, die die Oberfläche des Falls zur Verarbeitung mehrerer Dokumente in Pega rendern, einschließlich der Standardfragmente für Rechnung, Banking, Vertrag, Brief und Price.

HTML-Fragmente stellen Teile der Benutzeroberfläche dar, die in einem Anwendungsfall zur Verarbeitung mehrerer Dokumente verwendet werden.

Gehen Sie wie folgt vor, um ein neues Fragment zu erstellen:

1. Klicken Sie in **Dev Studio** auf **Records → Technical → HTML Fragment** **→** **Create**.

2. Geben Sie in die Felder **Label** und **Identifier** den folgenden Wert ein: *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="Screenshot des Pega-Formulars „Create HTML Fragment“ mit „InvocieDefaultFragment“ in den Feldern „Label“ und „Identifier“ sowie „FlexiCapture for Invoices“ als ausgewähltem Anwendungskontext." width="1209" height="413" data-path="images/flexi-capture/connectors/Pega102.png" />
   </Frame>

3. Klicken Sie auf **Create and open**.

4. Geben Sie in das Feld **HTML Source** den Code für Ihr Fragment ein. Der für die einzelnen Fragmente zu verwendende Code ist unten angegeben.

<Note>
  Den Code für alle Fragmente finden Sie auch im Installationsordner des Connectors unter *%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>
  Rechnung <br> <hr>
</h1>
<div class="row">
  <div class="invoicecolumn">
    <p> <span class="name"> Rechnungsnummer </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Rechnungsdatum </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>Rechnungstabelle</h4> 
<table style="width:100%">
  <tr>
    <th>Referenz</th>
    <th>Bezeichnung</th> 
    <th>Menge</th>
    <th>Bestellnummer</th>
    <th>Stückpreis</th> 
    <th>Gesamtbetrag</th>
  </tr>
</table>
<p> <span class="name"> Gesamtbetrag </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Unternehmen </span> <br> <span class="value"> ---- </span> </p>
<br>
```

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

```
<h1>
  Banking <br> <hr>
</h1>
<div class="row">
  <div class="bankingcolumn">
    <p> <span class="name"> Full Name </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> City </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Birth Date </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> SSN </span> <br> <span class="value"> ---- </span> </p>
  </div>
  <div class="bankingcolumn">
    <p> <span class="name"> Home Phone </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Work Phone </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Employer Name </span> <br> <span class="value"> ---- </span> </p>
  </div>
</div>
<h4>Adresse</h4> 
<table style="width:100%">
  <tr>
    <th>Address type</th>
    <th>Country</th> 
    <th>ZIP</th>
    <th>State</th>
    <th>Street</th> 
    <th>City</th>
  </tr>
</table>
<br>
```

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

```
<h1>
  Vertrag <br> <hr>
</h1>
<p> <span class="name"> Vertragsnummer </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Vertragsdatum </span> <br> <span class="value"> ---- </span> </p>
<br>
```

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

```
<h1>
  Brief <br> <hr>
</h1>
<p> <span class="name"> Briefdatum </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Brief von </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Brief an </span> <br> <span class="value"> ---- </span> </p>
<br>
```

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

```
<h1>
  Price <br> <hr>
</h1>
<p> <span class="name"> Unternehmen </span> <br> <span class="value"> ---- </span> </p>
<h4>Price Table</h4> 
<table style="width:100%">
  <tr>
    <th>Bezeichnung</th>
    <th>Stückpreis</th> 
  </tr>
</table>
```
