Column-Based Section Layout

Column-based Section

SAIL Function: a!sectionLayoutColumns()

Displays one or two columns of related components beneath a section title on an interface. Use this 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.

Parameters

Name Keyword Type Description
Label label Text Optional text to display as the section's title.
Columns columns Column Array Values that define the columns for the SAIL interface.
Validations validations Text or Validation Message Array Validation errors displayed below the section title. 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 section is only validated when a button in the same validation group is clicked.

Notes

  • You cannot add a section as the content for another section. It results in an error.
  • If you put a two-column section within a column of a two-column dashboard, the section's columns collapse into one.
  • 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 to the Columns parameter is null, the left column displays as desired while the right column displays as empty space.

Examples

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

Two-Column Section with an Empty Left Column

=a!sectionLayoutColumns(
  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