Basic controls

Basic controls are comparable to simple HTML inputs, such as checkboxes.

Input

An input field control, similar to an HTML input.

Below is a screenshot of the control. This is from a create step where an admin has added Clarke and Kent in two input controls. Email and Mobile number has no value yet.

Scenarions when the control can be used:

Like above when an admin creates a new object and needs to add data about the object. You can add data controllers to an inout control to verify correct syntax, an @ for email adress, no characters for an mobile number.
You like to display data about an object. You search an LDAP directory and display a user with data about the user. The input control can be in edit or read-only mode.

Properties

Properties for Input control

Name

Description

Default

Mandatory

type

Control implementation

N/A

id

Unique ID within the flow

N/A

data

Value to display from session or flow. {{{flow.attribute}}} {{{session.attribute}}}

N/A

config.required

Must have a value when leaving the step. true/false

false

config.readonly

Open to edit by enduser. true/false

false

config.type

Type of input value. Valid JSON types are: string, number, integer, boolean.

string

schema.format

Validation of input data. Valid checks: strict, email, phone, postal. See below for more info.

N/A

This is an example from a create step where values are to be added. Mail and mobile have checks for correct syntax.

{
    "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"
    }
}

This is an example from a create step where values are to be added from a session. In this scenario a user has logged in using Swedish BankID.

{
    "id": "givenName",
    "type": "Input",
    "ui": {
        "ui:size": {
            "md": 6
        }
    },
    "data": "{{{session.givenName}}}",
    "config": {
        "readonly": true
    }
}

This is an example from a step where values are to be added from a previous step or from a pipe in a previous step.

{
    "id": "<enter_unique_id_for_this_control>",
    "type": "Input",
    "data": "{{{flow.givenName}}}",
    "config": {
        "type": "string",
        "required": true
    }
}

Special notes for config.type and schema.format properties

The 'config.type' determines how the control is displayed in the view.

For the type 'string' the field can be validated before it is sent to the pipe or next step. The 'strict' validation is recommended as it blocks several common special characters not suitable for Pipe/Valve data handling. Postal is post address.

Markdown

Markdown is a lightweight markup language that you can use to add formatting elements to a step.

Add one or several labels and/or descriptions text elements to a step. Example below shows a markdowns example, one label and one description.

The example can be added as one markdown or two separate markdowns.

Configuration when one markdown

{
   "id": "top_text_label_description",
   "type": "Markdown",
   "data": "# Create an Active Directory user  \nEnter information about the user you want to create."
}

Configuration when one markdown

Note. When using several markdowns in one step, make sure the id is unique.

{
   "id": "top_text_label",
   "type": "Markdown",
   "data": "# Create an Active Directory user"
},
{
   "id": "top_text_description",
   "type": "Markdown",
   "data": "Enter information about the user you want to create."
}

Link to basic syntax supported using Markdown

Click following link for a number of examples on how to use markdown in a step. https://www.markdownguide.org/cheat-sheet/

Properties

Markdown is a lightweight markup language that you can use to add formatting elements to a step.

Configuration

Name

Description

Default

Mandatory

type

Control implementation, must be Markdown

N/A

Unique ID within the flow

N/A

data

Text to display

N/A

This from a step where two lines of text, one heading and one paragraph with a line break between, using one markdown control.

{
    "id": "<enter_unique_id_for_this_control>",
    "type": "Markdown",
    "data": "# Create an Active Directory user  \nEnter information about the user you want to create."
}

This an example where three different markdowns are used in the same step. Note that each markdown need a unique id.

{
    "id": "<enter_unique_id_for_this_control_1>",
    "type": "Markdown",
    "data": "# Create an Active Directory user."
},
{
    "id": "<enter_unique_id_for_this_control_2>",
    "type": "Markdown",
    "data": "Enter information about the user you want to create."
},
{
    "id": "<enter_unique_id_for_this_control_3>",
    "type": "Markdown",
    "data": "## How would you like to proceed?"
}

This an example with one markdown using lang-file to add data from a previous step. It combines string and variable data. For example. "You have selected Donald Duck." where Donald Duck is data from a previous step.

The top example is from a step. The below example is from a language file., en.json.

{
    "id": "top_text_label",
    "type": "Markdown",
    "data": {
        "key": "edit_ms_entra_id_user_step2",
        "variables": {
            "displayName": "{{{flow.displayName}}}"
        }
    }
}

"edit_ms_entra_id_user_step2": "You have selected {{displayName}}",

Link to basic syntax supported using Markdown

Click following link for a number of examples on how to use markdown in a step. https://www.markdownguide.org/cheat-sheet/

ValuePicker

A value picker component, that lets the user select a given value from a list.

The ValuePicker is often used as a drop-down list for admins to select predefined values from. See example below.

Properties

A value picker component, that lets the user select a given value from a list.

Name

Description

Default

Mandatory

type

Control implementation. Must be ValuePicker

N/A

id

Unique ID within the flow

N/A

config.required

Must have a value when leaving the step. true/false

false

config.readonly

Open to edit by enduser. true/false

false

config.default_value

This value is selected per default

config.options

Select options (array of JSON objects).

N/A

config.options.title

An option title

N/A

config.options.value

An option value

N/A

{
    "id": "<enter_unique_id_for_this_control>",
    "type": "ValuePicker",
    "config": {
        "required": true,
        "default_value": "{{ flow.preferred_auth }}"
        "options": [
          {
            "title": "Username/Password",
            "value": "uidpwd"
          },
          {
            "title": "BankID",
            "value": "bankid"
           }
      ]
    }
}

{
    "id": "<enter_unique_id_for_this_control>",
    "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"
            }
        ]
    }
}

Input

An input field control, similar to an HTML input.

Below is a screenshot of the control. This is from a create step where an admin has added Clarke and Kent in two input controls. Email and Mobile number has no value yet.

Scenarions when the control can be used:

Like above when an admin creates a new object and needs to add data about the object. You can add data controllers to an inout control to verify correct syntax, an @ for email adress, no characters for an mobile number.
You like to display data about an object. You search an LDAP directory and display a user with data about the user. The input control can be in edit or read-only mode.

Basic controls

Basic controls are comparable to simple HTML inputs, such as checkboxes.

Properties

A value picker component, that lets the user select a given value from a list.

Name

Description

Default

Mandatory

type

Control implementation. Must be ValuePicker

N/A

id

Unique ID within the flow

N/A

config.required

Must have a value when leaving the step. true/false

false

config.readonly

Open to edit by enduser. true/false

false

config.default_value

This value is selected per default

config.options

Select options (array of JSON objects).

N/A

config.options.title

An option title

N/A

config.options.value

An option value

N/A

{
    "id": "<enter_unique_id_for_this_control>",
    "type": "ValuePicker",
    "config": {
        "required": true,
        "default_value": "{{ flow.preferred_auth }}"
        "options": [
          {
            "title": "Username/Password",
            "value": "uidpwd"
          },
          {
            "title": "BankID",
            "value": "bankid"
           }
      ]
    }
}

{
    "id": "<enter_unique_id_for_this_control>",
    "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"
            }
        ]
    }
}

Properties

Markdown is a lightweight markup language that you can use to add formatting elements to a step.

Configuration

Name

Description

Default

Mandatory

type

Control implementation, must be Markdown

N/A

Unique ID within the flow

N/A

data

Text to display

N/A

This from a step where two lines of text, one heading and one paragraph with a line break between, using one markdown control.

{
    "id": "<enter_unique_id_for_this_control>",
    "type": "Markdown",
    "data": "# Create an Active Directory user  \nEnter information about the user you want to create."
}

This an example where three different markdowns are used in the same step. Note that each markdown need a unique id.

{
    "id": "<enter_unique_id_for_this_control_1>",
    "type": "Markdown",
    "data": "# Create an Active Directory user."
},
{
    "id": "<enter_unique_id_for_this_control_2>",
    "type": "Markdown",
    "data": "Enter information about the user you want to create."
},
{
    "id": "<enter_unique_id_for_this_control_3>",
    "type": "Markdown",
    "data": "## How would you like to proceed?"
}

The top example is from a step. The below example is from a language file., en.json.

{
    "id": "top_text_label",
    "type": "Markdown",
    "data": {
        "key": "edit_ms_entra_id_user_step2",
        "variables": {
            "displayName": "{{{flow.displayName}}}"
        }
    }
}

"edit_ms_entra_id_user_step2": "You have selected {{displayName}}",

Link to basic syntax supported using Markdown

Click following link for a number of examples on how to use markdown in a step. https://www.markdownguide.org/cheat-sheet/

Properties

Properties for Input control

Name

Description

Default

Mandatory

type

Control implementation

N/A

id

Unique ID within the flow

N/A

data

Value to display from session or flow. {{{flow.attribute}}} {{{session.attribute}}}

N/A

config.required

Must have a value when leaving the step. true/false

false

config.readonly

Open to edit by enduser. true/false

false

config.type

Type of input value. Valid JSON types are: string, number, integer, boolean.

string

schema.format

Validation of input data. Valid checks: strict, email, phone, postal. See below for more info.

N/A

This is an example from a create step where values are to be added. Mail and mobile have checks for correct syntax.

{
    "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"
    }
}

This is an example from a create step where values are to be added from a session. In this scenario a user has logged in using Swedish BankID.

{
    "id": "givenName",
    "type": "Input",
    "ui": {
        "ui:size": {
            "md": 6
        }
    },
    "data": "{{{session.givenName}}}",
    "config": {
        "readonly": true
    }
}

This is an example from a step where values are to be added from a previous step or from a pipe in a previous step.

{
    "id": "<enter_unique_id_for_this_control>",
    "type": "Input",
    "data": "{{{flow.givenName}}}",
    "config": {
        "type": "string",
        "required": true
    }
}

Special notes for config.type and schema.format properties

The 'config.type' determines how the control is displayed in the view.

ValuePicker

A value picker component, that lets the user select a given value from a list.

The ValuePicker is often used as a drop-down list for admins to select predefined values from. See example below.

Markdown

Markdown is a lightweight markup language that you can use to add formatting elements to a step.

Add one or several labels and/or descriptions text elements to a step. Example below shows a markdowns example, one label and one description.

The example can be added as one markdown or two separate markdowns.

Configuration when one markdown

{
   "id": "top_text_label_description",
   "type": "Markdown",
   "data": "# Create an Active Directory user  \nEnter information about the user you want to create."
}

Configuration when one markdown

Note. When using several markdowns in one step, make sure the id is unique.

{
   "id": "top_text_label",
   "type": "Markdown",
   "data": "# Create an Active Directory user"
},
{
   "id": "top_text_description",
   "type": "Markdown",
   "data": "Enter information about the user you want to create."
}

Link to basic syntax supported using Markdown

Click following link for a number of examples on how to use markdown in a step. https://www.markdownguide.org/cheat-sheet/