Bar Overlay
This SAIL component may not be compatible with all features of Appian. For details, see the Feature Compatibility section below.

Function

a!barOverlay( position, contents, showWhen, style )

Displays a horizontal bar overlay for use in billboard layout.

See also: Billboard, Billboard layout design guidance

Parameters

Name Keyword Types Description

Position

position

Text

Determines where the bar overlay appears. Valid values: "TOP", "MIDDLE", "BOTTOM" (default).

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.

Bar overlay with intro message

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a!billboardLayout(
  backgroundcolor: "#073763",
  marginBelow: "STANDARD",
  overlay: a!barOverlay(
    position: "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:

Bar Overlay Example

Feature compatibility

The table below lists this SAIL component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Custom Record Field Expressions Incompatible

The following patterns include usage of the Bar Overlay.

  • 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.
Open in Github Built: Thu, Aug 18, 2022 (08:23:12 AM)

On This Page

FEEDBACK