UI (and Groups)

The ui property in our schemas contains an inputs property that gives you control over the order and grouping of Field Inputs when displayed to users on the Form Bio web application. The idea is to provide an array of Field Input ID’s or group configurations, which contain its Field Input ID’s in an array, to maintain the order.

Table Of Contents

• UI
• Workflow vs. Toolbox UI
• Groups
• Input Groups
• Advanced Groups

UI

Workflow vs. Toolbox UI

This is meant to just be an overview of the structure and idea of the ui property in our schemas, which remains the same between workflows and tools, but there are some differences in details:

1. Since the forms themselves have different visual appearances, so too do the groups.
2. Workflow field inputs ID’s must live inside a group.
3. Tool Field Input ID’s do not have to be nested inside groups and can live at the root level of the array.
4. For tools, the ui property also contains an outputs property for defining the order outputs are displayed in.

For more details, visit their respective pages:

Workflow Schema

Toolbox Schema

Groups

Input Groups

As you’ll see, the structure of a group closely resembles the core properties of a field input, but with the addition of an id property and a fields property:

"ui": {
	"inputs": [
		{
			// required properties
		  "id": "myGroup",
		  "title": "My Group",
			"fields": ["inputField1ID", "inputField2ID"],
			// optional properties 
		  "help_text": "More information on this grouping...";
		  "description": "Here is a description",
		  "hidden": "false"
		}
	]
}

Advanced Groups

An “Advanced” Group works the same as regular groups but with an extra element in how it’s displayed to users in the form. In tools, this means its fields will get displayed when a button is clicked. In workflows, a descriptive banner will be displayed above the fields. To create an “Advanced” Group, simply add a "format": "advanced" to your group configuration.

Notes:

1. title is optional for an “Advanced” Group. If none is provided, a title of “Advanced Configuration” will be provided to it.
2. More than one “Advanced” Group can be configured in a schema.

"ui": {
	"inputs": [
		{
			// required properties
		  "id": "myAdvancedGroup",
			"format": "advanced",
			"fields": ["inputField1ID", "inputField2ID"],
			// optional properties
		  "title": "My Advanced Group",
		  "help_text": "More information on this grouping...";
		  "description": "Here is a description",
		  "hidden": "false"
		}
	]
}