Free cookie consent management tool by TermsFeed Billboard Layout Component (a!billboardLayout)
Billboard Layout Component
SAIL Design System guidance available for Billboard Layout

When you need to get a user's attention, use the billboard layout. Learn how to broadcast the right message and create powerful, visual prominence for sections that shouldn't be ignored.

Function

a!billboardLayout( backgroundMedia, backgroundColor, showWhen, height, marginBelow, overlay, accessibilityText, marginAbove )

Displays a background color, image, or video with optional overlay content.

Parameters

Name Keyword Types Description

Background Media

backgroundMedia

Any Type

Determines the background content. Takes priority over background color. Configure using a!documentImage, a!userImage, a!webImage, or a!webVideo.

Background Color

backgroundColor

Text

Determines the background color. When background media is also specified, the background color shows while media is loading or when background image is transparent. Must be a valid hex code. Default is #f0f0f0.

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.

Height

height

Text

Determines the layout height. Valid values: "EXTRA_SHORT", "SHORT", "SHORT_PLUS", "MEDIUM" (default), "MEDIUM_PLUS", "TALL", "TALL_PLUS", "EXTRA_TALL", "AUTO". Auto renders as medium when no background media is set.

Margin Below

marginBelow

Text

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

Overlay Configurations

overlay

Any Type

Determines the overlay. Configure using a!columnOverlay, a!barOverlay, or a!fullOverlay.

Accessibility Text

accessibilityText

Text

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

Margin Above

marginAbove

Text

Determines how much space is added above the layout. Valid values: "NONE" (default), "EVEN_LESS", "LESS", "STANDARD", "MORE", "EVEN_MORE".

Usage considerations

Default text colors for light and dark backgrounds

  • When the overlay style is none, the standard text color changes based on the selected background color.
    • For light background colors, standard text is dark gray.
    • For dark background colors, standard text is switched to white.
    • These automatic text color changes apply even when background media is set.

Using overlays

  • A billboard layout may have either a bar, column, full, or no overlay.
  • When overlay content does not fit within the layout, it scrolls vertically.

Sizing and displaying background media

  • For billboards with a value of "SHORT", "MEDIUM", or "TALL" for the height parameter, background media is displayed as large as possible to fill the available width.
  • When the background media's aspect ratio is different from the layout's aspect ratio, the background will be cut off at the top and bottom.
  • If it is important that the background media be fully visible, use auto height. See the UXDG for guidance on this setting.
  • When a video is used as the background, it plays automatically and does not have audio.

Examples

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

Billboard with overlay

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
70
71
72
73
a!billboardLayout(
  backgroundColor: "#619ed6",
  overlay: a!barOverlay(
    position: "BOTTOM",
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: "Finance Summary",
                    size: "LARGE"
                  )
                }
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        label: "Total Spending",
                        value: a!richTextItem(
                          text: "$31,000.00",
                          size: "MEDIUM"
                        )
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        label: "Remaining Budget",
                        value: a!richTextItem(
                          text: a!richTextItem(
                            text: "79%",
                            size: "MEDIUM"
                          ),
                          color: "POSITIVE"
                        )
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        label: "Open Requests",
                        value: a!richTextItem(
                          text: "36",
                          size: "MEDIUM"
                        )
                      )
                    }
                  )
                },
                alignVertical: "TOP"
              )
            }
          )
        },
        alignVertical: "MIDDLE"
      )
    },
    style: "DARK"
  ),
  height: "SHORT"
)

Displays the following:

screenshot of a billboard with an overlay displaying a finance summary

See the SAIL Design System: Billboard Layout for guidance on when to use each overlay style.

Feature compatibility

The table below lists this SAIL component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Sync-Time Custom Record Fields Incompatible
Real-Time Custom Record Fields Incompatible

Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.

Process Reports Incompatible

Cannot be used to configure a process report.

Process Events Incompatible

Cannot be used to configure a process event node, such as a start event or timer event.

Old versions

There are older versions of this interface component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below.

Old Versions Reason for Update
a!billboardLayout_19r1

Replaced multiple parameters with a new parameter that allows the designer to choose between a bar, column, or full overlay style. Added the full overlay style. Added the alignVertical parameter for the column and full overlay styles.

To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page.

The following patterns include usage of the Billboard Layout Component.

  • Cards as List Items Patterns (Choice Components, Images): Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.

Billboard Layout Component

FEEDBACK