BannerMessage¶

The banner message is like a self-dismissing toast that is attached to the app's main navigation bar. It is more inclined towards alerting the user of error status.

All the properties defined under Action are applicable to this action.

BannerMessage Properties¶

ActionLabel¶

Label to indicate that banner is clickable. On Android, it will be used as button label. On iOS, it will be appended to Message.

• type: string

Animated¶

Indicates whether the banner is animated or not. This parameter is not applicable for Android. By default, banners on Android will always be animated.

• type: boolean
• default: true

DismissBannerOnAction¶

Indicates whether the banner should be dismissed or not after the user clicks on the banner to perform a subsequent action.

• type: boolean
• default: false

Duration¶

Indicates the number of seconds the banner is to be displayed. If the value is set to 0, the banner will be displayed indefinitely until the user taps on the 'Dismiss' button on Android or close icon on iOS.

• type: integer
• default: 2

Message¶

Text to be displayed in the banner. If the text is too long, it will be wrapped.

• type: string

OnActionLabelPress¶

Action/Rule to be triggered when ActionLabel is pressed. This is applicable only when both ActionLabel and OnActionLabelPress are non-empty.

• type: ActionOrRule
• Formatter and Binding are not supported

Semantic¶

Semantic applied to the banner. Defaults to 'Normal'. For iOS, it applies to the Message text's color and the color of the banner's top border. For Android, it applies only to the Message text's color. Supported in Mobile only.

• type: enum
• default: Normal

The value of this property must be one of the known values listed below.

Styles¶

Custom styles to be applied to BannerMessage. These styles will override semantic based styling. Supported in Mobile only.

• type: object with following properties.

Banner¶

The class name for Banner, applying background and border top styles (iOS only) to the banner.

• BannerMessage style class

MessageText¶

The class name for MessageText, applying color and font styles to the message text of the banner.

• BannerMessage style class

ActionLabel¶

The class name for ActionLabel, applying button styles to the action button. Applicable only in Android.

• BannerMessage style class

DismissButton¶

The class name for DismissButton. For iOS, it applies color styles to the Dismiss icon. For Android, it applies button styles to the Dismiss button.

• BannerMessage style class

_Type¶

• type: const

The value of this property must be:

"Action.Type.BannerMessage"

Action Result¶

This action has no ActionResult.

Examples¶

// BannerMessage.action
{
    "Message": "Message in a banner.",
    "Duration": 15,
    "Animated": true,
    "ActionLabel": "$(PLT,'Click to retry.','Retry')",
    "OnActionLabelPress": "/path/to/ConfirmMessage.action",
    "DismissBannerOnAction": true,
    "_Type": "Action.Type.BannerMessage"
}

// BannerMessage.action with Semantic and Styles
{
    "Message": "Message in a banner.",
    "Duration": 15,
    "Animated": true,
    "ActionLabel": "$(PLT,'Click to retry.','Retry')",
    "OnActionLabelPress": "/path/to/ConfirmMessage.action",
    "DismissBannerOnAction": true,
    "Semantic": "Negative",
    "Styles": {
        "Banner": "banner-class",
        "MessageText": "message-text-class",
        "ActionLabel": "action-label-class",
        "DismissButton": "dismiss-button-class"
    },
    "_Type": "Action.Type.BannerMessage"
}

Style Classes Definition¶

.banner-class {
    background-color: green;
    border-top-color: blue; /* iOS only */
}

.message-text-class {
    font-color: red;
    font-style: body;  /* iOS Only */
    font-typeface: bold;  /* Android Only */
}

.action-label-class { /* Android Only */
    background-color: black;
    font-color: white;
    font-typeface: bold;
    font-size: 16;
}

.dismiss-button-class {
    background-color: black; /* Android Only */
    font-color: white;
    font-typeface: bold; /* Android Only */
    font-size: 16; /* Android Only */
}