Create the verification section

The verification section embeds the ABBYY FlexiCapture Web Verification Station in the case, and adds the Submit button that completes the verification task.

Create the section and its layouts

Create the section

In Verification Flow Action, create a section named Verification and open it on the Design tab.

Add two dynamic layouts

Add an Embedded section named VerificationSection to the first dynamic layout, and a button named Submit to the second.For the configuration of each one, see Add the embedded verification section and Add a custom Submit button.

Add the embedded verification section

Set the page context and section

Select Use current page context in the Page context list. Then select By name in the Section field and specify VerificationSection.

Create the new section

Click the configuration button to create a new section.

Screenshot of the Section Include dialog in Pega, showing Page context set to Use current page context, Section set to By name with the value VerificationSection, and the configuration button highlighted.

Open the HTML tab

Click Create and open, and then click the HTML tab.

Enter the section code

Clear the Auto-generated HTML option and enter the section code.

VerificationSection.html

Copy the section code from the VerificationSection.html file in this folder:

%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...");
}  
/*
 Add new listener for 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>

Add a custom Submit button

Align the dynamic layout to the right of the screen before you add the button. Open the properties of the dynamic layout, click the Presentation tab, select Right in the Float field, and then click Submit to apply the changes.

Screenshot of the Dynamic layout properties dialog in Pega, showing the Presentation tab with the Float field set to Right.

Add the button element

Add a basic Button element to the dynamic layout and open its properties.

Set the button caption

Click the General tab and specify Submit for the button caption text.

Screenshot of the Cell Properties dialog for a button in Pega, showing the General tab with the Button caption set to Text and the caption value Submit highlighted.

Set the control format

On the Presentation tab, select Strong in the Control format list.

If the Submit button is not displayed for your case, select Standard instead.

Screenshot of the Cell Properties dialog for a button in Pega, showing the Presentation tab with the Control format field set to Strong.

Connect the click action

On the Action tab, add a Click event and connect it to the Finish Assignment action.

Screenshot of the Cell Properties dialog for a button in Pega, showing the Actions tab with a Click event connected to the Finish Assignment action in Action set 1.

Hide the default buttons

Click Submit. To hide the standard set of buttons for the flow, that is Cancel, Save, and Submit, open Verification by clicking Records → Process → Flow Action, click the Action tab, and select Hide the default action section buttons.

Screenshot of the flow action Action tab in Pega, showing the Action buttons section with the Hide the default action section buttons option selected.

UiPath

Blue Prism

Automation Anywhere

WinActor

Appian

Pega

M-Files

Laserfiche

NX Manager

Create the section and its layouts

Add the embedded verification section

VerificationSection.html

Add a custom Submit button

​Create the section and its layouts

​Add the embedded verification section

​VerificationSection.html

​Add a custom Submit button

Create the section and its layouts

Add the embedded verification section

VerificationSection.html

Add a custom Submit button