Free cookie consent management tool by TermsFeed

Column Overlay

Function

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

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".

Padding

padding

Text

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

Examples

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

Column overlay with intro message

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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",
    padding: "MORE"
  )
)

Displays the following:

Column Overlay Example

Feedback