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

# Erstellen eines Verifizierungsbereichs

> Erstellen Sie einen Pega-Verifizierungsbereich mit einem eingebetteten VerificationSection-iframe und einer benutzerdefinierten Submit-Schaltfläche, über die die FlexiCapture Web-Verifizierungsstation angezeigt wird.

Um einen Verifizierungsbereich zu erstellen, gehen Sie wie folgt vor:

1. Erstellen Sie in **Verification Flow Action** einen Abschnitt namens *Verification* und öffnen Sie ihn auf der Registerkarte **Design**.
2. Fügen Sie zwei dynamische Layouts hinzu. Fügen Sie dem ersten dynamischen Layout einen **Embedded section** namens [VerificationSection](#verificationsection) hinzu. Dem zweiten fügen Sie eine Schaltfläche namens [Submit](#submit) hinzu.

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

So fügen Sie einem dynamischen Layout eine **Embedded section** hinzu:

1. Wählen Sie in der Liste **Seitenkontext** die Option **Aktuellen Seitenkontext verwenden** aus. Wählen Sie im Feld **Abschnitt** die Option **Nach Name** aus und geben Sie Folgendes an: *VerificationSection*.

2. Klicken Sie auf die Konfigurationsschaltfläche, um einen neuen Abschnitt zu erstellen.

   <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 des Dialogfelds „Section Include“ in Pega, der den auf „Aktuellen Seitenkontext verwenden“ gesetzten Seitenkontext, den auf „Nach Name“ mit dem Wert VerificationSection gesetzten Abschnitt und die hervorgehobene Konfigurationsschaltfläche zeigt." width="605" height="245" data-path="images/flexi-capture/connectors/Pega184.png" />
   </Frame>

3. Klicken Sie auf **Erstellen und öffnen** und dann auf die Registerkarte **HTML**.

4. Deaktivieren Sie die Option **Automatisch erzeugtes HTML** und geben Sie den unten angegebenen Code ein.

<Note>
  Dieser Code kann auch aus der Datei **VerificationSection.html** kopiert werden, die Sie unter *%Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Flow actions* finden.
</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...");
}  
/*
 Neuen Listener für iframe hinzufügen. 
*/
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" />Erstellen einer benutzerdefinierten Submit-Schaltfläche

Bevor Sie im dynamischen Layout eine Schaltfläche erstellen, müssen Sie sie rechts auf dem Bildschirm ausrichten. Öffnen Sie dazu die Eigenschaften des dynamischen Layouts, klicken Sie auf die Registerkarte **Presentation** und wählen Sie im Feld **Float** **Right** aus. Klicken Sie auf **Submit**, um die Änderungen zu übernehmen.

<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 des Dialogfelds „Dynamic layout properties“ in Pega mit der Registerkarte „Presentation“, in der das Feld „Float“ auf „Right“ gesetzt ist." width="609" height="554" data-path="images/flexi-capture/connectors/Pega185.png" />
</Frame>

Gehen Sie wie folgt vor, um die Schaltfläche hinzuzufügen:

1. Fügen Sie dem dynamischen Layout ein einfaches *Button*-Element hinzu und öffnen Sie dessen Eigenschaften.

2. Klicken Sie auf die Registerkarte **General** und geben Sie als Beschriftung der Schaltfläche *Submit* an.

   <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 des Dialogfelds „Cell Properties“ für eine Schaltfläche in Pega mit der Registerkarte „General“, in der die Schaltflächenbeschriftung auf „Text“ gesetzt ist und der Beschriftungswert „Submit“ hervorgehoben ist." width="681" height="408" data-path="images/flexi-capture/connectors/Pega186.png" />
   </Frame>

3. <a id="3" />Wählen Sie auf der Registerkarte **Presentation** in der Liste **Control format** **Strong** aus.

   <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 des Dialogfelds „Cell Properties“ für eine Schaltfläche in Pega mit der Registerkarte „Presentation“, in der das Feld „Control format“ auf „Strong“ gesetzt ist." width="681" height="212" data-path="images/flexi-capture/connectors/Pega187.png" />
   </Frame>

4. Fügen Sie auf der Registerkarte **Action** ein *Click*-Ereignis hinzu und verknüpfen Sie es mit der Aktion *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="Screenshot des Dialogfelds „Cell Properties“ für eine Schaltfläche in Pega mit der Registerkarte „Actions“, in der ein „Click“-Ereignis mit der Aktion „Finish Assignment“ in „Action set 1“ verknüpft ist." width="681" height="294" data-path="images/flexi-capture/connectors/Pega188.png" />
   </Frame>

5. Klicken Sie auf **Submit**. Um die Standardschaltflächen für den Flow auszublenden (d. h. **Cancel**, **Save** und **Submit**), öffnen Sie **Verification**, indem Sie auf **Records → Process → Flow Action** klicken, wechseln Sie zur Registerkarte **Action** und wählen Sie **Hide the default action section buttons** aus.

<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 der Registerkarte „Action“ der Flow-Aktion in Pega mit dem Abschnitt „Action buttons“, in dem die Option „Hide the default action section buttons“ ausgewählt ist." width="519" height="163" data-path="images/flexi-capture/connectors/Pega189.png" />
</Frame>

<Warning>
  Wenn die Schaltfläche **Submit** für Ihren Case nicht angezeigt wird, wählen Sie in [Schritt 3](#3) in der Liste **Control format** **Standard** aus.
</Warning>
