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. |
a!billboardLayout( backgroundMedia, backgroundColor, showWhen, height, marginBelow, overlay, accessibilityText, marginAbove )
Displays a background color, image, or video with optional overlay content.
Name | Keyword | Types | Description |
---|---|---|---|
Background Media |
|
Any Type |
Determines the background content. Takes priority over background color. Configure using a!documentImage, a!userImage, a!webImage, or a!webVideo. |
Background Color |
|
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 |
|
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 |
|
Text |
Determines the layout height. Valid values: |
Margin Below |
|
Text |
Determines how much space is added below the layout. Valid values: |
Overlay Configurations |
|
Any Type |
Determines the overlay. Configure using a!columnOverlay, a!barOverlay, or a!fullOverlay. |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Margin Above |
|
Text |
Determines how much space is added above the layout. Valid values: |
"SHORT"
, "MEDIUM"
, or "TALL"
for the height parameter, background media is displayed as large as possible to fill the available width.Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
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:
See the SAIL Design System: Billboard Layout for guidance on when to use each overlay style.
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. |
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.
Billboard Layout Component