Column Overlay (a!columnOverlay)

Layouts

Column Overlay

Function

a!columnOverlay( alignVertical, position, width, contents, showWhen, style )

Displays a vertical column overlay for use in billboard layout.

See also: Billboard

Parameters

Name	Keyword	Types	Description
Vertical Alignment	`alignVertical`	Text	Determines vertical alignment of all content within the overlay. Valid values: `"TOP"` (default), `"MIDDLE"`, and `"BOTTOM"`.
Position	`position`	Text	Determines where the column overlay appears. Valid values: `"START"` (default), `"CENTER"`, `"END"`.
Width	`width`	Text	Determines the column overlay width. Valid values: `"NARROW"`, `"MEDIUM"` (default), `"WIDE"`.
Contents	`contents`	Any Type	The interface to display in the overlay. Accepts layouts and display components. Supported layouts and components: Box, Button, Card, Columns, Image, Link, Milestone, Progress Bar, Rich Text, Section, Side By Side.
Visibility	`showWhen`	Boolean	Determines whether the overlay is displayed on the interface. When set to false, the overlay is hidden and is not evaluated. Default: true.
Style	`style`	Text	Determines the overlay style. Valid values: `"DARK"` (default), `"SEMI_DARK"`, `"NONE"`, `"SEMI_LIGHT"`, `"LIGHT"`.

Examples

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

Column overlay with intro message

a!billboardLayout(
  backgroundcolor: "#073763",
  marginBelow: "STANDARD",
  overlay: a!columnOverlay(
    alignvertical: "MIDDLE",
    contents: {
      a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: {
          a!richTextItem(text: {"Hello, " & user(loggedinuser(), "firstName") & "."}, size: "MEDIUM"),
          char(10),
          a!richTextItem(text: {"What do you need help with?"}, size: "LARGE")
        },
        align: "CENTER"
      )
    },
    style: "DARK"
  )
)

Displays the following:

Column Overlay Example

Column Overlay