WorkflowFirst provides a lot of form layout functionality, and will automatically lay fields out to best fit the screen. For example it will automatically change the layout to suit either a desktop of mobile device.

 To provides hints on the desired layout of the form, there are a variety of settings you can change. We'll go through them in this section.

Field Order

 The fields in Designer are provided as a list, and WorkflowFirst then takes those fields and lays them out in a form. For example, if we had the fields:

 Then when we publish, the form will look like this:

 As you add fields to a form when in Designer, it will add that field to the end of the form by default. However sometimes you want that field to appear somewhere else in the form, so you should move the field in the field list. You can do this by using the options at the end of the field row in the list - click the down triangle, and select "Pick Up", then go to where you want the field to be moved to and click the same menu but select "Drop Above" or "Drop Below". This will then move the field to the new location.

 When you're determining the layout of forms in workflow stages, you'll want to change the order of the Input Fields for the stage, which you can select by clicking the middle button on the workflow design:

Field Span

 By default the form is laid out in 4 general columns. The fields will fill those columns from left to right, and when filled will switch to the next row and start again at the left.

 You can override this behavior in a number of ways. The first is by setting the Span of a field. By default the Span is 1, but you can make it any multiple of a half. So if we set the Span of the Age and Member fields to 0.5 then they will only take up half of a column, which will look like this:

 You'll notice now that Age and Member now share a single column. Likewise you can set the span of a field to 2, and it will span 2 columns. For example if we add a new field, called Address, and set its Span to be 2, then it will fill 2 columns as follows:

 Incidentally, to fill the whole width of the form, you'd normally set 4 in the Span. However, you can also just add the flag "Extra Large".

Grouping

 Another option is to create field groups. You do this by entering in a Group Title on a field definition, or in a workflow stage's input field. When laying out the form, any field that has a new group set will appear in its own group. For example, if we add the group title "Contact Details" to the Mobile Phone field, then it will look like this:

 You can add multiple groups just by setting a new group title.

Collapsible Groups

 As forms gets larger, it's often convenient to hide some sections of the form until they're needed. You can do this by adding groups, but then adding a flag to the field called "Collapsed Group".

 Once you do this and publish, you'll notice a little dropdown arrow on the group that toggles the visibility of all the fields in that group.

Paging

 For really long forms, you can use something called Collapsible Pages. This is basically identical to Collapsible Groups, except you'll add the flag "Collapsed Page". When published, that group will then be the only group expanded at a time: when you expand one Collapsible Page, all the other Collapsible Pages will collapse automatically. This makes it very useful to create long forms where the user will only be focusing on one section at a time.

By the way, if you do have very long forms, you may also want to check out the Save-As-Draft feature that lets you fill out a form over several sessions.

Static Labels

 When you create a field, you can set a Data Type - which defaults to Text (Few Words). If you select "Static Label" as the type, then you can insert labels into the form. These labels aren't fields that the user fills in, they simply show text that can be used to direct the user as they fill out the form.

 Usually a Static Label will have a span of 4, which means it will fill the whole width. The label text will come from either the Title of the field, or the Description if that is provided.

 For example, we can add instructions to our form by adding a Static Label form with a description as follows:

 If you're feeling a little more adventurous, you can also include HTML codes into the Description of the Static Label, and these will be displayed in the form. For example I can include the bold codes (<strong>) to emphasize certain text:

 And you can use any kind of HTML in there to help decorate your forms.

Required Roles

 WorkflowFirst has many security features, but one of the most useful is the "Required Roles" list that you see under many areas, including individual fields in a form. By adding a Required Role under a specific field, that form will only show to a user who has that role. If they do not have the role, then the field will be omitted from the form, and the next field will take its place.

 This can be very useful to make sure that only specific people can edit or even see specific fields, for example if a form contains sensitive data you may only want a manager to see.

 It can also be used to control the fields displayed in subforms in specific workflow stages, something which can be tricky to control otherwise.

'Enabled When'

 Another layout option is to have fields disabled or semi-hidden if they're not relevant. You do this using the "Enabled When" setting - which for regular forms is in the field definition under Display Settings, but for a workflow stage is in the Input Field settings.

 In there you can put a simple condition, of the format Field=Value. Then that field will only show enabled if that condition is met.

For example, in our form we can have the Balance Outstanding be enabled only if the Member field is set to yes (or, in code, set to True). So we'd use the Enabled When condition of Member=True:

Also, if you want to test against multiple values just separate the values with a pipe symbol, eg. Color=Red|Blue|Green.

Tooltips

 Another way to make your forms more helpful is by adding tooltips. You can do this by setting the Description of a field. This can be any length, but should really be a paragraph at most. Once you set it, the tooltip will pop-up when the user moves their cursor over the caption above the field entry.