Configure a user input field

A user input field is defined by a json configuration record (sometimes referred to as the fieldConfig).

The syntax to define a user input is (loosely) based on the custom field description.

Types

The most important parameter defining the behaviour of the field is the type.

Type Description Example value

STRING

plain single line input field

string

"my value"

TEXT

plain multi line input field

text

"This is some longer text which can also contain newlines"

DATE

datetime picker. The parameter value which is sent to the service will be in simplified extended ISO format. Note that the value picked by the user in converted from the local timezone to UTC.

date

"2019-04-01T00:00:00.000Z"

INTEGER

a numeric input

integer

17

BOOLEAN

a checkbox input. The parameter value which is sent to the service will be a JSON boolean (true or false). See example 3 below for more advanced usage.

boolean

true or false

COLOR

a color picker will be shown, a hex string color code will be sent as parameter.

color

It is possible to provide a list of color suggestions by also setting selectOptions.

"#ff0000"

SELECT

a select dropdown box will be shown. Similar to a STRING with autocompleteValues option, but SELECT allows separating value and labels of the options. A selectOptions option should be passed to the userInputField object, which is an array of objects with a label and value property.

select

"the_value"

SELECTBUTTON

similar to SELECT, but uses a button and menu to render, instead of an actual <select> element.

"the_value"

RADIOLIST

a list of options, only one can be selected. Expects a selectOptions property as with SELECT type.

radiolist

See also the section on RADIOLIST variations below, for more advanced styling.

radiolist

"the_value"

FILE_RESOURCE

a file selector. Can only be used in certain cases. When used in an action that starts a workflow, the file is uploaded as a FileResource just before starting the workflow. The parameter will be filled in with an object containing the id of the FileResource, the filename and the size of the file that has been uploaded.

Should only be used on very small files.

file_resource

EMAIL

input for email addresses

email

"test@test.com", "john@doe.com" or ["test@test.com", "john@doe.com"]

FRAME

a timecode input, the output will be a frame number in the media. See the timecode configuration option below for more info.

frame

200

TIMECODE

a timecode input, the output will be an object with a frames and rate property. See the timecode configuration option below for more info.

frame

{ "frames": 200, rate: { "numerator": 25, "denumerator": 1, "drop_frame": false } }

JSON

A textual input in which you can type json. The value of the field becomes the json (so, not stringified) object

COMPOUND

Combines multiple other fields. See the Compound section below.

 
{
  "name": {
    "type": "STRING",
    "value": "Johny 5"
  },
  "role": {
    "type": "SELECT",
    "value": "director"
  }
}

Compound fields

Compound fields combine other fields to obtain a compound value. This is useful to model records of related properties, like e.g. the name and role of a person.

The compoundDefinition.fields contains the definition of the parts making up the compound field.

{
    "name": "person",
    "type": "COMPOUND",
    "label": "Person",
    "parameterName": "workflowParameters.person",
    "compoundDefinition": {
      "fields": {
        "name": {
          "type": "STRING",
          "label": "Your name",
          "placeholder": "name"
        },
        "roles": {
          "type": "SELECT",
          "label": "Role",
          "multiValued": true,
          "placeholder": "a role",
          "defaultValue": "actor",
          "selectOptions": [
            {
              "label": "Director",
              "value": "director"
            },
            {
              "label": "Actor",
              "value": "actor"
            }
          ]
        }
      }
    }
}

The extraOptions.compound object allows tweaking some of the behaviour further:

Property Description Example

shortStyleValue

Use a shorter syntax to represent the value. See below section on Short Style Value.

false

extraContainerClasses

These classes will be applied on the element representing the compound field (including the + button and the list)

["deeppink"]

extraListClasses

These classes will be applied on the element representing the list of values for the field

["orange"]

extraEntryClasses

These classes will be applied on the element representing a single entry in the compound field

["aqua"]

layoutConfig

It is possible to pass in a layout configuration (see page on Layout Config) to the compound field.

Internally, when no layoutConfig is passed in, the following layoutConfig is used by default

{
    type: 'other-fields',
    extraListClasses: ['flow-flex-col', ...extraListClasses],
    extraEntryClasses: extraEntryClasses
}

Note that the extraListClasses and extraEntryClasses properties will be ignored if you pass in your own layoutConfig.

 
{
  "type": "basic",
  "elements": [
    {
      "name": "duration",
      "type": "field"
    },
    {
        "type": "other-fields"
    }
  ]
}

Compound defaultValue

It is possible to set a defaultValue on each part via compoundDefinition.fields[i].defaultValue.

As an alternative, it is also possible to set a defaultValue on a compound field, giving the values for the entire record:

{
    "name": "person",
    "type": "COMPOUND",
    "label": "Person",
    "defaultValue": {
      "name": {
        "value": "Johny 5"
      },
      "roles": {
        "value": ["director"]
      }
    },
    "compoundDefinition": {
      // ... as before
    }
}

Short-style value

The default format used to represent the value is a bit verbose:

// With extraOptions.compound.shortStyleValue unset or false
{
  "name": {
    "value": "Johny 5",
    "valueId": "bla" // if it would be a thesaurus field
  },
  "roles": {
    "value": ["director"],
    "valueIds": ["bla"] // if it would be a thesaurus field
  }
}

Set extraOptions.compound.shortStyleValue to true for a more compact value. If you use defaultValue, ensure it is also given in short style.

The shortStyleValue has no support for valueId (used in thesauri). It is also not compatible with certain API features. 
// With extraOptions.compound.shortStyleValue = true
{
    "name": "Johny 5",
    "role": "director"
}

Configuration properties

Property Description Example

name

used as an id in the client. Should only contain characters matching [a-zA-Z0-9\-_].

"myField"

label

Used as label in the client

"My Field"

parameterName

the (dot-separated) path to the actual parameter to set when starting the external service. This only has a meaning when used in the context of an action (eoAction, productionAction, clipAction)

"theParameter"

type

see section Types above

"STRING"

autocompleteValues

(previously whiteList which still works) - A list of autocomplete values, with the same structure as selectOptions. Can be omitted.

The label will be shown in the UI, the value will become the value of the input field.

 
[
    {
        "value": "#FF0000",
        "label": "red"
    },
    {
        "value": "#00FF00",
        "label": "green"
    },
    {
        "value": "#0000FF",
        "label": "blue"
    }
]

An Array of simple strings is also supported:

[
    "red",
    "green",
    "blue"
]

skipWhiteListValidation

Set false to only allow picking values from the autocompleteValues. Defaults to true.

true

defaultValue

This value is filled in by default

"the default value"

isRequired

Set to true if the field can’t be left blank. Defaults to false.

false

readOnly

The field will not be editable if true

false

hidden

The field will not be shown if true

false

thesaurus

Only for STRING, and on productions for which a thesaurus is set up. E.g. FLOW:3 for the thesaurus with id 3. Additionally, useValueId can be set to true to use the thesaurus entry id instead of the label as the parameter value.

extraInputAttributes

An object used to contain extra attributes added to the input field.

{"step": 5}

{ autocomplete: "on" }

extraOptions

Special options passed to certain types

{"dinner":"pasta"}

multiValued

Defaults to false. Can be set to true for types that support it (EMAIL / STRING), to make the outputted value an array.

false

selectOptions

An array of options, defining the possible values. Can be used when type is one of

  • SELECT

  • RADIOLIST

  • COLOR

 
[
    {
        "value": "#FF0000",
        "label": "red"
    },
    {
        "value": "#00FF00",
        "label": "green"
    },
    {
        "value": "#0000FF",
        "label": "blue"
    }
]

parentFieldName

The name of a field serving as the parent of this field. The value of the parent field can influence the value or possible values of this field. See the section on parentFieldName below.

selectbutton

The SELECTBUTTON input uses this object for styling the input.

 
{
  "buttonClass": "fb-t-default fb-a-primary fb--size-large",
  "menuClass": ""
}

timecode

The FRAME and TIMECODE inputs require knowledge of the frame rate. In some contexts, this is filled in automatically by the UI code, but in general, you will have to pass the frame rate to the input. This is done using the timecode.frameRate field.

It is also possible to offset the visualized timecode by setting timecode.offsetFrames to something different than 0. With a framerate of 25fps, an offsetFrames of 50 would result in the input value "00:00:02:00" to be converted to frame 0 (and not 50).

 
{
  "frameRate": {
    "numerator": 25,
    "denumerator": 1
  },
  "offsetFrames": 0
}

selectOptions

The SELECT type will show a select html input element. The options are passed via the selectOptions array:

{
    "name": "favouriteColor",
    "type": "STRING",
    "selectOptions": [
        { "value": "#FF0000", "label": "red" },
        { "value": "#00FF00", "label": "green"},
        { "value": "#0000FF", "label": "blue"}
    ]
}

For the SELECTBUTTON type, besides value and label, beforeIcon, afterIcon and buttonClass are also supported as properties of a single select option.

autocompleteValues and selectOptions

The STRING type can show a list of suggestions, by setting the autocompleteValues option. The format is similar to the format of selectOptions of the SELECT and RADIOLIST type.

{
    "name": "favouriteColor",
    "type": "STRING",
    "autocompleteValues": [
        { "value": "#FF0000", "label": "red" },
        { "value": "#00FF00", "label": "green"},
        { "value": "#0000FF", "label": "blue"}
    ]
}

When value and label of the autocompleteValues are always equal, it is also possible to use an Array of Strings:

{
    "name": "favouriteColor",
    "type": "STRING",
    "autocompleteValues": ["red", "green", "blue"]
}

By default, when autocompleteValues is set, a value which is not in the list can not be chosen. If you want to allow entering new values, which are not in the autocompleteValues list, set skipWhiteListValidation to false.

parentFieldName

The name of a field serving as the parent of this field.

Behaviour for SELECT

Say we have a country parent field:

{
    "name": "country",
    "type": "SELECT",
    "selectOptions": [
        { "value": "BE", "label": "Belgium" },
        { "value": "US", "label": "United States" }
    ]
}

Now let’s define a state field which will only show the states in the chosen country. The child field selectOptions should contain an extra property parentValue:

{
    "name": "state",
    "type": "SELECT",
    "parentFieldValue": "country",
    "selectOptions": [
        { "value": "BE-VOV", "label": "Oost-Vlaanderen", "parentValue": "BE" },
        { "value": "BE-VAN", "label": "Antwerpen", "parentValue": "BE" },
        { "value": "US-CA", "label": "California", "parentValue": "US" },
        { "value": "US-AZ", "label": "Arizona", "parentValue": "US" }
    ]
}

The select will only show the selectOptions for which the option has parentValue equal to the current value of the parent field. If the parent field has no value, the field will show no options at all.

Behaviour for input with autocompleteValues

The behaviour is similar to that of SELECT. The child field will only show autocompleteValues which have a parentValue equal to the current value of the parent field. If the parent field has no value, the field will show no autocomplete.

Behaviour for thesaurus fields

A filter based on the value of the parent field will be added to the call which fetches the thesaurus entry autocomplete values. This assumes the thesauri are linked via a linkedThesaurusEntryId relation corresponding to the parent - child field relations.

extraOptions

The extraOptions is used to modify a field in various ways. The options do not necessarily work on all types, and are not guaranteed to work in all places.

extra classes

An array of strings indicating css classes that should be added to the input.

Property Description Example

extraClasses

Array of classes that are added to the element containing the input

["pink-background"]

 
{
    "name": "example",
    "type": "STRING",
    "extraOptions": {
        "extraClasses": ["my-nice-class", "use-with-moderation"]
    }
}

Note that multiValued and COMPOUND fields have even more classes properties which can be customized. They are documented in their own sections on this page.

showFieldLabel

showFieldLabel is up for deprecation. A new layout mechanism will be introduced which gives more control.

Set extraOptions.showFieldLabel to true to render the label of the field as well.

{
    "name": "example",
    "type": "STRING",
    "extraOptions": {
        "showFieldLabel": true
    }
}

There is some default layout rendering it as a horizontal form. Use the following properties of extraOptions to customize this further.

Property Description Example

showFieldLabel

Render not only the field itsself, but also a label.

true

extraWrapperClasses

Only when rendered with label. These classes will be applied on the element containing the label and the value

["pink-background"]

extraLabelClasses

Only when rendered with label. The default class applied on the label is col-xs-5. This property allows overwriting that.

["pink-background"]

extraValueClasses

Only when rendered with label. The default class applied on the value is col-xs-7. This property allows overwriting that.

["pink-background"]

removeDefaultFormClasses

Only when rendered with label. Removes some of the default classes we add, which might make it easier in some cases to get the desired layout.

true

labelAfterInput

Show the label after the input, instead of before it.

true

Email options

Setting the EMAIL type’s multiValued parameter to true will not result in the default multiValued look. Instead, the field looks the same as a single-valued variant which now allows entering multiple email addresses.

Email with multiple values 
{
    "name": "mail",
    "type": "EMAIL",
    "label": "The mail",
    "multiValued": true,
    "parameterName": "workflowParameters.user_mail"
}
If you do prefer the default multiValued look, set extraOptions.multiValued.force to true

The value of the user input field will become an array of strings. For the example shown in the image, the value will be ["john.doe@acme.org", "test@example.com"]

If you prefer the value to be a comma-separated string, we’ve got you covered as well. Simply set extraOptions.asCommaSeparatedString to true. Then, the value for the example shown in the image would be "john.doe@acme.org,test@example.com".

{
    "name": "commamail",
    "type": "EMAIL",
    "multiValued": true,
    "extraOptions": {
        "asCommaSeparatedString": true
    },
    "parameterName": "workflowParameters.user_mail"
}

boolean as icon

Instead of a checkbox, you can show an icon which is grayed out when 'unchecked' and darker when 'checked'.

Boolean as icon 
{
    "name": "takeCoffee",
    "type": "BOOLEAN",
    "label": "Take coffee?",
    "extraOptions": {
      "asIcon": true,
      "iconClass": "icon-coffee"
    }
}

Variations of RADIOLIST

Custom radio icons

It’s possible to use custom icons instead of the radio buttons by providing an iconClass on each selectOption and by setting the extraOptions.toggleListClass as shown below.

Radiolist with custom icons 
{
    "name": "example",
    "type": "RADIOLIST",
    "label": "radio list",
    "extraOptions": {
        "toggleListClass": "toggle-list-custom-icons"
    },
    "selectOptions": [
      {
        "label": "First Option",
        "value": "one",
        "iconClass": "icon-star"
      },
      {
        "label": "Second Option",
        "value": "two",
        "iconClass": "icon-magic"
      }
    ]
}
Only the icons

If you prefer to only have the icons, without any text, set extraOptions.hideLabels to true. To put all the icons on one line, set toggleListClass as shown below.

Radiolist with custom icons 
{
    "name": "example",
    "type": "RADIOLIST",
    "label": "radio list",
    "extraOptions": {
        "toggleListClass": "toggle-list-custom-icons inline-block-variant",
        "hideLabels": true
    },
    "selectOptions": [
      {
        "label": "First Option",
        "value": "one",
        "iconClass": "icon-star"
      },
      {
        "label": "Second Option",
        "value": "two",
        "iconClass": "icon-magic"
      }
    ]
}
Buttons

The example in the previous section (only icons) can be adjusted to show buttons instead, by adding extraOptions.buttonClass:

{
    "extraOptions": {
        "buttonClass": "lightgrey-variant version-34px",
        ...
    },
    ...
}
button radiolist

Or with an additional gap-10px toggleListClass:

{
    "extraOptions": {
        "toggleListClass": "inline-block-variant gap-10px",
        "buttonClass": "lightgrey-variant version-34px",
        ...
    },
    ...
}
button radiolist
position picker

A very specific input, showing a list of positions to pick from.

Position picker 
{
    "name": "positionCombined",
    "label": "Position",
    "type": "RADIOLIST",
    "selectOptions": [
      {
        "value": "TOP;LEFT",
        "label": "Top Left"
      },
      {
        "value": "TOP;RIGHT",
        "label": "Top Right"
      },
      {
        "value": "MIDDLE;LEFT",
        "label": "Middle Left"
      },
      {
        "value": "MIDDLE;RIGHT",
        "label": "Middle Right"
      },
      {
        "value": "BOTTOM;LEFT",
        "label": "Bottom Left"
      },
      {
        "value": "BOTTOM;RIGHT",
        "label": "Bottom Right"
      }
    ],
    "extraOptions": {
      "toggleListClass": "position-picker", // a gray square is shown per position, which toggles to green when selected
      "hideLabels": true
    },
    "extraInputAttributes": {
      "style": "width:2em" // default is width 3 em for 3 icons per row
    }
}

prefix

The prefix is shown before the input. It should be very short (e.g. the abbreviation of a unit). The optional prefixDescription is shown as a title tooltip.

{
    "name": "example",
    "type": "INTEGER",
    "extraOptions": {
        "prefix": "s",
        "prefixDescription": "seconds"
    }
}
prefix
prefixIcon

The prefixIcon option can be used when you want to use an icon as a prefix instead. Note that you can pass multiple classes via the prefixIcon field

{
    "name": "example",
    "type": "INTEGER",
    "extraOptions": {
        "prefixIcon": "falk-light falk-user"
    }
}

suffix

The suffix is shown inside the input, on the right. It should be short (e.g. a unit abbreviation, or a single word). The suffixDescription is shown as a title tooltip. The extraClasses should also be set to reserve space for the suffix. It should be an array with one of the following classes in it:

  • "suffix-large"

  • "suffix-small"

  • "suffix-xs"

{
    "name": "example",
    "type": "INTEGER",
    "extraOptions": {
        "suffix": "seconds",
        "suffixDescription": "Duration in seconds",
        "extraClasses": [
            "suffix-large"
        ]
    }
}
suffix

multiValued

Most fields can be used in multiValued mode.

To allow multiple values for the field, simply set the multiValued configuration option to true.

For some field types, this is treated in a special way. E.g. multiValued STRING is shown as a TAGS field, and EMAIL is a special input where multiple email addresses can be entered.

Other field types will use a more generic approach where the input can be added again using a + button. It is also possible to force this behaviour for STRING and EMAIL by setting extraOptions.multiValued.force to true.

As a general rule, the field config options will apply to the input of a single value. The exception to this rule is defaultValue, isRequired, parameterName and extraOptions.multiValued.

The extraOptions.multiValued object allows tweaking some of the behaviour further.

{
    "name": "emails",
    "type": "EMAIL",
    "label": "Emails",
    "isRequired": true,
    "multiValued": true,
    "defaultValue": [
        "john.doe@acme.corp",
        "john.snow@acme.corp"
    ],
    "extraOptions": {
      "prefix": "@",
      "multiValued": {
        "force": true,
        "extraContainerClasses": ["deeppink"],
        "extraListClasses": ["orange"],
        "extraEntryClasses": ["aqua"],
        "entryDefaultValue": "new@new.new",
        "minCount": 2,
        "maxCount": 5
      }
    },
    "parameterName": "workflowParameters.emails"
}
Multivalued example
Property Description Example

force

Force 'generic' multivalued behaviour, e.g. for STRING and EMAIL

true

extraContainerClasses

These classes will be applied on the element representing the multivalued field (including the + button and the list)

["deeppink"]

extraListClasses

These classes will be applied on the element representing the list of values for the field

["orange"]

extraEntryClasses

These classes will be applied on the element representing a single entry in the multivalued field

["aqua"]

entryDefaultValue

This value is used as the default value of a new entry.

"user@company.com"

minCount

The minimum amount of entries. The remove button will not be shown if current amount of entries is not greater than this amount. The default is 1. Set to 0 if you want to allow completely clearing the field.

3

maxCount

The maximum amount of entries. The plus button will not be shown if current amount of entries is greater or equal to this amount.

5
defaultValue of multiValued

The defaultValue of a multiValued field should be an array of the values you want to populate the field with initially. If it is not an array, the value will be interpreted as a fallback for extraOptions.multiValued.entryDefaultValue.

maxLength

When using extraInputAttributes.maxlength, it will set the maxlength html attribute of the input. The default behaviour will limit the amount of characters one can input into the field. When pasting more, it will only keep the first part of the pasted text.

This can sometimes be confusing. Therefore, we offer an alternative extraOptions.maxLength. This will show a small character counter below the field which will become orange when there is a problem. More text than the maxLength can be entered, but it won’t pass validation.

Examples

Example 1

To obtain a dialog looking like this:

Example1

an action config (see eoActions, clipActions, productionActions) like the one below can be used.

{
  "icon": "icon-magic",
  "label": "Do something",
  "params": {
    "service": "somethingService",
    "infoMessage": "this is a service that does something",
    "userInputFields": [
      {
        "name": "origin",
        "type": "STRING",
        "hidden": true,
        "defaultValue": "myCoolWorkflow",
        "parameterName": "workflowParameters.origin"
      },
      {
        "name": "name",
        "type": "STRING",
        "label": "The Name",
        "readOnly": true,
        "isRequired": true,
        "defaultValue": "barbapapa",
        "parameterName": "workflowParameters.user_name",
        "extraInputAttributes": {
            "autocomplete": "on"
        }
      },
      {
        "name": "due",
        "type": "DATE",
        "parameterName": "workflowParameters.the_due_date"
      },
      {
        "name": "hobby",
        "type": "SELECT",
        "parameterName": "workflowParameters.hobby",
        "selectOptions": [
          {
            "label": "unicorns",
            "value": "UNIC"
          },
          {
            "label": "rainbows",
            "value": "RAIN"
          }
        ]
      },
      {
        "name": "category",
        "type": "STRING",
        "autocompleteValues": [
          "movies",
          "series",
          "commercials"
        ],
        "parameterName": "workflowParameters.the_category",
        "skipWhiteListValidation": false
      },
      {
        "name": "number",
        "type": "INTEGER",
        "label": "The number",
        "parameterName": "workflowParameters.number",
        "extraInputAttributes": {
          "min": "50",
          "max": "250",
          "step": "25"
        }
      }
    ],
    "serviceArguments": {
      "path": "interplay://Some/Project",
      "forceRedo": true
    },
    "showProgressOnComplete": true
  },
  "filters": [
    {
      "key": "objectType",
      "values": [
        "Notebook",
        "Draft"
      ]
    }
  ],
  "clientCommand": "GenericEditorialObjectServiceWithDialog",
  "requiredRights": "PRODUCTION_VIEW"
}

Say we configure this as an eoAction, and click Start. This will result in an "HTTP POST" to e.g. /api/production/9999/eo/8888/service/somethingService.

The form body will contain the data filled in by the user in the dialog, and might look like this:

{
  "path": "interplay://Some/Project",
  "forceRedo": true,
  "workflowParameters": {
    "origin": "myCoolWorkflow",
    "user_name": "barbapapa",
    "the_due_date": "2020-10-05T22:00:00.000Z",
    "hobby": "UNIC",
    "the_category": "movies"
  }
}

Example 2

This example uses the FILE_RESOURCE type.

Example2

The action config looks like this:

{
  "icon": "icon-cloud-upload",
  "label": "AAF Checkout",
  "params": {
    "service": "AAF_CHECK_OUT",
    "infoMessage": "Select an aaf file you would like to check out",
    "userInputFields": [
      {
        "name": "aafFile",
        "type": "FILE_RESOURCE",
        "label": "AAF File",
        "parameterName": "workflowParameters.aaf_file"
      },
      {
        "name": "note",
        "type": "STRING",
        "label": "Note",
        "defaultValue": ""
      }
    ]
  },
  "filters": [],
  "clientCommand": "ProductionServiceDialog",
  "requiredRights": "PRODUCTION_VIEW"
}

The user can select a (small) file. It will be uploaded to Flow as a FileResource just before starting the workflow. The parameter will be filled in with an object containing the id of the FileResource, the filename and the size of the file that has been uploaded.

Say this is used as a productionAction. Clicking Start will result in an HTTP POST to /api/production/9999/service/AAF_CHECK_OUT with body.

{
  "note": "my note",
  "workflowParameters": {
    "aaf_file": {
      "id": 2097,
      "filename": "98-15403_640.jpg",
      "size": 77340
    }
  }
}

It’s up to the workflow to implement the logic to download the FileResource from Flow and do something with it.

Example 3

Advanced usage of RADIOLIST and BOOLEAN.

Example3

The action config looks like this:

{
  "icon": "icon-star",
  "label": "My Cool Service",
  "params": {
    "service": "MY_COOL_SERVICE",
    "infoMessage": "Please fill in the form below",
    "userInputFields": [
      {
        "name": "radiolist",
        "type": "RADIOLIST",
        "label": "radio list",
        "extraOptions": {
          "toggleListClass": "toggle-list-custom-icons"
        },
        "selectOptions": [
          {
            "label": "First Option",
            "value": "one",
            "iconClass": "icon-star"
          },
          {
            "label": "Second Option",
            "value": "two",
            "iconClass": "icon-magic"
          }
        ],
        "extraInputAttributes": {
          "style": "display:inline-block"
        }
      },
      {
        "name": "radiolist2",
        "type": "RADIOLIST",
        "label": "pick an icon",
        "extraOptions": {
          "toggleListClass": "toggle-list-custom-icons",
          "hideLabels": true
        },
        "selectOptions": [
          {
            "label": "First Option",
            "value": "one",
            "iconClass": "icon-star"
          },
          {
            "label": "Second Option",
            "value": "two",
            "iconClass": "icon-magic"
          }
        ]
      },
      {
        "name": "positionCombined",
        "label": "Position",
        "type": "RADIOLIST",
        "selectOptions": [
          {
            "value": "TOP;LEFT",
            "label": "Top Left"
          },
          {
            "value": "TOP;RIGHT",
            "label": "Top Right"
          },
          {
            "value": "MIDDLE;LEFT",
            "label": "Middle Left"
          },
          {
            "value": "MIDDLE;RIGHT",
            "label": "Middle Right"
          },
          {
            "value": "BOTTOM;LEFT",
            "label": "Bottom Left"
          },
          {
            "value": "BOTTOM;RIGHT",
            "label": "Bottom Right"
          }
        ],
        "extraOptions": {
          "toggleListClass": "position-picker", // a gray square is shown per position, which toggles to green when selected
          "hideLabels": true
        },
        "extraInputAttributes": {
          "style": "width:2em" // default is width 3 em for 3 icons per row
        }
      },
      {
        "name": "plain",
        "type": "BOOLEAN",
        "label": "plain"
      },
      {
        "name": "asicon",
        "type": "BOOLEAN",
        "label": "as icon",
        "extraOptions": {
          "asIcon": true
        }
      },
      {
        "name": "locked",
        "type": "BOOLEAN",
        "label": "is locked",
        "extraOptions": {
          "asIcon": true,
          "iconClass": "icon-coffee"
        }
      },
      {
        "name": "mail",
        "type": "EMAIL",
        "label": "The mail",
        "isRequired": true,
        "multiValued": false,
        "extraOptions": {},
        "parameterName": "workflowParameters.user_mail"
      },
      {
        "name": "commamail",
        "type": "EMAIL",
        "label": "The comma separated mail",
        "isRequired": true,
        "multiValued": false,
        "extraOptions": {
            "asCommaSeparatedString": true
        },
        "parameterName": "workflowParameters.user_mail"
      }
    ]
  },
  "filters": [],
  "clientCommand": "ProductionServiceDialog",
  "requiredRights": "PRODUCTION_VIEW"
}

Example 4

This example illustrates the usage of a multiValued compound field and layoutConfig.

Example 4 
{
  "icon": "icon-users",
  "label": "Cast and crew",
  "params": {
    "service": "customWorkflow",
    "infoMessage": "Please fill in the people involved in this production",
    "addDialogClasses": [
      "new-lc-font",
      "dialog--variant-2",
      "new-lc-colors"
    ],
    "layoutConfig": {
      "type": "basic",
      "extraClasses": [
        "page-style-1"
      ],
      "extraListClasses": [
        "flow-flex-col vert-gap-20px"
      ],
      "elements": [
        {
          "name": "director",
          "type": "field"
        },
        {
          "name": "producer",
          "type": "field"
        },
        {
          "name": "otherCrew",
          "type": "field"
        }
      ]
    },
    "alwaysShowNew": true,
    "styleOptions": {
      "dialogVariant": "variant-2"
    },
    "userInputFields": [
      {
        "name": "director",
        "type": "STRING",
        "label": "Director",
        "extraOptions": {
          "showFieldLabel": true,
          "extraLabelClasses": ["col-xs-5"],
          "extraValueClasses": ["col-xs-7"]
        },
        "parameterName": "workflowParameters.director",
        "thesaurus": "FLOW:18848",
        useValueId: true,
        "skipWhiteListValidation": false
      },
      {
        "name": "producer",
        "type": "STRING",
        "label": "Producer",
        "extraOptions": {
          "showFieldLabel": true,
          "extraLabelClasses": ["col-xs-5"],
          "extraValueClasses": ["col-xs-7"]
        },
        "parameterName": "workflowParameters.producer",
        "thesaurus": "FLOW:18848",
        "useValueId": true,
        "skipWhiteListValidation": false
      },
      {
        "name": "otherCrew",
        "type": "COMPOUND",
        "label": "Other Crew",
        "multiValued": true,
        "parameterName": "workflowParameters.otherCrew",
        "compoundDefinition": {
          "fields": {
            "name": {
              "type": "STRING",
              "label": "Name",
              "placeholder": "name",
              "thesaurus": "FLOW:18848",
              "useValueId": true,
              "skipWhiteListValidation": false,
              "extraOptions": {
                "showFieldLabel": true,
                "extraLabelClasses": ["hidden"]
              }
            },
            "role": {
              "type": "SELECT",
              "label": "Role",
              "placeholder": "a role",
              "defaultValue": "actor",
              "extraOptions": {
                "showFieldLabel": true,
                "extraLabelClasses": ["hidden"]
              },
              "selectOptions": [
                {
                  "label": "Director",
                  "value": "director"
                },
                {
                  "label": "Actor",
                  "value": "actor"
                },
                {
                  "label": "Technical Crew",
                  "value": "techcrew"
                }
              ]
            }
          }
        },
        "extraOptions": {
          "showFieldLabel": true,
          "extraWrapperClasses": ["col-xs-12"],
          "compound": {
            "layoutConfig": {
              "type": "basic",
              "extraListClasses": ["flow-flex-row vert-gap-10px gap-20px"],
              "elements": [
                {
                  "name": "name",
                  "type": "field",
                  "extraClasses": ["flow-flex-col"]
                },
                {
                  "name": "role",
                  "type": "field",
                  "extraClasses": ["flow-flex-col"]
                }
              ]
            }
          }
        }
      }
    ],
    "serviceArguments": {
      "customWorkflowName": "myCustomWorkflow",
      "workflowParameters": {}
    }
  },
  "filters": [],
  "clientCommand": "ProductionServiceDialog",
  "requiredRights": "PRODUCTION_VIEW"
}