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

# Creating a verification section

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

To create a verification section, do the following:

1. In **Verification Flow Action**, create a section named *Verification* and open it on the **Design** tab.
2. Add two dynamic layouts. To the first dynamic layout, add an **Embedded section** named [VerificationSection](#verificationsection). To the second, add a button named [Submit](#submit).

## <a id="verificationsection" />VerificationSection

When adding an **Embedded section** to a dynamic layout:

1. Select **Use current page context** in the **Page context** list. Select **By name** in the **Section** field and specify the following: *VerificationSection*.

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

3. Click **Create and open** and then click the **HTML** tab.

4. Clear the **Auto-generated HTML** option and enter the code provided below.

<Note>
  This code can also be copied from the **VerificationSection.html** file, which you can find in *%Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Flow actions*.
</Note>

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

## <a id="submit" />Creating a custom Submit button

Before creating a button in the dynamic layout, you need to align it to the right of the screen. To do this, open the properties of the dynamic layout, click the **Presentation** tab, and select **Right** in the **Float** field. 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>

To add the button, do the following:

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

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

3. <a id="3" />On the **Presentation** tab, select **Strong** in the **Control format** list.

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

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

5. Click **Submit**. To hide the standard set of buttons for the flow (i.e. **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>

<Warning>
  If the **Submit** button is not displayed for your case, select **Standard** in the **Control format** list in [step 3](#3).
</Warning>
