IBM Business Automation Workflow Adding a spinning icon for users during long service calls

A simple guide to adding a spinning icon in your UI when making a service call and retrieving data.

Authors: Leonard Blunt , Greg Ekaprana, Okka Sudaryanto, Diorella Mari Tom

Code

Code for these examples can be found in the Tips for BAW Toolkit github repository.

Introduction

There are multiple ways this can be quickly achieved to add a spinning icon for when you expect the service in the back-end to take a visibly long time or if for some other reason you want to visually distract the looser while they wait.

The examples provided here will be very simple drawing attention to three (3) ways we have done this in projects in the past.

• Page level, where the page is locked using a model view
• Inline where the spinner is located in relation to loading data
• Event driven (button/link/icon) where we alter the event driver that triggers the data event.

Different icons can be used but for our examples here we will use the icon “fa-spinner fa-spin”

Setting up Table and Service Flow

A table and service flow are used in the three examples that follow. We shall provide the details of the configuration for these first. Then elaborate in each example how the service flow events are used to work with the spinning icon.

Table View

Add the table coach view to the page . This time we will create a variable which is a list of the data object, the table will display productStatus List of ProductStatus (Figure 5).

Figure 5 List of Product Status.

Now when we click “plus “icon to add a new component in the page content click the variable icon on the right of the palette and select the variable from the list.

Figure 6 Selecting a list variable to add to the view

A table will be then added to the view of this business object. Edit the table columns to display type and remove columns not needed for the view. By adding the table in this way, the Data will also be bound to the same variable.

Service Flow View

Now add the service flow that will retrieve the data. Add the service flow coach view to the page your page should be now looking like that shown in

Figure 7 Spinner Page example

Bind the service flow such that it is bound to the same variable this will mean when the service returns the data, it will update the bound variable and this will trigger an update in the table.

Configure the service flow to invoke the mock service “getProductListStatus” and set to auto-run so it is invoked when the page is loaded (Figure 8)

Note: "getProductListStatus" is a mock service that returns generated data. For these examples we have inserted java.lang.Thread.sleep(10000); into the service flow. This helps to delay the response and illustrate the spinner.

Figure 8 Get Product List will Auto run on load

TIP: It is important to put other UI components before the service flow as later we will use the events of the service flow to trigger states of the spinning icon. If the service flow sits before the referenced UI components you will likely have view not found errors as the events on the service call will trigger while the UI is still loading, this is a result of using the "Auto-run" this can be controlled if using other event mechanisms.

Example 1: Spinner page level

In this example we will illustrate the steps to use a modal that will lock a page from inputs while the data is loaded.

There are 4 key components used in this simple example

1. A custom Spinner coach view (SpinnerCV) that displays the spinning icon;
2. A Modal Section which embeds SpinnerCV and is shown while data is being loaded and hidden otherwise;
3. A data table to show the returned data results.
4. A service call that retrieves the data from the back-end, using its events to trigger the show and hide of the modal; and

The Spinner View

The spinner view is a simple coach view made for this example; it includes a timer script to show the user how long they have waited. The icon will spin automatically when made visible, but the timer needs to be started and stopped each time the modal is opened. There is a start and stop script in the coach view and the sample code is uploaded to github.

Figure 1 SpinnerCV combines spinner icon with output text and timer

The icon name used is fa-spinner fa-spin

Modal Section

The modal view uses the out-of-the-box view for displaying modal view. The show and hide events on the modal are used to trigger the timer and visibility on the embedded coach view. To create click the plus icon on the page editor select Modal Section from the UI palette (Figure 2), inside the sections content area repeat and add the Spinner CV (Figure 3).

Figure 2 Add a Modal Section

Then add the Spinner CV to the inner content of the Modal Section

Figure 3 SpinnerCV as with all CV can be found in the Add palette

Once this is configured alter the show and hide events to call the functions on the embedded coach view when the modals show and hide events occur, this is illustrated in Figure 4.

Figure 4 Call the set visible start timer and stop timer on the SpinnerCV

SpinnerCV1 is the control id given to SpinnerCV when added.

Update the Service Flow Events

The last step before we run is to set the events on the service call to trigger the show and hide modal when the service is invoked and completed respectively (Figure 9).

SpinnerModal is the name that was set in the Modal Coach view Control ID.

Figure 9 Get Product List Events set to show and hide the modal view

Run Example 1

With all the pieces in place the example can now be run, and the user will see a spinning icon with the page locked because of the modal mode until the data is loaded. An example of this output is shown in Figure 10.

Figure 10 data loading with timer and spinning icon

The completed example can be run from the Tips for BAW toolkit. Open “Spinner Page Example” and run.

Example 2: Inline Spinner

This model takes a less intrusive approach by not locking the entire page but works to convey to the user that some action is still underway. The table and service flow invocations are the same as in Example 1. But the spinner is simplified here to be the icon and output text and a horizontal section see Figure 11.

Figure 11 Simple Horizontal section proceeding table

Update the Service Flow Events

In example one the Service call events manipulated the show and hide for the modal, in this example the events do the same but now it is the horizontal section that is being manipulated as shown in Figure 12.

spinnerLayout is the Control ID given the horizontal section that precedes the table. The collapse parameter in the setVisible for when the view is not visible is set true, so the white space is release to the visible components.

Figure 12 Service Flow events controls visibility of the Spinner horizontal section

Run Example 2

With all the pieces in place the example can be run, and the user will see a spinning icon above the table while the date loads Figure 13 note the whole page is not locked and the user could still take action or trigger events if appropriate.

Figure 13 Shows the Data loading

When the data is loaded the icon visibility is set to false and the user sees the loaded data only shown in Figure 14. The space used for the section is collapsed as highlighted earlier.

Figure 14 Data Loaded

The completed example can be run from the Tips for BAW toolkit. Open “Spinner Inline Example” and run.

Example 3: Event Driven Spinner

The event driven spinner is a common request to this approach also where some state of the UI component that triggers the event occurs. This can commonly be requested for links, buttons, icons etc. Again, the service flow and the table from example 1 remain unchanged. In this example we will change the Icon on the refresh button to spin and disable the button while the data is being loaded.

When the “Refresh” Button is clicked it will call the execute on the service flow

ServiceCall1 is the given Control ID on the service flow coach view.

Figure 15 Execute the Service when refresh is invoked

Update the Service Flow Events

As with the earlier examples the action will take place on the Service Call events, where now we manipulate the Refresh button characteristics. Where the refresh button icon is changed to the spinner icon and the button is disabled during the invoke and it is set to the refresh icon and set enabled when the call is finished (Figure 16)

Figure 16 Button characteristics modified based on service call events

Run Example 3

With all these setting in place the example can be run, and the user will see a spinning icon on the refresh button when they click refresh in Figure 17.

Figure 17 Spinning Icon on Refresh Button when Data is loading