Defining Busy Indicator

As an application designer, you can define a busy indicator for long running actions, for example when refreshing an application or running a long script, to temporarily block application users from doing other actions while the action is running.

There are two types of busy indicator:

  • Busy indicator that displays automatically when loading is longer than the predefined delay. Once it’s triggered, the entire application is blocked.

  • Busy indicator that’s owned by an application, a pop up or a container such as a tab strip or panel. It’s defined using APIs and when it’s triggered, only the specific container you define busy indicator for is blocked.

Automatic Busy indicator

The automatic busy indicator can be triggered either by application-level or widget-level loading activities. Whenever there’s a loading that exceeds the predefined delay time, the entire application is blocked.

The busy indicator is by default not enabled, to enable an automatic busy indicator, do as follows:

  1. Go to the Styling panel of the Canvas.

  2. In Loading Indicator Settings of the Application Settings, check the option Enable loading indicator when necessary.

  3. (optional) Enter an information text that you want to display along with the loading indicator icon.

  4. In Loading Indicator Delay, define when a loading activity is executed longer than how many milliseconds, the loading indicator will show up.

Besides enabling an automatic busy indicator in the Styling panel, you can also choose to enable or disable such busy indicator whenever needed using the API:

Code Syntax
Application.setAutomaticBusyIndicatorEnabled (enabled: boolean)

If you set a busy indicator to enabled via the API, its information text and loading indicator delay time will follow the corresponding settings defined in the Loading Indicator Settings of the Styling panel.

After a loading activity is completed, the loading indicator will automatically disappear.

Busy indicator Owned by each Widget defined Using APIs

You can leverage the show/hide busy indicator APIs to show or hide a busy indicator for:

  • an application

  • a pop up

  • a container (including tab strip and panel)

Corresponding APIs are as below:

Code Syntax
// Show busy indicator. And if the text parameter is specified, show the text along with the busy indicator icon.
Application.showBusyIndicator(text?: string) // cover the whole page
Popup_1.showBusyIndicator(text?: string) // cover the pop up only
TabStrip_1.showBusyIndicator(text?: string) // cover the tab strip only
Panel_1.showBusyIndicator(text?: string) // cover the panel only
 
// Hide busy indicator
Application.hideBusyIndicator()
Popup_1.hideBusyIndicator()
TabStrip_1.hideBusyIndicator()
Panel_1.hideBusyIndicator()

The automatic busy indicator is fully independent of the busy indicators owned by each widget, which means that when automatic busy indicator is enabled, it won’t affect calls to Application.showBusyIndicator() or Application.hideBusyIndicator().

Example: Configure the show or hide of busy indicator when using PostMeassage API to send requests

Sample Code

In this example, you can write scripts to show the indicator when using PostMessage to send a request and hide the indicator when getting the response from outside page.

button.onClick() {
    Application.showBusyIndicator(); // Show application manual indicator
    Application.postMessage(PostMessageReceiver.Parent, message, "http://localhost:8080");
}
 
Application.onPostMessageReceived(message:string, origin: string) {
    if (message === "JOB_DONE") {
        Application.hideBusyIndicator();// Hide application manual indicator when getting the response message “JOB_DONE”
    }
}