Create the HTML fragments

HTML fragments draw the parts of the user interface used for a multi-document processing case.

Create a fragment

Start a new fragment

In Dev Studio, click Records → Technical → HTML Fragment → Create.

Name the fragment

In the Label and Identifier fields, enter the name of the fragment, for example InvoiceDefaultFragment.

Screenshot of the Pega Create HTML Fragment form with InvocieDefaultFragment entered in the Label and Identifier fields and FlexiCapture for Invoices selected as the application context.

Open the fragment

Click Create and open.

Add the fragment code

In the HTML Source field, enter the code of your fragment. The code for each fragment is given in the following sections.

Repeat these steps for each of the five fragments. The code for all the fragments is also in the connector installation folder:

%Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Configure UI\Multi-document\HTML fragments

InvoiceDefaultFragment

<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>
  Invoice <br> <hr>
</h1>
<div class="row">
  <div class="invoicecolumn">
    <p> <span class="name"> Invoice Number </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> Invoice Date </span> <br> <span class="value"> ---- </span> </p>
  </div>
  <div class="invoicecolumn">
    <p> <span class="name"> Address </span> <br> <span class="value"> ---- </span> </p>
  </div>
</div>
<h4>Invoice Table</h4> 
<table style="width:100%">
  <tr>
    <th>Reference</th>
    <th>Designation</th> 
    <th>Quantity</th>
    <th>Order Number</th>
    <th>Unit Price</th> 
    <th>Total</th>
  </tr>
</table>
<p> <span class="name"> Total </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Company </span> <br> <span class="value"> ---- </span> </p>
<br>

BankingDefaultFragment

<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>Address</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>

ContractDefaultFragment

<h1>
  Contract <br> <hr>
</h1>
<p> <span class="name"> Contract Number </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Contract Date </span> <br> <span class="value"> ---- </span> </p>
<br>

LetterDefaultFragment

<h1>
  Letter <br> <hr>
</h1>
<p> <span class="name"> Letter Date </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Letter From </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> Letter To </span> <br> <span class="value"> ---- </span> </p>
<br>

PriceDefaultFragment

<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>Designation</th>
    <th>Unit Price</th> 
  </tr>
</table>

UiPath

Blue Prism

Automation Anywhere

WinActor

Appian

Pega

M-Files

Laserfiche

NX Manager

Create a fragment

InvoiceDefaultFragment

BankingDefaultFragment

ContractDefaultFragment

LetterDefaultFragment

PriceDefaultFragment

​Create a fragment

​InvoiceDefaultFragment

​BankingDefaultFragment

​ContractDefaultFragment

​LetterDefaultFragment

​PriceDefaultFragment

Create a fragment

InvoiceDefaultFragment

BankingDefaultFragment

ContractDefaultFragment

LetterDefaultFragment

PriceDefaultFragment