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

# Créer une section de Verification

> Créez une section de verification Pega avec une iframe VerificationSection intégrée et un bouton Submit personnalisé qui affiche la station Web Verification de FlexiCapture.

Pour créer une section de Verification, procédez comme suit :

1. Dans **Verification Flow Action**, créez une section appelée *Verification* et ouvrez-la dans l’onglet **Design**.
2. Ajoutez deux mises en page dynamiques. Dans la première, ajoutez une **Section intégrée** appelée [VerificationSection](#verificationsection). Dans la seconde, ajoutez un bouton appelé [Submit](#submit).

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

Lorsque vous ajoutez une **section intégrée** à une mise en page dynamique :

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

2. Cliquez sur le bouton de configuration pour créer une nouvelle 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="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." width="605" height="245" data-path="images/flexi-capture/connectors/Pega184.png" />
   </Frame>

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

4. Décochez l’option **Auto-generated HTML** et saisissez le code ci-dessous.

<Note>
  Ce code peut également être copié depuis le fichier **VerificationSection.html**, que vous trouverez dans *%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...");
}  
/*
 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>
```

## <a id="submit" />Création d’un bouton Submit personnalisé

Avant de créer un bouton dans la mise en page dynamique, vous devez l’aligner à droite de l’écran. Pour ce faire, ouvrez les propriétés de la mise en page dynamique, cliquez sur l’onglet **Presentation**, puis sélectionnez **Right** dans le champ **Float**. Cliquez sur **Submit** pour appliquer les modifications.

<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="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." width="609" height="554" data-path="images/flexi-capture/connectors/Pega185.png" />
</Frame>

Pour ajouter le bouton, procédez comme suit :

1. Ajoutez un élément *Button* de base à la mise en page dynamique et ouvrez ses propriétés.

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

   <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="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 Submit mise en évidence." width="681" height="408" data-path="images/flexi-capture/connectors/Pega186.png" />
   </Frame>

3. <a id="3" />Dans l’onglet **Presentation**, sélectionnez **Strong** dans la liste **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="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." width="681" height="212" data-path="images/flexi-capture/connectors/Pega187.png" />
   </Frame>

4. Dans l’onglet **Action**, ajoutez un événement *Click* et associez-le à l’action *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="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 associé à l’action Finish Assignment dans Action set 1." width="681" height="294" data-path="images/flexi-capture/connectors/Pega188.png" />
   </Frame>

5. Cliquez sur **Submit**. Pour masquer le jeu standard de boutons du flow (c.-à-d. **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**.

<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="Capture d’écran de l’onglet Action de l’action de flux dans Pega, montrant la section Action buttons avec l’option Hide the default action section buttons sélectionnée." width="519" height="163" data-path="images/flexi-capture/connectors/Pega189.png" />
</Frame>

<Warning>
  Si le bouton **Submit** ne s’affiche pas dans votre dossier, sélectionnez **Standard** dans la liste **Control format** à l’[étape 3](#3).
</Warning>
