ProgressBanner¶

Progress banner indicates that an action or an action chain is being executed in the background. The banner gets displayed in the app's main navigation bar beside the progress bar. Users can define the message to be displayed in the banner and the message to be displayed once the action execution is successful.

Note: Failure handling is disabled for this action type as there are no viable ways for a progress banner to fail. Success handler can be used to chain other actions to the progress banner. The success action gets executed immediately after the progress banner gets displayed.

On iOS, the progress banner is displayed until the chain of action gets executed successfully. If the message to be displayed after the action execution is empty, the progress banner gets dismissed right after the action execution is complete.

On Android, the progress banner is displayed until the chain of action gets executed successfully with a "Dismiss" button. If there aren’t any actions chained to the progress banner, the message defined to be displayed after successful execution of the action chain is displayed.

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

ProgressBanner Properties¶

ActionLabel¶

ActionLabel can be used to indicate that the progress banner is clickable. On Android, it will be used as a 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

CompletionActionLabel¶

CompletionActionLabel can be used to indicate that the banner that is displayed after the successful execution of the action chain is clickable. On Android, it will be used as a button label. On iOS, it will be appended to CompletionMessage.

• type: string

CompletionMessage¶

Message to be displayed beside the progress indicator after the successful execution of the action chain. If the text is too long, it will be wrapped.

• type: string

CompletionSemantic¶

Semantic applied to the banner upon completion. 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: Default

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

CompletionTimeout¶

Indicates how long the success banner should be displayed. The duration must be defined in seconds. If set to 0 seconds, the banner gets displayed indefinitely until user chooses to dismiss it manually (not applicable for Android). CompletionTimeout is applicable only if CompletionMessage is defined.

• type: integer
• default: 0

DismissBannerOnAction¶

Indicates whether the banner must be dismissed or not when the user clicks on it to perform another action. This is used for both progress and completion banner.

• type: boolean
• default: false

Message¶

Message to be displayed when an action gets initiated right after the user interacts with the success banner. A progress indicator will be displayed beside the message to indicate the execution progress. If the provided 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

OnCompletionActionLabelPress¶

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

• type: ActionOrRule
• Formatter and Binding are not supported

Semantic¶

Semantic applied to the banner when action is started and is in progress. Defaults to 'Default'. 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: Default

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

Styles¶

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

• type: object with following properties.

Banner¶

The style object for Banner in different states (Progress / Completion). It applies background color styles to the banner on both platforms. It also applies border top (iOS) and progress bar (Android) styles to the banner. For completion state in Android, only background color styles is applicable.

• BannerStyleStates

MessageText¶

The style object for Message in different states (Progress / Completion). It applies color and font styles to the message text of the banner.

• BannerStyleStates

ActionLabel¶

The style object for ActionLabel in different states (Progress / Completion). It applies button styles to the action button. Applicable only in Android.

• BannerStyleStates

DismissButton¶

The style object for DismissButton in different states (Progress / Completion). For iOS, it applies color styles to the Dismiss icon. For Android, it applies button styles to the Dismiss button.

• BannerStyleStates

_Type¶

• type: const

The value of this property must be:

"Action.Type.ProgressBanner"

Action Result¶

This action does not have an ActionResult.

Examples¶

// ProgressBanner.action
{
  "Message": "Sync in Progress.",
  "CompletionMessage": "Sync Complete.",
  "CompletionTimeout": 5,
  "OnSuccess": "/path/to/SyncRuleCode.js",
  "ActionLabel": "$(PLT,'Click to retry.','Retry')",
  "OnActionLabelPress": "/path/to/ConfirmMessage.action",
  "CompletionActionLabel": "$(PLT,'Show details.','Details')",
  "OnCompletionActionLabelPress": "/path/to/ToastMessage.action",
  "DismissBannerOnAction": false,
  "_Type": "Action.Type.ProgressBanner",
}

// ProgressBanner.action with Semantic and Styles
{
    "Message": "Sync in Progress.",
    "CompletionMessage": "Sync Complete.",
    "CompletionTimeout": 5,
    "OnSuccess": "/path/to/SyncRuleCode.js",
    "ActionLabel": "$(PLT,'Click to retry.','Retry')",
    "OnActionLabelPress": "/path/to/ConfirmMessage.action",
    "CompletionActionLabel": "$(PLT,'Show details.','Details')",
    "OnCompletionActionLabelPress": "/path/to/ToastMessage.action",
    "DismissBannerOnAction": false,
    "Semantic": "Tint",
    "CompletionSemantic": "Negative",
    "Styles": {
      "Banner": {
        "Progress": "banner-class-1",
        "Completion": "banner-class-2",
      },
      "MessageText": {
        "Progress": "message-text-class-1",
        "Completion": "message-text-class-2"
      },
      "ActionLabel": {
        "Progress": "action-label-class-1",
        "Completion": "action-label-class-2"
      },
      "DismissButton": {
        "Progress": "dismiss-button-class-1",
        "Completion": "dismiss-button-class-2"
      }
    },
    "_Type": "Action.Type.ProgressBanner",
}

// SyncRuleCode.js (not needed, just to show how a rule can be interwined at any time)
function SyncRule(clientAPI) {
  clientAPI.showProgressBanner("Uploading...");
  return clientAPI.executeAction("/path/to/ODataUpload.action");
}

Style Classes Definition¶

.banner-class-1 {
    background-color: green;
    border-top-color: blue; /* For Android, applicable to Progress state only */
}

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

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

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