Overview

There are many scenarios in which your Workflow configuration choices can improve (or hinder) the Workflow Popup’s ability to present visually appealing forms to users.

This document outlines some best practices that will generally give you good-looking forms, as well as advanced configuration options that you can use to override various default layout settings when needed.

General best practices

Suggestion	Notes / Example

Suggestion	Notes / Example
Avoid mixing short and long field labels on the same Step / Section	All form fields should follow a similar convention. If some labels ask a question using a long sentence, and other labels are a simple word or two, the form will look awkward and will feel awkward to use.
When using long labels, either always wrap them OR adjust the column sizing proportions.	Use the Layout settings at the Workflow Step Section level to always stack labels over values, or to assign more space to the lavel Open
Use multiple Sections if you have more than ~7 fields	Large forms can be broken down into tabbed “sections” so that the user only has to focus on a few fields at a time, rather than a massive form. Open Multi-section (tabbed) Workflow
Set a fixed or max width to prevent major resizes when navigating between Steps or Sections

How to create pleasing forms

Understanding Bootstrap

The Workflow Popup uses the Bootstrap CSS library for its responsive layout.

In Bootstrap, every container is divided into a 12 column “grid”, and the items in that container span 1 to 12 of those columns. The widths of those items are then kept proportional as the page grows or shrinks.

Some of the Workflow configuration settings allow you to override the “column spans” used for different parts of a form, thereby giving you more control over the overall layout.

Single-tab layouts

When a Workflow Step contains only a single Section, then it is displayed without a vertical tab bar.

In this case, the popup is divided into that 12 column grid, with the label spanning 3 columns and the value or form field spanning the other 9.

If the browser window is too narrow, such that the labels and/or values would be squished, then Bootstrap automatically “collapses” those columns into individual rows, effectively stacking labels above values.

Multi-tab layouts

When a Step has multiple Sections, then the popup is displayed with a vertical tab bar in addition to the form fields.

In this case, there are multiple Bootstrap “grids” in effect:

• The popup itself is divided into a Bootstrap grid with a 3/9 split for tab bar and form

• The form is divided into it’s own Bootstrap grid, with a 3/9 split for labels and fields

Option: Always stack labels over values

The default layout will put labels and fields side-by-side at larger screen sizes, but will “stack” the labels above the fields at smaller screen sizes.

That works well when the labels are relatively short and the values / form fields are larger or variable width. It doesn’t work so well when the labels are relatively long, and the form fields are relatively short.

If the labels are longer, you can optionally choose to always stack labels over values. This is a setting at the Workflow Step Section level.

Option: Adjust width of field labels

As stated above, by default a Workflow form divides the 12-column Bootstrap grid into two columns:

• Label, spanning 3 of 12 columns

• Value, spanning 9 of 12 columns

As of 11.0.31, you can adjust these proportions at the Workflow Step Section level.

For instance, this form contains a bunch of Picklist attributes only, with multi-word labels. Changing the proportions from 3:9 to 9:3 gives more horizontal space to the label, without needing to stack the labels above the fields.

Option: Adjust width of tab bar

The default layout for multi-section Workflow Steps is to allocate either 2 or 3 Bootstrap columns to the tab bar (depending on the width of the tab labels) and the rest to the form.

As of 11.0.31, you can override those proportions if needed at the Workflow Step level.