Crear la sección de verificación

La sección de verificación incrusta la estación web de verificación de ABBYY FlexiCapture en el case y agrega el botón submit que completa la task de verificación.

Cree la sección y sus dynamic layouts

Cree la sección

En Verification Flow Action, cree una sección con el nombre Verification y ábrala en la pestaña Design.

Agregue dos dynamic layouts

Agregue una Embedded section con el nombre VerificationSection al primer dynamic layout y un botón Submit al segundo.Para conocer la configuración de cada uno, consulte Agregar la sección de verificación incrustada y Agregar un botón Submit personalizado.

Agregar la sección de verificación incrustada

Configurar el contexto de página y la sección

Seleccione Use current page context en la lista Page context. A continuación, seleccione By name en el campo Section e indique VerificationSection.

Crear la sección nueva

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

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.

Abrir la pestaña HTML

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

Introducir el código de la sección

Desactive la opción Auto-generated HTML e introduzca el código de la sección.

VerificationSection.html

Copie el código de la sección del archivo VerificationSection.html de esta carpeta:

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

Agregar un botón submit personalizado

Alinee el dynamic layout a la derecha de la pantalla antes de agregar el botón. Abra las propiedades del dynamic layout, haga clic en la pestaña Presentation, seleccione Right en el campo Float y, a continuación, haga clic en Submit para aplicar los cambios.

Captura de pantalla del cuadro de diálogo de propiedades de Dynamic layout en Pega, donde se muestra la pestaña Presentation con el campo Float configurado en Right.

Agregar el elemento de botón

Agregue un elemento Button básico al dynamic layout y abra sus propiedades.

Definir el texto del botón

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

Captura de pantalla del cuadro de diálogo Cell Properties de un botón en Pega, donde se muestra la pestaña General con Button caption configurado en Text y el valor del texto Submit resaltado.

Definir el formato del control

En la pestaña Presentation, seleccione Strong en la lista Control format.

Si el botón Submit no aparece en su case, seleccione Standard en su lugar.

Captura de pantalla del cuadro de diálogo Cell Properties de un botón en Pega, donde se muestra la pestaña Presentation con el campo Control format configurado en Strong.

Conectar la acción de clic

En la pestaña Action, agregue un evento Click y conéctelo a la acción Finish Assignment.

Captura de pantalla del cuadro de diálogo Cell Properties de un botón en Pega, donde se muestra la pestaña Actions con un evento Click conectado a la acción Finish Assignment en Action set 1.

Ocultar los botones predeterminados

Haga clic en Submit. Para ocultar el conjunto estándar de botones del flow, 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.

Captura de pantalla de la pestaña Action de una flow action en Pega, donde se muestra la sección Action buttons con la opción Hide the default action section buttons seleccionada.

UiPath

Blue Prism

Automation Anywhere

WinActor

Appian

Pega

M-Files

Laserfiche

NX Manager

Crear la sección de verificación

Cree la sección y sus dynamic layouts

Agregar la sección de verificación incrustada

VerificationSection.html

Agregar un botón submit personalizado

​Cree la sección y sus dynamic layouts

​Agregar la sección de verificación incrustada

​VerificationSection.html

​Agregar un botón submit personalizado

Cree la sección y sus dynamic layouts

Agregar la sección de verificación incrustada

VerificationSection.html

Agregar un botón submit personalizado