1 of 7

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

The configuration is divided in four blocks, config, ui, schema & data where each block has its own tab below.

See the Example tabs for a full examples.

Control type: Input

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.

Control type: Markdown

Configuration

Name

Description

Default

Mandatory

id

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.

Control type: ValuePicker

Name

Description

Default

Mandatory

required

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

false

readonly

Open to edit by enduser. true/false

false

default_value

This value is selected per default

options

Select options (array of JSON objects).

N/A

options.title

An option title

N/A

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.

Control type: Markdown

Configuration

Name

Description

Default

Mandatory

id

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

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

Control type: ValuePicker

Name

Description

Default

Mandatory

required

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

false

readonly

Open to edit by enduser. true/false

false

default_value

This value is selected per default

options

Select options (array of JSON objects).

N/A

options.title

An option title

N/A

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