HTML フラグメントの作成

HTML フラグメントは、複数文書処理のCaseで使用するユーザーインターフェースの一部を表示します。

フラグメントの作成

新しいフラグメントを開始する

Dev Studio で、Records → Technical → HTML Fragment → Create をクリックします。

フラグメントに名前を付ける

Label フィールドと Identifier フィールドに、フラグメントの名前 (例: InvoiceDefaultFragment) を入力します。

Label フィールドと Identifier フィールドに InvocieDefaultFragment が入力され、アプリケーションコンテキストとして FlexiCapture for Invoices が選択されている Pega の Create HTML Fragment フォームのスクリーンショット。

フラグメントを開く

Create and open をクリックします。

フラグメントコードを追加する

HTML Source フィールドに、フラグメントのコードを入力します。各フラグメントのコードは、以下のセクションに記載されています。

5 つのフラグメントそれぞれについて、これらの手順を繰り返します。すべてのフラグメントのコードは、コネクターのインストールフォルダーにもあります。

%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>
  請求書 <br> <hr>
</h1>
<div class="row">
  <div class="invoicecolumn">
    <p> <span class="name"> 請求書番号 </span> <br> <span class="value"> ---- </span> </p>
    <p> <span class="name"> 請求日 </span> <br> <span class="value"> ---- </span> </p>
  </div>
  <div class="invoicecolumn">
    <p> <span class="name"> 住所 </span> <br> <span class="value"> ---- </span> </p>
  </div>
</div>
<h4>請求書テーブル</h4> 
<table style="width:100%">
  <tr>
    <th>参照</th>
    <th>品名</th> 
    <th>数量</th>
    <th>注文番号</th>
    <th>単価</th> 
    <th>合計金額</th>
  </tr>
</table>
<p> <span class="name"> 合計金額 </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> 会社 </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>住所</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>
  契約 <br> <hr>
</h1>
<p> <span class="name"> 契約番号 </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> 契約日 </span> <br> <span class="value"> ---- </span> </p>
<br>

LetterDefaultFragment

<h1>
  レター <br> <hr>
</h1>
<p> <span class="name"> レターの日付 </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> 差出人 </span> <br> <span class="value"> ---- </span> </p>
<p> <span class="name"> 宛先 </span> <br> <span class="value"> ---- </span> </p>
<br>

PriceDefaultFragment

<h1>
  Price <br> <hr>
</h1>
<p> <span class="name"> 会社 </span> <br> <span class="value"> ---- </span> </p>
<h4>Price Table</h4> 
<table style="width:100%">
  <tr>
    <th>品名</th>
    <th>単価</th> 
  </tr>
</table>

UiPath

Blue Prism

Automation Anywhere

WinActor

Appian

Pega

M-Files

Laserfiche

NX Manager

フラグメントの作成

InvoiceDefaultFragment

BankingDefaultFragment

ContractDefaultFragment

LetterDefaultFragment

PriceDefaultFragment

​フラグメントの作成

​InvoiceDefaultFragment

​BankingDefaultFragment

​ContractDefaultFragment

​LetterDefaultFragment

​PriceDefaultFragment

フラグメントの作成

InvoiceDefaultFragment

BankingDefaultFragment

ContractDefaultFragment

LetterDefaultFragment

PriceDefaultFragment