1 of 2

Step

Steps are comparable to pages in a form, where each step includes sections that focus on a specific area. By linking steps, one can create highly customizable IAM solutions.

Creating a step

A step is represented by a json object. Steps can be loaded from one json file or multiple files. Recommended setup is to keep each step in a single file. This will simplify configuration and overview.

Name

Description

Default

Mandatory

Text shown in browser tab. Overrides overlay.

Forms - Fortified ID

Sort order of step. Omitting will result in undetermined execute order.

N/A

Favicon for this step.

Internal FortifiedID icon

Same as Flow but can override in a step

Empty array[]

List if controls for this step

N/A

Pipe to be executed moving to next step.

N/A

Same as for flow but can override in a step.

See Flow

Example step to create a user.

{
    "controls": [
        {
            "id": "top_text_label",
            "type": "Markdown",
            "data": "# Create an Active Directory user \nEnter information about the user you want to create."
        },
        {
            "id": "givenName",
            "type": "Input",
            "ui": {
                "ui:size": {
                    "md": 6
                }
            },
            "schema": {
                "format": "strict"
            },
            "config": {
                "type": "string",
                "required": true
            }
        },
        {
            "id": "sn",
            "type": "Input",
            "ui": {
                "ui:size": {
                    "md": 6
                }
            },
            "schema": {
                "format": "strict"
            },
            "config": {
                "type": "string",
                "required": true
            }
        },
        {
            "id": "mail",
            "type": "Input",
            "ui": {
                "ui:size": {
                    "md": 6
                }
            },
            "schema": {
                "format": "email"
            },
            "config": {
                "type": "string",
                "required": true
            }
        },
        {
            "id": "mobile",
            "type": "Input",
            "ui": {
                "ui:size": {
                    "md": 6
                }
            },
            "schema": {
                "format": "phone"
            },
            "config": {
                "type": "string"
            }
        },
        {
            "id": "chooseRole",
            "type": "ValuePicker",
            "ui": {
                "ui:size": {
                    "md": 6
                }
            },
            "config": {
                "required": false,
                "options": [
                    {
                        "title": "Human Resources",
                        "value": "hr"
                    },
                    {
                        "title": "Sale",
                        "value": "sale"
                    },
                    {
                        "title": "IT",
                        "value": "it"
                    },
                    {
                        "title": "Engineering",
                        "value": "engineering"
                    }
                ]
            }
        },
        {
            "id": "adUserFindManager",
            "type": "ActiveDirectorySingleSelect",
            "ui": {
                "ui:size": {
                    "md": 6
                }
            },
            "config": {
                "attributes": [
                    "cn"
                ],
                "namespace": "${globals.ldap1_name}",
                "base_dn": "${globals.ldap1_flows_search_user_dn}",
                "scope": "SUB",
                "pre_filter": "(distinguishedName={{flow.manager}})",
                "filter": "(cn={{search_query}})",
                "value_key": "distinguishedName",
                "display_key": "cn"
            }
        }
    ]
}

Example step to edit and find users.

{
    "controls": [
        {
            "id": "top_text_label",
            "type": "Markdown",
            "data": "# Change user\nSelect the user you want to modify"
        },
        {
            "id": "findActiveDirectoryUser",
            "type": "Selector",
            "config": {
                "columns": ["displayName","sAMAccountName","url","manager"],
                "pipe_id": "active_directory_edit_user_step01_widget"
            }
        }
    ],
    "pipe": "active_directory_edit_user_step01"
}

Example with all main properties.

{
    "document_title": "flow00.step01.document_title",
    "favicon": "favicon.ico",
    "order": 1,
    "verbose_logs": [
        "flow",
        "session"
    ],
    "time_lock": "PT3S",
    "controls": [],
    "pipe": "forms.flow00.step01",
    "buttons": {
        "next_button": {
            "enabled": true,
            "text": "flow00.step01.next_button"
        },
        "save_button": {
            "enabled": true,
            "text": "flow00.step01.create_button"
        },
        "restart_button": {
            "enabled": true,
            "text": "flow00.step01.restart_button"
        }
    }
}

Pipe execution

If configured, execution of a pipe is done with all data available to the step. This means data will vary depending on what step is executed.

Data from all previous executed steps will be sent to pipe and accessed in pipes using {{request. pattern.

Returning from pipe execution

In order to be able to access any data returned from a pipe, return a single item in a pipe.

Data will available using {{flow.xxx}} pattern.

Layout

Forms comes with ha default layout. It places controls from left to right.

All steps and summary pages use a layout grid with a base column width of 12. All controls, or children, can be specified to have different sizes and multiple breakpoints for different screen sizes.

All controls (or children of the grid) have a base width of 12, meaning that they fill the entire width of the grid. A child with the width of 6 will occupies half of the grid, a child with the width of 8 will occupy 2/3s of the grid.

The grid will fill its columns from left to right and fit up to 12 columns in each "row".

Sizes for the controls can be set in the ui [SKRIV HÄR, måste kanske ändra en grej i hur man konfar kommer jag på nu.]

All controls will be rendered into the layout according to the order that they are defined.

Each breakpoint (a key) matches with a fixed screen width (a value):

xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px

Advanced layouts

For more advanced layout options you can also configure a "ui:grid" property on the ui for the step.

Using the "ui:grid" all other rendering will be bypassed, and only items found in the "ui:grid" will be rendered.

With "ui:grid" it is also possible to nest grids.