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

# Creación de fragmentos HTML

> Cree los fragmentos HTML que renderizan la interfaz del caso de varios documentos en Pega, incluidos los fragmentos predeterminados de factura, banca, contrato, carta y Price.

Los fragmentos HTML muestran partes de la interfaz de usuario que se utilizan en un caso de procesamiento de varios documentos.

Para crear un nuevo fragmento, haga lo siguiente:

1. En **Dev Studio,** haga clic en **Records → Technical → HTML Fragment** **→** **Create**.

2. En los campos **Label** e **Identifier**, escriba el siguiente valor: *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="Captura de pantalla del formulario Create HTML Fragment de Pega con InvocieDefaultFragment introducido en los campos Label e Identifier y FlexiCapture for Invoices seleccionado como contexto de la aplicación." width="1209" height="413" data-path="images/flexi-capture/connectors/Pega102.png" />
   </Frame>

3. Haga clic en **Create and open**.

4. En el campo **HTML Source**, escriba el código del fragmento. A continuación se proporciona el código que debe usarse para cada uno de los fragmentos.

<Note>
  El código de todos los fragmentos también puede encontrarse en la carpeta de instalación del conector: *%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>
  Factura <br> <hr>
</h1>
<div class="row">
  <div class="invoicecolumn">
    <p> <span class="name"> Número de factura </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Fecha de la factura </span> <br> <span class="value"> ---- </span> </p>
  </div>
  <div class="invoicecolumn">
    <p> <span class="name"> Dirección </span> <br> <span class="value"> ---- </span> </p>
  </div>
</div>
<h4>Tabla de factura</h4> 
<table style="width:100%">
  <tr>
    <th>Referencia</th>
    <th>Designación</th> 
    <th>Cantidad</th>
    <th>Número de pedido</th>
    <th>Precio unitario</th> 
    <th>Total</th>
  </tr>
</table>
<p> <span class="name"> Total </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Empresa </span> <br> <span class="value"> ---- </span> </p>
<br>
```

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

```
<h1>
  Banca <br> <hr>
</h1>
<div class="row">
  <div class="bankingcolumn">
    <p> <span class="name"> Nombre Completo </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Ciudad </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Fecha de Nacimiento </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"> Teléfono de Casa </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Teléfono del Trabajo </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Nombre del Empleador </span> <br> <span class="value"> ---- </span> </p>
  </div>
</div>
<h4>Dirección</h4> 
<table style="width:100%">
  <tr>
    <th>Tipo de dirección</th>
    <th>País</th> 
    <th>ZIP</th>
    <th>Estado</th>
    <th>Calle</th> 
    <th>Ciudad</th>
  </tr>
</table>
<br>
```

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

```
<h1>
  Contrato <br> <hr>
</h1>
<p> <span class="name"> Número de Contrato </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Fecha de Contrato </span> <br> <span class="value"> ---- </span> </p>
<br>
```

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

```
<h1>
  Carta <br> <hr>
</h1>
<p> <span class="name"> Fecha de la carta </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Carta de </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Carta para </span> <br> <span class="value"> ---- </span> </p>
<br>
```

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

```
<h1>
  Price <br> <hr>
</h1>
<p> <span class="name"> Company </span> <br> <span class="value"> ---- </span> </p>
<h4>Price Table</h4> 
<table style="width:100%">
  <tr>
    <th>designación</th>
    <th>Precio unitario</th> 
  </tr>
</table>
```
