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

# Configuring the user interface

> Build the Pega UI for a single-document case: add file attachments, embed the FlexiCapture verification page via iframe, and add the pyCaseInformation.

In order to skip the **Create** view when creating a new case and go straight to case configuration, do the following:

1. Open the case in **Case types** and click **Settings**.
2. On the **General** tab, select **Skip ‘Create’ view when users create a new case**.

<Frame>
  <img src="https://mintcdn.com/abbyy/jk6a9TGm7KRcVxRI/images/flexi-capture/connectors/Pega76.png?fit=max&auto=format&n=jk6a9TGm7KRcVxRI&q=85&s=304eb1ad72f5ff71359985239bdad6cc" alt="Screenshot of the Pega case type Settings General tab with the Skip 'Create' view when users create a new case option selected." width="749" height="450" data-path="images/flexi-capture/connectors/Pega76.png" />
</Frame>

## Adding files to a case

To add files to a configured case:

1. Click **Add attachment… → File from device**.
2. Select the files and click **Attach** in the dialog box that opens.
3. Click **Submit** to run the workflow.

<Frame>
  <img src="https://mintcdn.com/abbyy/jk6a9TGm7KRcVxRI/images/flexi-capture/connectors/Pega77.png?fit=max&auto=format&n=jk6a9TGm7KRcVxRI&q=85&s=f3884ea01d10c09d3b58663390f111e6" alt="Screenshot of a Pega case showing the Add Attachment dialog where files are dragged or selected and the resulting Collect view listing the attached invoice files ready to be submitted." width="1126" height="426" data-path="images/flexi-capture/connectors/Pega77.png" />
</Frame>

To create an interface for adding files, do the following:

1. Open the *InvoiceReceived\_Flow* flow in **Dev Studio** by clicking **Record → Process → Flow** or **App → \<case name> → Process → Flow**.
2. Open the properties for the connector of the two stages. In the **Flow action** field, add a flow action for adding files. For more details, see [Creating a flow action](/flexi-capture/connectors/pega/pega-flow-action).

<Frame>
  <img src="https://mintcdn.com/abbyy/jk6a9TGm7KRcVxRI/images/flexi-capture/connectors/Pega78.png?fit=max&auto=format&n=jk6a9TGm7KRcVxRI&q=85&s=9ae41120188addf327e4c25a0e4b3655" alt="Screenshot of Pega Dev Studio showing the Collect connector properties on a flow, with the Collect flow action assigned in the Flow action field." width="787" height="628" data-path="images/flexi-capture/connectors/Pega78.png" />
</Frame>

## Verification page

The verification page is displayed in the case header when the document arrives at the verification stage. To continue processing the document after the verification is finished, click **Complete Task**, wait for a message that says "Task completed," and then click **Submit**.

<Frame>
  <img src="https://mintcdn.com/abbyy/jk6a9TGm7KRcVxRI/images/flexi-capture/connectors/Pega79.png?fit=max&auto=format&n=jk6a9TGm7KRcVxRI&q=85&s=76d1970a18dbcb92428d3e56fb6f36a9" alt="Screenshot of the ABBYY FlexiCapture verification page embedded in a Pega case header, showing an invoice image, the field-checking panel, and the Pega case stage bar with the Verification stage highlighted." width="830" height="800" data-path="images/flexi-capture/connectors/Pega79.png" />
</Frame>

To create a verification page interface, do the following:

1. Open the *Verification\_Flow* flow in **Dev Studio** by clicking (**Record → Process → Flow** or **App → \<case name> → Process → Flow**.
2. Open the properties for the connector of the two stages. In the **Flow action** field, add a flow action containing a verification page. For more details, see [Creating a flow action](/flexi-capture/connectors/pega/pega-flow-action).

<Frame>
  <img src="https://mintcdn.com/abbyy/jk6a9TGm7KRcVxRI/images/flexi-capture/connectors/Pega80.png?fit=max&auto=format&n=jk6a9TGm7KRcVxRI&q=85&s=36921e0685f57dc0a259dbdf4f23acdc" alt="Screenshot of Pega Dev Studio showing the WaitingForVerification_Flow diagram and the Verification connector properties, with the Verification flow action assigned in the Flow action field." width="838" height="764" data-path="images/flexi-capture/connectors/Pega80.png" />
</Frame>

## <a id="1" />Skipping the verification stage

If no verification stage is set up on the FC side or if a batch skips verification for other reasons and goes straight to the *Processed* stage, then you don't need to verify this batch in this case either.

To skip the verification stage in a workflow, do the following:

1. Select the verification stage in the workflow, click the **Validation** tab and create a new *VerificationUrlEmpty*.
2. Create a *length of .VerificationUrl is Equal To 0* rule.

<Frame>
  <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega63.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=de24ea6d88dcb4429e8d47bcb53cf5fe" alt="Screenshot of Pega Dev Studio showing the Verification stage Validation tab with a Skip stage When rule named VerificationUriEmpty and the When condition that the length of VerificationUrl is Equal To 0." width="1224" height="243" data-path="images/flexi-capture/connectors/Pega63.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/abbyy/Xgx3EG8BZs5YQjIJ/images/flexi-capture/connectors/Pega64.png?fit=max&auto=format&n=Xgx3EG8BZs5YQjIJ&q=85&s=18193096c7959db092d541ff350c2098" alt="Screenshot of the Pega Condition dialog building the rule length of .VerificationUrl is Equal To 0, with the value field highlighted." width="653" height="228" data-path="images/flexi-capture/connectors/Pega64.png" />
</Frame>

## The pyCaseInformation section

For the data received from FC to be displayed in a Pega case, you need to create and configure a section.

To create a user interface section, do the following:

1. On the **App** tab, click **Create → User Interface → Section**.

   <Frame>
     <img src="https://mintcdn.com/abbyy/jk6a9TGm7KRcVxRI/images/flexi-capture/connectors/Pega81.png?fit=max&auto=format&n=jk6a9TGm7KRcVxRI&q=85&s=f31b640533bdb9ac2ee856a54ab2fdcb" alt="Screenshot of the Pega App Explorer with the Create → User Interface menu open and Section selected for the InvoiceWithVerification case type." width="666" height="746" data-path="images/flexi-capture/connectors/Pega81.png" />
   </Frame>

2. In the **Label** and **Identifier** fields, enter the following value: *pyCaseInformation*. Make sure that the section is being created within the context of the application and that the full name of the case type is specified in the **Apply to** field. Next, click **Create and open**.

   <Frame>
     <img src="https://mintcdn.com/abbyy/jk6a9TGm7KRcVxRI/images/flexi-capture/connectors/Pega82.png?fit=max&auto=format&n=jk6a9TGm7KRcVxRI&q=85&s=4d03a1821d177c4f0d458307e1938c4b" alt="Screenshot of the Pega Create Section form with pyCaseInformation in the Label and Identifier fields and the InsCo-FlexiCap-Work-InvoiceWithVerification case type entered in the Apply to field." width="1204" height="479" data-path="images/flexi-capture/connectors/Pega82.png" />
   </Frame>

3. Open the section that you have created, click the HTML tab, and clear the **Auto-generated HTML** option.

4. In the **HTML Source** field, paste the code from the **pyCaseInformation.html** file, which you can find in *%Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Configure UI\Single document*.
