> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abbyy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create the verification section

> Build a Pega verification section with an embedded VerificationSection iframe and custom Submit button that surface the ABBYY FlexiCapture Web Verification Station.

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

<Steps>
  <Step title="Create the section">
    In **Verification Flow Action**, create a section named `Verification` and open it on the **Design** tab.
  </Step>

  <Step title="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](#verificationsection) and [Add a custom Submit button](#submit).
  </Step>
</Steps>

<h2 id="verificationsection">
  Add the embedded verification section
</h2>

<Steps>
  <Step title="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`.
  </Step>

  <Step title="Create the new section">
    Click the configuration button to create a new section.

    <Frame>
      <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega184.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=61412b6b505e1d416a585fbe0484fc4b" alt="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." width="605" height="245" data-path="images/flexi-capture/connectors/Pega184.png" />
    </Frame>
  </Step>

  <Step title="Open the HTML tab">
    Click **Create and open**, and then click the **HTML** tab.
  </Step>

  <Step title="Enter the section code">
    Clear the **Auto-generated HTML** option and enter the section code.
  </Step>
</Steps>

### VerificationSection.html

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

```text theme={null}
%Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Flow actions
```

```html theme={null}
<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>
```

<h2 id="submit">
  Add a custom Submit button
</h2>

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.

<Frame>
  <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega185.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=48fd8f8b4e744c742a011d2e361ac59f" alt="Screenshot of the Dynamic layout properties dialog in Pega, showing the Presentation tab with the Float field set to Right." width="609" height="554" data-path="images/flexi-capture/connectors/Pega185.png" />
</Frame>

<Steps>
  <Step title="Add the button element">
    Add a basic **Button** element to the dynamic layout and open its properties.
  </Step>

  <Step title="Set the button caption">
    Click the **General** tab and specify `Submit` for the button caption text.

    <Frame>
      <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega186.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=1d0cec03965530ec304d802f0e6ddf56" alt="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." width="681" height="408" data-path="images/flexi-capture/connectors/Pega186.png" />
    </Frame>
  </Step>

  <Step title="Set the control format">
    On the **Presentation** tab, select **Strong** in the **Control format** list.

    <Note>
      If the **Submit** button is not displayed for your case, select **Standard** instead.
    </Note>

    <Frame>
      <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega187.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=4755d8b7b5c618f7905168149399c5b7" alt="Screenshot of the Cell Properties dialog for a button in Pega, showing the Presentation tab with the Control format field set to Strong." width="681" height="212" data-path="images/flexi-capture/connectors/Pega187.png" />
    </Frame>
  </Step>

  <Step title="Connect the click action">
    On the **Action** tab, add a **Click** event and connect it to the **Finish Assignment** action.

    <Frame>
      <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega188.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=e51c85e67a0c00dc0e1ca2a412339b1e" alt="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." width="681" height="294" data-path="images/flexi-capture/connectors/Pega188.png" />
    </Frame>
  </Step>

  <Step title="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**.

    <Frame>
      <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega189.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=7a195aa3fb8d62d5762664a1edc4e0f9" alt="Screenshot of the flow action Action tab in Pega, showing the Action buttons section with the Hide the default action section buttons option selected." width="519" height="163" data-path="images/flexi-capture/connectors/Pega189.png" />
    </Frame>
  </Step>
</Steps>
