Design Studio SDK (1.3) – Fiori-like LaunchPad (aka sap.m.TileContainer)

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–databound-and-colored-kpi-tile-set-using-sdk-launchpad

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:

And let’s try real narrow just for another example:

And here’s a crude video animation capture of the resize animation at runtime.  (It’s much smoother in person):

(Click if it’s not animating for you)

Considerations:

This ONLY works when Blue Crystal Theme is selected!  Older UI5 themes are not compatible.

Install/Source:

As with my other entries, the source code will be updated on my Github Repository that you can read about here.

Design Studio 1.2/1.3 SDK – Design Studio Utility Pack

Feedback welcomed.  Enjoy!