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

# Crear una sección de verificación

> Cree una sección de verificación de Pega con un iframe VerificationSection incrustado y un botón submit personalizado que muestre la estación web de verificación de FlexiCapture.

Para crear una sección de verificación, haga lo siguiente:

1. En **Verification Flow Action**, cree una sección llamada *Verification* y ábrala en la pestaña **Design**.
2. Agregue dos diseños dinámicos. En el primero, agregue una **sección incrustada** llamada [VerificationSection](#verificationsection). En el segundo, agregue un botón llamado [submit](#submit).

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

Al agregar una **sección incrustada** a un diseño dinámico:

1. Seleccione **Use current page context** en la lista **Page context**. Seleccione **By name** en el campo **Section** e indique lo siguiente: *VerificationSection*.

2. Haga clic en el botón de configuración para crear una sección nueva.

   <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="Captura de pantalla del cuadro de diálogo Section Include en Pega, que muestra Page context configurado en Use current page context, Section configurado en By name con el valor VerificationSection y el botón de configuración resaltado." width="605" height="245" data-path="images/flexi-capture/connectors/Pega184.png" />
   </Frame>

3. Haga clic en **Create and open** y, a continuación, en la pestaña **HTML**.

4. Desactive la opción **Auto-generated HTML** e introduzca el código que se proporciona a continuación.

<Note>
  Este código también se puede copiar del archivo **VerificationSection.html**, que puede encontrar en *%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...");
}  
/*
 Agregar nuevo listener para 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" />Creación de un botón Submit personalizado

Antes de crear un botón en el diseño dinámico, debe alinearlo a la derecha de la pantalla. Para ello, abra las propiedades del diseño dinámico, haga clic en la pestaña **Presentation** y seleccione **Right** en el campo **Float**. Haga clic en **Submit** para aplicar los cambios.

<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="Captura de pantalla del cuadro de diálogo de propiedades de diseño dinámico en Pega, que muestra la pestaña Presentation con el campo Float establecido en Right." width="609" height="554" data-path="images/flexi-capture/connectors/Pega185.png" />
</Frame>

Para agregar el botón, haga lo siguiente:

1. Agregue un elemento *Button* básico al diseño dinámico y abra sus propiedades.

2. Haga clic en la pestaña **General** y especifique *Submit* como texto de la etiqueta del botón.

   <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="Captura de pantalla del cuadro de diálogo Cell Properties de un botón en Pega, que muestra la pestaña General con Button caption establecido en Text y el valor de la etiqueta Submit resaltado." width="681" height="408" data-path="images/flexi-capture/connectors/Pega186.png" />
   </Frame>

3. <a id="3" />En la pestaña **Presentation**, seleccione **Strong** en la lista **Control format**.

   <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="Captura de pantalla del cuadro de diálogo Cell Properties de un botón en Pega, que muestra la pestaña Presentation con el campo Control format establecido en Strong." width="681" height="212" data-path="images/flexi-capture/connectors/Pega187.png" />
   </Frame>

4. En la pestaña **Action**, agregue un evento *Click* y vincúlelo a la acción *Finish Assignment*.

   <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="Captura de pantalla del cuadro de diálogo Cell Properties de un botón en Pega, que muestra la pestaña Actions con un evento Click vinculado a la acción Finish Assignment en Action set 1." width="681" height="294" data-path="images/flexi-capture/connectors/Pega188.png" />
   </Frame>

5. Haga clic en **Submit**. Para ocultar el conjunto estándar de botones del flujo (es decir, **Cancel**, **Save** y **Submit**), abra **Verification** haciendo clic en **Records → Process → Flow Action**, haga clic en la pestaña **Action** y seleccione **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="Captura de pantalla de la pestaña Action de la acción de flujo en Pega, que muestra la sección Action buttons con la opción Hide the default action section buttons seleccionada." width="519" height="163" data-path="images/flexi-capture/connectors/Pega189.png" />
</Frame>

<Warning>
  Si el botón **Submit** no aparece en su caso, seleccione **Standard** en la lista **Control format** del [paso 3](#3).
</Warning>
