Add and Configure Steps

Dividing forms in steps based on specific criteria (business, operational, or other relevant to you) is useful in complex scenarios where you have to display a lot of information on the entity forms and user journeys.

This sections walks you through the configurations that you need to follow to add steps and configure them.

1 Add a step

  1. On the configuration page of the form driven flow, click the Steps tab.
  2. In the Entity Form Steps section, click Insert. The step configuration page appears, displaying the general tab.
  3. Provide the following step information:
    • Name - The name of the step that will be used by the system. We recommend you use PascalCaseNames (upper camel). The Name starts with an uppercase letter, as do all additional words.
    • Display Name - The step name to be displayed in the user interface.
    • Step Type - Select either Default, Processor (see Custom Processor Steps), or Action (see Action Steps).
  4. Fill in any desired step properties:
    • Show "Next" button - Display or hide the button to navigate to the next step.
    • Show "Previous" button - Display or hide the button to navigate to the previous step.
    • "Next" button label - Override the default "Next" button label with a custom text.
    • "Previous" button label - Override the default "Previous" button label with a custom text.
    • Disable prompt for unsaved changes - When navigating away from the step, for instance by clicking the Back button, if the step contains unsaved data, the user will not be prompted to save the changes. Overrides the equivalent setting configured at the flow level.
    • Save automatically data on leave - When navigating away from the step, for instance by clicking the Back button, any unsaved data in the step will be automatically saved. Overrides the equivalent setting configured at the flow level.
  5. Click Save and reload. The step configuration page appears, containing more tabs, displayed by default on the General tab. You can configure the step, by clicking the tabs and making the desired settings.

2 Design the step layout

Click the UI tab . Use the UI Designer to configure the step's user interface.

For steps created in FintechOS Platform versions prior to v.24, the UI tab displays the legacy template designer which, in addition to the UI designer, provides an HTML editor that allows you to configure the step's HTML elements.

Legacy steps also allow you to use the Advanced Code Editor (deprecated) or the Code Editor respectively to edit their HTML code directly.

The step's UI template supports the following tokens:

Token Description
{AttributeName} Displays the corresponding field in the UI.
NOTE  
The attribute name must be included between curly brackets; otherwise, a simple text will be displayed on the page instead of the actual field.
{#RelationshipName, view: viewName#} Generates a view provided by relationship and by view.
The viewName is optional and specifies which view to generate. If viewName is not provided, the default view will be displayed on the data form.
{#RelationshipName, view: viewName, editmode:cell#} Generates a view provided by relationship and by view. This view allows inline editing, meaning that you can edit cells one by one directly in the grid, without opening specific records.
NOTE  
In order to activate inline editing for a specific cell, you must tick the Allow Editing checkbox displayed on the entity view column (View > View columns).
{#MKT_CampaignResponse_MKT_Campaign,nodelete,noinsert#} Generates a view provided by relationship and by view, but the Delete and Insert buttons are not displayed on the view.
You can apply the same logic (similar tokens) for the Export (noexport) or Refresh (norefresh) if you no longer need them on the view.
{$ChartName$} Generates a chart based on the provided chart name.
{? entityName, view: viewName ?} Allows you to display a view from another entity. For information on how to use it, see Display View from Another Entity.

In the HTML template, you can link HTML elements (labels) to attributes. For information on how to do it, see Link Labels to Attributes (deprecated).

3 Set advanced flow control rules

Use the Flow Control tab if, on leaving the step, you wish to automatically:

  • Override the default navigation sequence
  • Apply Form Actions.
  • Apply conditional navigation rules.

4 Provide the code to be executed after the step is generated (optional)

For advanced scenarios that require elaborate customizations, the Advanced tab allows you to attach client-side or server-side JavaScript code to your step. For details on the execution sequence of the various form-level and step-level scripts, see Code Execution Sequence.

NOTE  
Variables and functions declared in other steps or in the form driven flow's Advanced section are not visible in the current step. To access such variables and functions, use the formData.formScope object.

5 Define who has access to the step

If your business case requires that specific steps are available to designated Security Roles, click the Security Roles tab and add the security roles who should have access to them. If no security roles are added here, all flow users will be able to view the step.

6 Actions

You can set specific Form Actions to trigger automatically when entering or saving a step, if specific conditions are met.

There are two grids displayed: On Step Enter and On Step Save.

Depending on when you wish to trigger the actions (either on entering or saving the step), in the corresponding grid:

  1. Click Insert to add a new action.
  2. Fill in the following:

    3. Field

    Description
    Name Insert a name for the action.
    Action type This is automatically filled based on the grid you are populating (On Step Enter or On Step Save).
    Condition expression Insert the condition(s) that must be met to trigger the action. For details, see Apply Conditional Navigation Rules for how to define a rule expression.
    Form Action Select the form actions(s) you wish to trigger from the configured Form Actions.
    Execute Always By default, the action is executed only when the condition expression is met.
    Check the Execute Always option to ignore the condition expression and always trigger the action.
  3. Click Save and Close.