Box Layout

Box

Function: a!boxLayout()

Displays any arrangement of layouts and components within a box on an interface.

Parameters

Name Keyword Types Description

Label

label

Text

Text to display as the box's title.

Contents

contents

Any Type

Components and layouts to display within the box.

Style

style

Text

Determines the color of the label and box outline. Valid values: Any valid hex color or "STANDARD" (default), "ACCENT", "SUCCESS", "INFO", "WARN", "ERROR".

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.

Collapsible

isCollapsible

Boolean

Determines if an expand/collapse control appears in the box header. Default: false.

Initially Collapsed

isInitiallyCollapsed

Boolean

Determines if the box is collapsed when the interface first loads. Default: false.

Margin Below

marginBelow

Text

Determines how much space is added below the layout. Valid values: "NONE" (default), "STANDARD".

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Padding

padding

Text

Determines the space between the box edges and its contents. Valid values: "NONE", "EVEN_LESS", "LESS" (default), "STANDARD", "MORE", "EVEN_MORE".

Examples

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

Box Layout with Success Style

1
2
3
4
5
6
7
8
9
10
11
12
= a!boxLayout(
  label: "Success! Your order was successfully processed",
  style: "SUCCESS",
  marginBelow: "STANDARD",
  contents: {
    a!textField(
      labelPosition: "COLLAPSED",
      value: "Your credit card has been charged.",
      readOnly: true
    )
  }
)

Displays the following:

Collapsible Box Layout with Custom Style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
= a!boxLayout(
    label: "Enrolled Students",
    style: "#98002E",
    marginBelow: "STANDARD",
    isCollapsible: true,
    contents: {
      a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: a!richTextBulletedList(
          items: {
            "Elizabeth Ward",
            "Fatima Cooper",
            "Jaylen Smith",
            "Michael Johnson",
            "Jade Rao",
          }
        )
      )
    }
  )

Displays the following:

The following patterns include usage of the Box Layout.

  • 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.
Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK