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.

Notes

  • On narrow screens and mobile devices, columns are stacked.
  • On tablets, if there are exactly two columns at the top level, they are displayed alongside each other. Otherwise, columns are stacked. Nested columns are all 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:

FEEDBACK