HTML-Fragmente erstellen

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

Ein Fragment erstellen

Ein neues Fragment erstellen

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

Das Fragment benennen

Geben Sie in die Felder Label und Identifier den Namen des Fragments ein, beispielsweise InvoiceDefaultFragment.

Screenshot des Pega-Formulars „Create HTML Fragment“ mit „InvocieDefaultFragment“ in den Feldern „Label“ und „Identifier“ sowie „FlexiCapture for Invoices“ als ausgewähltem Anwendungskontext.

Das Fragment öffnen

Klicken Sie auf Create and open.

Den Fragmentcode hinzufügen

Geben Sie in das Feld HTML Source den Code für Ihr Fragment ein. Der Code für jedes Fragment ist in den folgenden Abschnitten angegeben.

Wiederholen Sie diese Schritte für jedes der fünf Fragmente. Den Code für alle Fragmente finden Sie auch im Installationsordner des Connectors:

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

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

ContractDefaultFragment

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

LetterDefaultFragment

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

PriceDefaultFragment

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

UiPath

Blue Prism

Automation Anywhere

WinActor

Appian

Pega

M-Files

Laserfiche

NX Manager

Ein Fragment erstellen

InvoiceDefaultFragment

BankingDefaultFragment

ContractDefaultFragment

LetterDefaultFragment

PriceDefaultFragment

​Ein Fragment erstellen

​InvoiceDefaultFragment

​BankingDefaultFragment

​ContractDefaultFragment

​LetterDefaultFragment

​PriceDefaultFragment

Ein Fragment erstellen

InvoiceDefaultFragment

BankingDefaultFragment

ContractDefaultFragment

LetterDefaultFragment

PriceDefaultFragment