Columns Layout

Columns

Function: a!columnsLayout()

Displays any number of columns alongside each other.

See also: Column

Parameters

Name Keyword Type Description
Columns columns Any Type Columns to display using a!columnLayout().
Vertical Alignment alignVertical Text Determines vertical alignment of all column content with the layout. Valid values are "TOP" (default), "MIDDLE", and "BOTTOM".
Visibility showWhen Boolean Determines whether the layout is displayed on the interface. When set to false, the layout is hidden and is not evaluated. Default: true.
Margin Below marginBelow Text Determines how much space is added below the layout. Valid values: "NONE", "STANDARD" (default).

Notes

  • On mobile phones, columns are stacked.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Three Columns within One Columns Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
=a!columnsLayout(
  columns: {
    a!columnLayout(
      contents: {
        a!textField(
          label: "Customer",
          value: "Jane Doe",
          readOnly: true
        ),
        a!textField(
          label: "Status",
          value: "Active",
          readOnly: true
        ),
        a!textField(
          label: "Priority",
          value: "High",
          readOnly: true
        )
      }
    ),
    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
        )
      }
    ),
    a!columnLayout(
      contents: {
        a!textField(
          label: "Customer",
          value: "Michael Johnson",
          readOnly: true
        ),
        a!textField(
          label: "Status",
          value: "Prospective",
          readOnly: true
        ),
        a!textField(
          label: "Priority",
          value: "Medium",
          readOnly: true
        )
      }
    )
  }
)

Displays the following:

Columns Layout Nested in Another Columns Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
=a!columnsLayout(
  columns: {
    a!columnLayout(
      contents: {
        a!textField(
          label: "Customer",
          value: "Jane Doe",
          readOnly: true
        ),
        a!textField(
          label: "Status",
          value: "Active",
          readOnly: true
        ),
        a!textField(
          label: "Priority",
          value: "High",
          readOnly: true
        )
      }
    ),
    a!columnLayout(
      contents: {
        a!columnsLayout(
          columns: {
            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
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Customer",
                  value: "Michael Johnson",
                  readOnly: true
                ),
                a!textField(
                  label: "Status",
                  value: "Prospective",
                  readOnly: true
                ),
                a!textField(
                  label: "Priority",
                  value: "Medium",
                  readOnly: true
                )
              }
            )
          }
        )
      }
    )
  }
)

Displays the following:

The following patterns include usage of the Columns Layout.

  • Build a Wizard with Milestone Navigation (Wizards): Use the milestone component to show steps in a wizard.

  • Build an Interface Wizard (Wizards): Divide a big form into sections presented one step at a time with validation.

  • Cards as Buttons Pattern (Choice Components, Formatting, Conditional Display): The cards as buttons pattern is a great way to prominently display a select few choices.

  • Cards as List Items Patterns (Choice Components, Images): The cards as list items pattern is good for creating visually rich interfaces using a combination of cards and billboards to show lists of like items.

  • Drilldown Pattern (Grids): The drilldown pattern allows users to select an item from a grid to see more details in place of the grid.

  • Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern is a graphically rich, multi-part interface that allows users to drill into particular chart bars for more details.

  • Grid with Selection Pattern (Grids): This pattern provides useful save behavior and is an example of good UX design for a grid that allows users to select items and easily view their selections when there are multiple pages of data.

  • Icon Navigation Pattern (Conditional Display, Formatting): The icon navigation pattern displays a vertical navigation pane where users can click on an icon to view its associated interface.

  • KPI Patterns (Formatting): The Key Performance Indicator ("KPI") patterns provide a common style and format for displaying important performance measures.

  • Make a Component Required Based on a User Selection (Validation): Make a paragraph component conditionally required based on the user selection.

  • Master Detail Pattern (Grids): The drilldown pattern allows users to select an item from a grid to see more details next to the grid.

  • Refresh Data After Executing a Smart Service (Auto-Refresh, Smart Services):

  • Refresh Until Asynchronous Action Completes (Auto-Refresh): Use a refresh interval to display the results of an asynchronous action automatically.

  • Save a User's Report Filters to a Data Store Entity (Grids, Smart Services, Filtering, Reports): Allow a user to save their preferred filter on a report and automatically load it when they revisit the report later.

  • Searching on Multiple Fields (Grids, Filtering, Reports): Display a grid populated based on search criteria specified by end users.

  • Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.

  • Update an Entity-Backed Record from its Summary View (Records, Smart Services): Enable users to make quick changes to a record by updating it right from a record view.

  • Use Links in a Grid to Show More Details and Edit Data (Grids): Allow end users to click a link in a read-only grid to view the details for the row, and make changes to the data. The data available for editing may include more fields than are displayed in the grid.

  • Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.

FEEDBACK