Define Busy Indicators

As an application designer, you can define a busy indicator for long running actions, such as 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 indicators:

  • 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, pop up or container such as a tab strip or panel. It’s defined by APIs and when it’s triggered, only the specific container you defined busy indicator for is blocked.

Define an 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 the following:

  1. Go to the Styling panel of the canvas.

  2. In the Application Settings section, under Loading Indicator Settings, select Enable loading indicator when necessary.

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

  4. Under Loading Indicator Delay, define for over how many milliseconds a loading activity is executed, the loading indicator will show up.

Besides enabling an automatic busy indicator in the Styling panel, you can use the following 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 settings in the Styling panel.

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

Define Busy Indicators on Different Levels via APIs

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

  • an application

  • a pop up

  • a container (including tab strip and panel)

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()

Example

In this example, you can write scripts to show the indicator when a request is sent via a postMessage event and hide the indicator when a response is received from the 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”
    }
}

The automatic busy indicator is fully independent of the busy indicators defined in this way, which means that when the automatic busy indicator is enabled, it won’t affect calls to Application.showBusyIndicator() or Application.hideBusyIndicator().