Custom Pages Guide

Overview

Custom Pages provide users the power to customize their ID&V flow with additional steps during a Process Instance beyond the scope of customization offered by themes and custom forms.

Create a Custom Page

Create a Page in the Backoffice

A new Custom Page can be created from the Backoffice application. Access the Backoffice and find the 'Custom Pages' page located in the 'Integration Hub' menu in the left-side navigation bar.

Click the 'New Custom Page' button located at the top-right of the screen to start creating a new Custom Page.

To upload assets and define a Custom Page, first give the new page a name and click the 'Save' button located at the right-side of the screen.

Upload Assets

Once a new Custom Page has been saved, it will be possible to begin defining the details of the page by uploading assets.

The Custom Page creation provides a file upload or Base app URL where assets can be defined.

On the right-side of the screen, a preview of the page will be displayed.

File Upload

Bundles of .zip and .tar.gz are supported, and contain folders or sub-folders of various types. By default, the max bundle size is 15MB. The following filetypes are supported:

• Web - html, js, css, json, xml, txt, map, wasm
• images - png, jpeg, jpg, gif, svg, ico
• videos - mp4, mov, webm
• fonts - woff, woff2, tff
• docs - pdf
• audio - mp3

Additionally, the following conditions must be met:

• The root folder must contain an index.html file.
• If a filetype not covered by the list above is uploaded, it will be rejected and upload will fail.

Once a bundle has been successfully uploaded, a preview of the page will appear on the right side of the screen.

Preview demonstrating a successfully uploaded bundle

Advance to the Next Activity

Custom Pages can be configured to include buttons that advance to the next step in the ID&V process. In the example above, a 'Continue' button has been programmed to advance to the next activity in the Process Definition using Javascript.

This section will describe how to advance to the next page when the 'Continue' button is pressed.

Example Javascript:

window.parent.postMessage({ event: 'READY' }, '*')

​

var button = document.querySelector('#continue')

button.addEventListener('click', function () {

    // Send `message` to the parent using the postMessage method on the window.parent reference.

    window.parent.postMessage({ event: 'SEND', variables: { message: 'Success' } }, '*')

})

Add Custom Page to a Process Definition

A Custom Page can be added to a Process Definition using the 'Custom Page' activity.

Conditional Logic

Using data submitted within a Custom Page, it is possible to create conditional logic to influence the flow based on the results of the Custom Page. This can be achieved using the _customUis variable. This section will demonstrate a simple implementation using a value submitted in the Custom Page.

Step 1 - Set Conditional Logic

To set the conditional logic that follows a Custom Page activity, click the the sequence arrow that follows after the activity. This will open the right-side contextual menu. Expand the 'Condition' option and choose a type of 'Expression'.

In the above example, the following expression is used: ${_customUis.customPage1.currentCapture.customPageParameters.pageValue.value == "example"}

This example can be described as follows:

• _customUis.customPage1 - customPage1 represents the Custom Page Key that is defined within the Custom Page activity input parameters.
• .currentCapture - Represents the current entry of the Custom Page made during the flow.
• .customPageParameters - Provides access to the parameters of the Custom Page.
• .pageValue.value - .pageValue represents the Custom Page field to be accessed. For example, this can be a name, email, or country. .value retrieves the value entered for that field.

Step 2 - Set Default Flow

When conditional logic is used, the Process Definition will need a default flow to access in cases where the condition is not met. To achieve this, create a new sequence flow from the Custom Page activity and connect elsewhere in the Process Designer. In the example above, the sequence flow is connected to the Write Summary Report activity.

Custom Page Lifecycle

Sequence

1. TrustX Activity loads the page content from index.html
2. The page incorporates a listener for postMessage
3. Custom page invokes with a postMessage to let TrustX know the page is ready to receive data
4. TrustWeb initiates a callback to the custom page to provide the data
5. The custom page renders
6. End user completes activities on the custom page
7. User initiates the next page or end of process

The Custom Page activity includes the following configurable Input Parameters.

Example OCR Implementation

This section will demonstrate how to implement a custom page that can be used for reviewing OCR data captured from a document.

The example in this section features a form created in a custom page that will request first name, last name, country, and gender. Fields will be automatically populated by data captured from a document. If the data is not found, customers can manually enter the data themselves.

Step 1 - Prepare Custom Page Assets

Prepare an assets zip folder that retrieves the OCR session data.

In the example Javascript below, OCR session data, a message event listens for the session data and populates each field if data is found.

Example Javascript:

window.addEventListener('message', function (event) {

  if (event.data.variables) {

    console.log('[BANK] Received data', event.data.variables);

    if (

      event.data.variables.sessionData &&

      event.data.variables.sessionData.firstName

    ) {

      setName(event.data.variables.sessionData.firstName);

    }

    if (

      event.data.variables.sessionData &&

      event.data.variables.sessionData.issuingCountry

    ) {

      setCountry(event.data.variables.sessionData.issuingCountry);

    }

    if (

      event.data.variables.sessionData &&

      event.data.variables.sessionData.lastName

    ) {

      setLastName(event.data.variables.sessionData.lastName);

    }

    if (

      event.data.variables.sessionData &&

      event.data.variables.sessionData.gender

    ) {

      setGender(event.data.variables.sessionData.gender);

    }

  }

});

​

function setName(nameValue) {

  const nameList = document.getElementById('name_list');

  nameList.style.display = 'block';

  const nameListValue = document.getElementById('name_value');

  nameListValue.textContent = nameValue;

​

  const name = document.getElementById('name');

  name.setAttribute('value', nameValue);

  const nameWrapper = document.getElementById('name_field');

  nameWrapper.style.display = 'none';

}

​

function setCountry(countryValue) {

  const countryList = document.getElementById('country_list');

  countryList.style.display = 'block';

  const countryListValue = document.getElementById('country_value');

  countryListValue.textContent = countryValue;

​

  const country = document.getElementById('country');

  country.setAttribute('value', countryValue);

  const countryWrapper = document.getElementById('country_field');

  countryWrapper.style.display = 'none';

}

​

function setLastName(lastNameValue) {

  const lastNameList = document.getElementById('lastName_list');

  lastNameList.style.display = 'block';

  const lastNameListValue = document.getElementById('lastName_value');

  lastNameListValue.textContent = lastNameValue;

​

  const lastName = document.getElementById('lastName');

  lastName.setAttribute('value', lastNameValue);

  const lastNameWrapper = document.getElementById('lastName_field');

  lastNameWrapper.style.display = 'none';

}

function setGender(genderValue) {

  const genderList = document.getElementById('gender_list');

  gender.style.display = 'block';

  const genderListValue = document.getElementById('gender_value');

  genderListValue.textContent = genderValue;

​

  const gender = document.getElementById('gender');

  gender.setAttribute('value', genderValue);

  const genderWrapper = document.getElementById('gender_field');

  genderWrapper.style.display = 'none';

}

​

addEventListener('submit', (event) => {

  event.preventDefault();

  const form = document.getElementById('signup');

  const name = form.elements['name'];

  const country = form.elements['country'];

  const lastName = form.elements['lastName'];

  const gender = form.elements['gender'];

  const formData = {

    name: name.value,

    country: country.value,

    lastName: lastName.value,

    gender: gender.value

  };

  console.log('[BANK] Submitting form', formData);

​

  if (window.parent !== window)

    window.parent.postMessage({ event: 'SEND', variables: formData }, '*');

});

​

window.parent.postMessage({ event: 'READY' }, '*');

Example HTML:

<!DOCTYPE html>

<html lang="en">

​

<head>

  <title>JavaScript Form Demo</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" href="css/style.css" />

</head>

​

<body style="background-color: white;">

  <div class="container">

    <form id="signup">

      <h1>Sign Up for TrustX</h1>

      <!-- Name -->

      <dl style="display: none;" id="name_list">

        <dt id="name_key">Name: </dt>

        <dd id="name_value"></dd>

      </dl>

      <div class="field" id="name_field">

        <label for="name">Name:</label>

        <input type="text" id="name" name="name" placeholder="Enter your First Name" minlength="2" required />

        <br>

      </div>

​

      <!-- Country -->

      <dl style="display: none;" id="country_list">

        <dt id="country_key">Country: </dt>

        <dd id="country_value"></dd>

      </dl>

      <div class="field" id="country_field">

        <label for="country">Country:</label>

        <input type="country" id="country" name="country" placeholder="Enter your Country" required />

      </div>

​

      <!-- Last Name -->

      <dl style="display: none;" id="lastName_list">

        <dt id="lastName_key">Last Name: </dt>

        <dd id="lastName_value"></dd>

      </dl>

      <div class="field" id="lastName_field">

        <label for="lastName">Last Name:</label>

        <input type="lastName" id="lastName" name="lastName" placeholder="Enter your Last Name" required />

      </div>

​

      <!-- Gender -->

      <dl style="display: none;" id="gender_list">

        <dt id="gender_key">Gender: </dt>

        <dd id="gender_value"></dd>

      </dl>

      <div class="field" id="gender_field">

        <label for="gender">Gender:</label>

        <input type="gender" id="gender" name="gender" placeholder="Enter your Gender" required />

      </div>

​

      <br>

      <div class="field">

        <button type="submit" class="full">Subscribe</button>

      </div>

    </form>

  </div>

  <script src="./app.js"></script>

</body>

​

</html>

Step 2 - Create a New Custom Page

Navigate to the Custom Pages page found under the Integration Hub tab. within the Backoffice. Click the 'New Custom Page' button to create a new custom page.

Upload assets using the 'Choose ZIP Bundle' containing the Javascript and HTML samples provided above.

Once configurations are finalized, click the 'Save & Deploy' button to save the custom page.

Step 3 - Add Custom Page to Process Definition

To retrieve OCR data inside the custom page, the custom page activity will be placed after a document has been successfully captured. This example demonstrates a standard document capture flow where the custom page appears after the end-user has successfully captured their document.

Step 4 - Configure Input Parameters

To ensure that the session data is passed to the custom page, it is required to map the entries in the session data input parameter. In this example, the following values must be mapped:

• firstName
• issuingCountry
• lastName
• gender

1. Click the 'Custom Page' activity to open up the right-side contextual menu.

2. Expand the 'Custom Page Name' input parameter and set the value to the previously created custom page.
3. Expand the 'Session Data' input parameter and click the '+' symbol to add a new entry for each session data that will be accessed (firstName, issuingCountry, lastName, gender).

4. Each entry will require a key - value pair where the key is represented by the name of the session data (example: firstName) and the value will be represented by the session data retrieved during the Process Instance. In this example, the values are seen in the table below.

From the above table:

• idDocs["doc1"] retrieves data from the _ idDocs session data table and "doc1" is the unique ID of the document.
• .currentDocumentCapture represents the current document captured during the Process Instance flow.
• .extractedText is the text extracted from the captured document image.
• .ocrData.mrz["8"].value is the extracted ocr data where index 8 represents the firstName value.

For more information on the _idDocs session data tables, see the _idDocs session data guide.

Once all configurations are set, click the 'Save & Deploy' button to finalize the configuration.