Design Studio SDK (1.3) - Fiori-like LaunchPad (ak...

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

Update (10/15/2014):

Be sure to check out Part 2 of this component:

http://scn.sap.com/community/businessobjects-design-studio/blog/2014/10/15/design-studio-sdk-13--dat...

Update (10/10/2014 evening):

Added another property for the Tiles to set a CSS Class to them. This will allow you to apply CSS formatting per-tile which may aid with Alert-based color formatting based on your target thresholds (coloring sizing etc)

Update (10/14/2014):

Fixed a bug reported in the comments here: Design Studio SDK (1.3) - Fiori-like LaunchPad (aka sap.m.TileContainer)

Original Post:

The Idea:

After making a Fiori-like PopOver Button, I started wondering what other sap.m/Fiori-like components would be a logical addition to a Design Studio application. One that I've always liked is the sap.m Tile Container or what is labeled a LaunchPad in Fiori terms.

Examples:

sap.m TileContainer Sample
Fiori Launchpad Sample A Cloud-based Fiori Launchpad – a perfect use case for the HANA Cloud Portal

For those who didn't click the links, here's a basic example from the sap.m TileContainer Sample:

Basically a grid-layout of tiles, but purposed to give you some high-level information and instigate guided navigation to more detail upon click.

This may look familiar for those who have seen the KPI template in Design Studio 1.3:

While I think the KPI Template provided with Design Studio is a good start, it's susceptible to some of the same manual labor I mentioned in my previous blog related to positioning individual pieces to compose a tile. Now, this has its merits where you can switch out a number for a chart or a simple crosstab, as well so there are definitely needs for both.

How about a programmatic way of constructing structured tiles? We have this today thanks to SAP if you've played with SAP's KPI Tile extension from their SDK Samples:

This is a nice component if you are OK with this structure (and some CSS classes to support cosmetics). So what if we'd like to do a little of both without a lot of repetition?

Below is my attempt to provide a TileContainer for multiple similarly structured KPI Tiles. Below is a design time example:

As you can see, this is very similar to the Fiori LaunchPad and TileContainer examples mentioned at the beginning. You also will see the Properties Panel on the right showing the ability to add new tiles with the following properties:

Title
Info (bottom right)
Info State (Success, Warning, Error, None) - aka (Green, Orange, Red, Black) - Handy for alert-based visuals
Icon
Number
Number Unit

Also during runtime we have the following BIAL Methods:

removeAllTiles() -- Removes all Tiles

removeTile(title) -- Removes Tile with title passed

getTileProperty(title) -- Returns JSON structured tile configuration for a tile by title with properties title, info, icon, number, numberUnit and valueState returned.

addTile(title, info, icon, number, numberUnit, valueState) -- Adds a new tile (or updates one if the title already exists)

I bolded and colored this one because this is how you would pass data to it in BIAL from your DataSource. In other words, I did not make this LaunchPad databound because you can get away with passing single KPIs to multiple tiles from multiple DataSources using BIAL to get around the single DataSource limit on SDK components.

Finally, we have an On Tile Select script event to facilitate the navigation logic during runtime. Example BIAL for this:

Of course replace this with some BIAL of your choice, the sky's the limit from there!

And another BIAL example below for doing various methods:

Also, as a bonus, by reusing the functionality of sap.m.TileContainer, it handles responsive layout and tile pagination for us automagically. Let's resize our window and see: