Prefill tables with lists

When an upstream step returns data structured into a list, you can transform the list into a table using the Form step.

This tutorial shows how to use data points from an upstream step in your flow to prefill the rows and columns of a table. You will understand how to manipulate the data stored in a list to populate tables in web forms.

Prefilling tables with data from lists allows you to pass data between steps. This feature helps you display intermediate results in the user journey or organise the output of a flow into a tabular structure.

How it works

Let's imagine a scenario where you want to onboard organisations into your services and collect the list of addresses of an organisation.

You design your flow to look up the details of organisations on a business registry. For example, the Organisation Basic info lookup step provides basic information, such as the organisation's trade name, addresses and industry sector. All you need to input is the country and the organisation ID.

The raw data that you retrieve from the lookup would look like this (edited for clarity):

{
  "name": "SIGNICAT AS",
  "organizationNumber": "989584022",
  "addresses": [
    {
      "type": "postal",
      "startDate": null,
      "endDate": null,
      "isActive": true,
      "street": "Postboks 4084 Bakklandet",
      "postalCode": "7454",
      "city": "TRONDHEIM",
    },
    {
      "type": "business",
      "startDate": null,
      "endDate": null,
      "isActive": true,
      "street": "Beddingen 16",
      "postalCode": "7042",
      "city": "TRONDHEIM",
    }
  ],
}

Prefilling tables with data from lists allows you to transform the list of addresses (in a JSON array) displayed above into a table. Using the Form step, you can display the table in a web form to your end-users during the user journey.

Below, you can see how the list of address objects maps into rows and columns in a table:

Transforming lists of addresses into rows and columns

Prefilling data in a step helps you control the shape of the data, reduce onboarding times and increase user engagement. Now, your end-users only need to review and confirm the addresses of their organisation instead of typing every single entry.

How to prefill tables with lists in Mint

On a high level, the flow looks like this:

Workflow overview

1. Look up and retrieve organisation information on a business registry.
2. Import the address objects into a Form step.
3. Transform the list of addresses into a table in a web form with the following columns:
   • Street
   • Postal code
   • City
4. Display the table in a web form in the user journey.

Prerequisites

To proceed with the tutorial, you must have completed the following initial preparations:

1. Sign up to the Signicat Dashboard and register your profile. For more details, see the Get started with Signicat guide.
2. In the Dashboard, make sure you have set up an organisation and an account.
3. Additionally, to use this product, you must set up a domain.
4. Have access to Signicat Mint. If you require assistance, you can contact us by creating a support ticket.

Accounts: Test in sandbox, go live in production

We recommend you create a sandbox account to test our services before going live. Sandbox and production accounts must be set up separately.

New to Mint?

If you are new to Signicat Mint, we recommend you start your journey with the Build your first flow guide.

0. Create new flow

With Mint you define all your operations inside a flow. To create a new Mint flow, do the following:

1. In the Signicat Dashboard, go to Products > Signicat Mint.
2. From the Mint sidebar, select Builder.
3. Select Blank to create a flow without using a template.
4. Rename the flow to "Prefill data in table".
5. Select Create flow.

Success!

Now that you have created the flow let's add a step.

1. Add organisation lookup

In the following example, the Organisation Basic info lookup step returns information about an organisation, given the country and the organisation ID.

To add the Organisation Basic info lookup step, do the following:

1. In the Builder UI, select the plus icon (+). Then, select Step.
2. In the left-side "Steps" menu, select Organisation basic info lookup under Data Verification.
3. Enter the following configuration:
   • Country: "no"
   • Organisation ID: "989584022"
   • Source: "Brønnøysundregistrene Norway"

Explanation

The Organisation Basic info lookup step retrieves basic details about an organisation from national and commercial registries, including name, address, and contact details. Data is available to other steps inside the flow as a JSON object.

2. Import data in Form

To add a Form step, do the following:

1. In the Builder UI, select the plus icon (+). Then, select Step.
2. In the left-side "Steps" menu, select Form under Signicat.
3. In the left-side "Form elements" menu, select Special elements > Inputs Table.

When you add a table to a form, a two-column table is automatically created inside the form. Now, configure the table as shown below.

Explanation

The Form step allows you build web forms that display information on-screen during the user journey. Forms support multiple visual components, such as tables.

3. Prefill data in Form table

1. In the Form step configuration, select Column 1 to display the Table settings.
2. In the left-side menu, edit the Columns field and set the value to 3. Note how a third column now appears in the table.
3. In the left-side menu, scroll to the bottom and activate the Pre-fill table based on a list of data option.
4. In the Source list field, select "Organisation basic info lookup.addresses".

You have now configured your flow to prefill the table in the form step with data from the lookup.

Map objects to columns

To assign each data point to a specific column, do the following:

1. In the Form step configuration, select Column 1 to open the Column settings menu in the left-hand side.
2. In the Column settings menu, edit the value of the Label field to "Street".
3. In the Column settings menu, scroll down and activate the Pre-fill this column option.
4. In the Property field, select "street" to map the data point from the lookup to the column.
5. Repeat the steps 1-4 for Column 2 and map the following:
   • Set Label to "Postal code"
   • Set Property to "postalCode"
6. Repeat the steps 1-4 for Column 3 and map the following:
   • Set Label to "City"
   • Set Property to "city"

Explanation

Mint allows you to pass data obtained from an upstream step into a web form. Here you map the JSON fields in the objects of an array into the rows and columns of a table.

4. Publish and run your flow

When you publish a flow, Mint generates a public URL where you can run a web-rendered version of the flow - that is the user journey. You can share the flow URL with your end-users.

To publish and run your flow, do the following:

1. At the top-right side, select Save, then Publish. The flow URL is automatically copied to your clipboard. To copy the URL again, select the More Options icon (more_vert), then Copy workflow URL.
2. Paste the flow URL into a new browser window to start the user journey.
3. Select Get started.
4. Review the addresses in the table. The data retrieved from the lookup is displayed in the table in the web form. Then, select Submit to complete the user journey.

Here is how this would look like:

Previous

1/3 - Save and publish the flow.

Next

Success!

You have just built a flow to prefill data and completed the user journey.

Next steps

Continue your journey with Mint:

Use case: Mobile provider onboarding

Simulate a basic end-user onboarding use case

Steps

Learn about the building blocks of your flows