Posts tagged Dashboard

I can imagine you don’t all have the privilege of having a large HANA instance in your SAP wonderland. Because of this, you might have to wait a couple of seconds every now and then before your reports and dashboards pop up. Time to throw in some magic.

With this tutorial, I’ll show how you can make the waiting in SAP Dashboards / Xcelsius a little bit more exciting than just having to look at the default SAP Dashboards hourglass load indicator.

What are we going to do?

We’ll build an easy loading screen, which will pop-up whenever the dashboard is busy retrieving data.

Step 1: Setting up the connection properties

Navigate to the data manager and open the ‘Usage’ tab of the connection you want to activate the loading screen for.

In the ‘Load Status’ section of this tab, there are a couple of fields displayed. Normally, you might activate the ‘Enable Load Cursor’ checkbox, which will result in showing the good old hourglass.

If you want to advance things, you might use the ‘Loading Message’ and ‘Idle Message’ texts, which you can bind to a cell through the ‘Insert In’ option. After you binded to a cell, you can have a label component to display the text. This looks better than the hourglass but is still not really what we’re aiming for.

Step 2: Changing the ‘Load Status’ properties

Change the text in ‘Loading Message’ into ’1′ and the ‘Idle Message’ text into ’0′. We’ll use this text as a dynamic visibility parameter, to show and hide our loading screen.

What have we done? Basically, if a connection is retrieving data, the value 1 will be placed into the cell defined under ‘Insert In’. When the data is retrieved and the connection turns idle, the 1 will be replaced by a 0.

It could look something like below.

Step 3: Configure the loading screen

In the demo XLF, I’ve included a very simple but nice loading screen, including a small animation (SWF file). This SWF file is displayed by using the ‘Image component’.

This simple screen, consists of just a small amount of objects which doesn’t affect performance in any way worth mentioning. The most easy trick, is to use a canvas container component to include the separate objects of the loading screen.

Now navigate to the properties of the canvas container and open the dynamic visability properties. Bind the ‘Status’ cell to the cell selected for ‘Insert In’ in step 2 of this tutorial. Set the key to, for example, 0.

This property will ensure that the loading screen will only be displayed if cell A:1 of your worksheet has value 1. The value 1 is inserted on refreshing data.

Step 4: Enjoy the waiting

If you fire up your dashboard and a connection is being refreshed, the load screen will popup. It might look like displayed below.

Click the image for the live SWF demo.

You can download the source xlf file here.

Conclusion

The main goal of adding a better looking loading screen with a more dominant presence, is to improve the overall user experience. The user is being informed in a clear manner, that data is being loaded. If you’d like, you could make specific texts for specific sets of connections. You could also display the average waiting time. The possibilities are almost endless.

I often put a semi transparent topping on the rest of the dashboard when a ‘dialog’ like the load indicator is active. Take a look at the example below (the text is Dutch).

I’ve used a black rectangle with a certain level of transparency. This makes it clear to the user that something is going on. This may prevent mouse clicking frustration without seeing charts being refreshed.

I hope you learned something by reading this post.

Update 12/14/12: My colleague Ralph Knoops came up with a handy site with free load indicator animations. You can also download the sample FLA files from that site and change them according to your own preference.