data-ink.

com

Metro / Flat UI Tabs

December 8, 2013 joshtapley Dashboard Design, Mobile, Updates, Xcelsius

Ive had a request come in to see how to make the flat UI style tabs that are used in my Balanced Scorecard
dashboard. Here is how you can make those tabs by layer core out-of-the-box components.

First, we start with a simple box with a gray border and a white background.

data-ink.com
Then we create three tabs with the same gray border and a lighter gray background.

data-ink.com
Send those tabs behind the main area box to represented the deselected tabs.

On top of the first tab, we place a white rectangle with no border. Make sure that it fits right into the area of the tab
in the back, so it looks like they share a border. Then make this highlighted tab cross over the border or the main

data-ink.com
background.

data-ink.com
Next place a push button centered over the tab, making sure that the Text placement looks good. For this example I
used a 16pt font.

data-ink.com
On the push buttons appearance tab, turn off the show button background option.

data-ink.com
Repeat these steps for all three tabs. The background tabs go behind the main background area, then everything
else is on top. The transparent buttons need to be on the top-most layer.

data-ink.com
Each tab has its own status and key. If the selected tab input (yellow cell; B2) equals the corresponding tab
number, the status turns to 1.

Each push button will move the corresponding tab number from column B (e.g. B6) into the selected tab input (B2).

data-ink.com
Finally, the tab highlights will reference the corresponding status/key to determine visibility.

Once you have mastered this concept, you will actually find that using push buttons for tabs can be much more
powerful than a simple label based menu. Basically push buttons can push multiple values for adjoining cells, so
you could change tabs and select/clear drill-down values at the same time. Because this method uses standard
components, it can also be used for dashboards using the SAP mobile BI app.

SAP Dashboards Loading Progress Bar

December 8, 2013 joshtapley Dashboard Design, SAP Dashboards, Updates, Xcelsius

Some dashboards have a lot going on and maybe a simple loading spinner doesnt cut it. One solution would be to
use a loading bar. If you have several queries, you could count the number of them that have returned data to
update the overall progress. Or, if you know roughly the speed to update the dashboard, you can just ballpark the
loading progress using the SAP Dashboards / Xcelsius history component. Want to know more?

Start by creating the basic components that you see listed in this examples object browser:
Push button to start/stop the loading simulation
Rectangle for loading message background
Text box for the loading title
Horizontal Progress Bar (with ticks turned off, and all text hidden) I used a light blue for the color
Finally, a smaller text box below the progress bar to display dynamic messages

data-ink.com
Click on this image to see the working example

To start and stop the loading simulation, I use a push button to toggle on/off. The push button moves the value from
cell C4 to cell B4. Refer to the formula displayed below.

The text for the push button is found in cell E4, and uses a similar formula to deliver the correct message. If the
loading is ACTIVE (or equal to 1) then display Stop else Start.

The history component moves the value from cell C6 to B6. The formula for cell C6 [=IF(B4>0, B6+1, 0)] means that
as long as the loading is active, it increments the current value in cell B6. If the loading isnt active, the history
component continues to push a 0 to cell B6. I currently have the history component set to update on a 0.3 second
interval.

data-ink.com
The progress bar uses cell B6 as the data and cell E6 as the max value. E6 is a hard-coded value and could be
changed to represent the approximate load time of your dashboard. Remember, this represents about 33 seconds
because the history component is changing every 0.3 seconds.

Finally, I have created a reference table off to the right that has some dynamic loading messages that are triggered
at specific intervals. To read those messages, cell C8 matches the current loading increment from cell B4 against
that table on the right (cells G6:G15 extra room to grow). The match doesnt have a zero at the end, so it finds the
closest match and not an exact match. Then the Offset formula looks at cell H5 and references down the number of
rows returned by the Match. Since I dont have any messages starting at zero, it starts with an error. While there are
a number of ways to handle this (and many more efficiently), I put an ISERROR test around the match to take care
of this. This also helps catch any other unforeseen problems because I would rather have no message than an error
displayed.