data-ink.comMetro / Flat UI TabsDecember 8, 2013joshtapleyDashboard Design,Mobile,Updates,XcelsiusIve 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.

Then we create three tabs with the same gray border and a lighter gray background.

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 background.

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.

On the push buttons appearance tab, turn off the show button background option.

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.

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

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 BarDecember 8, 2013joshtapleyDashboard Design,SAP Dashboards,Updates,XcelsiusSome 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 messagesClick 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.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.