検証セクションの作成

検証セクションは、ABBYY FlexiCapture Web Verification Station を Case に埋め込み、検証タスクを完了する Submit ボタンを追加します。

セクションと dynamic layout の作成

セクションを作成する

Verification Flow Action で Verification という名前のセクションを作成し、Design tab で開きます。

2 つの dynamic layout を追加する

1 つ目の dynamic layout に VerificationSection という名前の Embedded section を追加し、2 つ目に Submit という名前のボタンを追加します。それぞれの設定方法については、埋め込み検証セクションを追加するおよびカスタムの Submit ボタンを追加するを参照してください。

埋め込み検証セクションを追加する

ページコンテキストとセクションを設定する

Page context リストで Use current page context を選択します。次に、Section フィールドで By name を選択し、VerificationSection を指定します。

新しいセクションを作成する

設定ボタンをクリックして、新しいセクションを作成します。

Pega の Section Include ダイアログのスクリーンショット。Page context は Use current page context に設定され、Section は By name で値は VerificationSection になっており、設定ボタンが強調表示されています。

HTML タブを開く

Create and open をクリックし、次に HTML タブをクリックします。

セクションのコードを入力する

Auto-generated HTML オプションをオフにして、セクションのコードを入力します。

VerificationSection.html

このフォルダー内の VerificationSection.html ファイルからセクションのコードをコピーします。

%Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Flow actions

<body>
<% if ( tools.findPage("pyWorkPage").getProperty(".VerificationUrl").getStringValue().contains("https://")) {%>
<iframe id="verifyFrame" style = "width: 880px; height: 750px;" src="<pega:reference name=".VerificationUrl" mode="javascript" />" onload = changeWidth() > </iframe>
<% } else { %>
    <h1> <pega:reference name=".VerificationUrl" /> </h1>
<% } %>
<script> 
function changeWidth() {  
  console.log("Check if the IE11 browser....");
  if(!!window.MSInputMethodContext && !!document.documentMode){
    console.log("IE11 browser.");
    return;
  }
  console.log("Other browser. Change width for iframe...");
  document.getElementById("verifyFrame").style = "width: 1000px; height: 750px;";
  console.log("iframe width was changed...");
}  
/*
 iframeの新しいリスナーを追加する。 
*/
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  console.log("Check if verification task was closed....");
  if(event.data.includes("FC_Verification_TaskClosed")) { 
    console.log("Create new option for VerificationCompleted activity running...");
    var options = {
      name: "VerificationCompleted"
    };
    console.log("Run VerificationCompleted activity....");
    pega.api.ui.actions.runActivity(options);
  }
  console.log("Message was processed.");
}
</script>
</body>

カスタム Submit ボタンを追加する

ボタンを追加する前に、dynamic layout を画面の右側に寄せておきます。dynamic layout のプロパティを開き、Presentation タブをクリックし、Float field で Right を選択して、Submit をクリックして変更を適用します。

Presentation タブが表示され、Float field が Right に設定された Pega の Dynamic layout プロパティダイアログのスクリーンショット。

ボタン要素を追加する

基本的な Button 要素を dynamic layout に追加し、そのプロパティを開きます。

ボタンのキャプションを設定する

General タブをクリックし、ボタンのキャプションテキストに Submit を指定します。

General タブが表示され、Button caption が Text に設定され、キャプション値 Submit が強調表示された Pega のボタンの Cell Properties ダイアログのスクリーンショット。

コントロールの書式を設定する

Presentation タブで、Control format リストから Strong を選択します。

お使いの case で Submit ボタンが表示されない場合は、代わりに Standard を選択してください。

Presentation タブが表示され、Control format field が Strong に設定された Pega のボタンの Cell Properties ダイアログのスクリーンショット。

クリックアクションを接続する

Action タブで Click イベントを追加し、Finish Assignment アクションに接続します。

Actions タブが表示され、Action set 1 で Click イベントが Finish Assignment アクションに接続された Pega のボタンの Cell Properties ダイアログのスクリーンショット。

既定のボタンを非表示にする

Submit をクリックします。flow の標準ボタンセット、つまり Cancel、Save、Submit を非表示にするには、Records → Process → Flow Action をクリックして Verification を開き、Action タブをクリックして Hide the default action section buttons を選択します。

Action buttons セクションで Hide the default action section buttons オプションが選択された Pega の flow action の Action タブのスクリーンショット。

UiPath

Blue Prism

Automation Anywhere

WinActor

Appian

Pega

M-Files

Laserfiche

NX Manager

セクションと dynamic layout の作成

埋め込み検証セクションを追加する

VerificationSection.html

カスタム Submit ボタンを追加する

​セクションと dynamic layout の作成

​埋め込み検証セクションを追加する

​VerificationSection.html

​カスタム Submit ボタンを追加する

セクションと dynamic layout の作成

埋め込み検証セクションを追加する

VerificationSection.html

カスタム Submit ボタンを追加する