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

# Configure the user interface for a single-document case

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

The case interface needs a way to attach files, an embedded verification page, and a section that displays the captured data.

## Skip the Create view

Skipping the **Create** view takes a new case straight to case configuration.

<Steps>
  <Step title="Open the case settings">
    Open the case in **Case types** and click **Settings**.
  </Step>

  <Step title="Select the option">
    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>
  </Step>
</Steps>

## How users attach files to a case

In a configured case, the user clicks **Add attachment → File from device**, selects the files and clicks **Attach**, and then clicks **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>

## Create the file attachment interface

<Steps>
  <Step title="Open the flow">
    Open the `InvoiceReceived_Flow` flow in **Dev Studio** by clicking **Record → Process → Flow**, or **App** → `<case name>` → **Process → Flow**.
  </Step>

  <Step title="Assign the flow action">
    Open the properties for the connector of the two stages. In the **Flow action** field, add a flow action for adding files.

    For more information, 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>
  </Step>
</Steps>

## How the verification page appears

The verification page displays in the case header when the document arrives at the verification stage.

To continue processing the document after verification, the operator clicks **Complete Task**, waits for the `Task completed` message, and then clicks **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>

## Create the verification page interface

<Steps>
  <Step title="Open the flow">
    Open the `Verification_Flow` flow in **Dev Studio** by clicking **Record → Process → Flow**, or **App** → `<case name>` → **Process → Flow**.
  </Step>

  <Step title="Assign the flow action">
    Open the properties for the connector of the two stages. In the **Flow action** field, add a flow action holding a verification page.

    For more information, 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>
  </Step>
</Steps>

## Skip the verification stage

A batch that skips verification on the ABBYY FlexiCapture side goes straight to the `Processed` stage, so the case does not need to verify it either. That happens when no verification stage is set up, and for other reasons.

<Steps>
  <Step title="Create the validation rule">
    Select the verification stage in the workflow, click the **Validation** tab, and create a new `VerificationUrlEmpty` rule.
  </Step>

  <Step title="Set the condition">
    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>
  </Step>
</Steps>

## Create the pyCaseInformation section

A section is what displays the data received from ABBYY FlexiCapture in a Pega case.

<Steps>
  <Step title="Create the section">
    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>
  </Step>

  <Step title="Name the section">
    1. In the **Label** and **Identifier** fields, enter `pyCaseInformation`.
    2. Make sure that the section is being created within the context of the application.
    3. Make sure that the full name of the case type is specified in the **Apply to** field.
    4. 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>
  </Step>

  <Step title="Turn off auto-generated HTML">
    Open the section you created, click the **HTML** tab, and clear the **Auto-generated HTML** option.
  </Step>

  <Step title="Paste the section HTML">
    In the **HTML Source** field, paste the code from the `pyCaseInformation.html` file, which is in this folder:

    ```text theme={null}
    %Installation Path%\Connector for FlexiCapture as a Service with verification\Samples\Code examples\Configure UI\Single document
    ```
  </Step>
</Steps>
