Columns-Based Form Layout

Column-based Form

Displays up to two columns of components beneath a title and above buttons. Use this as the top-level layout of start and task forms when you are defining columns using a rule that is may be used in other layouts or if you are displaying empty columns. This layout cannot be selected from the SAIL component picker in the Interface Designer.

See Also: Form, Column-based Dashboard

SAIL Function: a!formLayoutColumns()

Parameters

Name Keyword Type Description
Label label Text Optional text to display as the SAIL interface's title.
Instructions instructions Text Optional text displayed below the field's label.
Columns columns Column Array Values that define the columns for the SAIL interface.
Buttons buttons Button Layout Buttons to display at the bottom of the form, arranged using a!buttonLayout().
Validations validations Text or Validation Message Array Validation errors displayed above the form buttons. Configured using a text array or an array with a mix of text and Validation Message using a!validationMessage(message, validateAfter).
Validation Group validationGroup Text When present, the form is only validated when a button in the same validation group is clicked.
Don’t automatically focus on first input skipAutoFocus Boolean Determines whether the first input will receive focus when a form loads. Default is false.

Notes

  • A button layout must be present for a back button to appear for activity-chained tasks.
  • If the first item passed to the Columns parameter is null, the left column displays with no content while the right column displays as desired.
  • If the second item passed the Columns parameter is null, the left column displays as desired while the right column displays as empty space.
  • Use form validation messages for problems that are not specific to a single component.
  • Focus will automatically be applied on initial load to the first component in a form that meets the following conditions:
    • The component is one of the following: checkbox, decimal, dropdown, encrypted text, integer, paragraph, radio button, text
    • The component is neither read-only nor disabled
    • The component is not in an initially collapsed section

Examples

Copy and paste an example to the expression view of the interface designer to see it displayed.

Two-Column Form with an Empty Left Column

=a!formLayoutColumns(
  label: "Customers for Review",
    columns:{
    a!columnLayout(
      contents: {}
    ),
      a!columnLayout(
      contents: {
        a!textField(
          label: "Customer",
          value: "John Smith",
          readOnly: true
        ),
        a!textField(
          label: "Status",
          value: "Prospective",
          readOnly: true
        ),
        a!textField(
          label: "Priority",
          value: "High",
          readOnly: true
        )
      }
    )
  }
)

Displays the following:

FEEDBACK