Créer la section de vérification

La section de vérification intègre la station Web Vérification d’ABBYY FlexiCapture dans le dossier et ajoute le bouton Submit qui permet de terminer la task de vérification.

Créer la section et ses mises en page

Créer la section

Dans Verification Flow Action, créez une section nommée Verification et ouvrez-la sous l’onglet Design.

Ajouter deux mises en page dynamiques

Ajoutez une Embedded section nommée VerificationSection à la première mise en page dynamique, puis un bouton nommé Submit à la seconde.Pour la configuration de chacun d’eux, consultez Ajouter la section de vérification intégrée et Ajouter un bouton Submit personnalisé.

Ajouter la section de vérification intégrée

Définir le contexte de page et la section

Sélectionnez Use current page context dans la liste Page context. Sélectionnez ensuite By name dans le champ Section et indiquez VerificationSection.

Créer la nouvelle section

Cliquez sur le bouton de configuration pour créer une nouvelle section.

Capture d’écran de la boîte de dialogue Section Include dans Pega, montrant Page context défini sur Use current page context, Section défini sur By name avec la valeur VerificationSection, et le bouton de configuration mis en évidence.

Ouvrir l’onglet HTML

Cliquez sur Create and open, puis sur l’onglet HTML.

Saisir le code de la section

Décochez l’option Auto-generated HTML et saisissez le code de la section.

VerificationSection.html

Copiez le code de la section depuis le fichier VerificationSection.html situé dans ce dossier :

%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...");
}  
/*
 Ajouter un nouvel écouteur pour l'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>

Ajouter un bouton Submit personnalisé

Alignez la mise en page dynamique à droite de l’écran avant d’ajouter le bouton. Ouvrez les propriétés de la mise en page dynamique, cliquez sur l’onglet Presentation, sélectionnez Right dans le champ Float, puis cliquez sur Submit pour appliquer les modifications.

Capture d'écran de la boîte de dialogue des propriétés de la mise en page dynamique dans Pega, montrant l'onglet Presentation avec le champ Float défini sur Right.

Ajouter l'élément bouton

Ajoutez un élément Button simple à la mise en page dynamique et ouvrez ses propriétés.

Définir le libellé du bouton

Cliquez sur l’onglet General et saisissez Submit comme texte de libellé du bouton.

Capture d'écran de la boîte de dialogue Cell Properties d'un bouton dans Pega, montrant l'onglet General avec le libellé du bouton défini sur Text et la valeur de libellé Submit mise en évidence.

Définir le format du contrôle

Dans l’onglet Presentation, sélectionnez Strong dans la liste Control format.

Si le bouton Submit ne s’affiche pas pour votre dossier, sélectionnez plutôt Standard.

Capture d'écran de la boîte de dialogue Cell Properties d'un bouton dans Pega, montrant l'onglet Presentation avec le champ Control format défini sur Strong.

Connecter l'action de clic

Dans l’onglet Action, ajoutez un événement Click et connectez-le à l’action Finish Assignment.

Capture d'écran de la boîte de dialogue Cell Properties d'un bouton dans Pega, montrant l'onglet Actions avec un événement Click connecté à l'action Finish Assignment dans Action set 1.

Masquer les boutons par défaut

Cliquez sur Submit. Pour masquer le jeu de boutons standard du flow, à savoir Cancel, Save et Submit, ouvrez Verification en cliquant sur Records → Process → Flow Action, cliquez sur l’onglet Action, puis sélectionnez Hide the default action section buttons.

Capture d'écran de l'onglet Action d'une action de flux dans Pega, montrant la section Action buttons avec l'option Hide the default action section buttons sélectionnée.

UiPath

Blue Prism

Automation Anywhere

WinActor

Appian

Pega

M-Files

Laserfiche

NX Manager

Créer la section de vérification

Créer la section et ses mises en page

Ajouter la section de vérification intégrée

VerificationSection.html

Ajouter un bouton Submit personnalisé

​Créer la section et ses mises en page

​Ajouter la section de vérification intégrée

​VerificationSection.html

​Ajouter un bouton Submit personnalisé

Créer la section et ses mises en page

Ajouter la section de vérification intégrée

VerificationSection.html

Ajouter un bouton Submit personnalisé