Skip to Content
Author's profile photo Michael Howles

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:

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

/wp-content/uploads/2014/10/launchpad1_559781.png

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:

/wp-content/uploads/2014/10/launchpad2_559787.png

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:

/wp-content/uploads/2014/10/launchpad3_559788.png

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:

/wp-content/uploads/2014/10/launchpad4_559789.png

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:

/wp-content/uploads/2014/10/launchpad5_559799.png

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:

/wp-content/uploads/2014/10/launchpad8_559914.png

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:

/wp-content/uploads/2014/10/launchpad6_559800.png

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

/wp-content/uploads/2014/10/launchpad7_559801.png

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)

/wp-content/uploads/2014/10/launchpad_resize_559762.gif

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!

Assigned Tags

      27 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Michael,

      Did you add this to the online repository ? I just refeshed but couldn't find it.

      Cheers, and keep your excellent work coming ! It helps a lot in understanding the ins and outs of DS.

      SJR

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Yes it should be updated in the ZIP and also online repo. You may have to restart DS if you've had it running since before I updated. (It caches uodate checks)

      If that doesnt work, an uninstall/reinstall of my addon should do the trick.

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      I couldnt find the tile container, would appreciate if you could put the tile container on your repo 🙂

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author
      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      Hi Michael,

      another big THANK YOU! Sorry i'm repeating but that is really great that you do all the work and share it with all of us!

      Dirk

      Author's profile photo Former Member
      Former Member

      Great Work Michael ! Truly appreciate your spirit of sharing the innovative ideas to the SCN community.

      Thanks much.

      Raghav

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      it looks great in the screenshots. Thanks for providing this great code! 🙂

      I'm trying it out, but I somehow can't get it to work.

      I always get the same error in the trace log:

      !MESSAGE Message: org.mozilla.javascript.EcmaError: TypeError: Cannot read property "length" from undefined (addTile#13)

      My script with the launchpad just calls

      LAUNCHPAD_1.addTile("test");

      So there shouldn't be a problem from what I read in your description.

      Also, in your screenshot, entries in the "Additional Properties" are visible. Is that also included in the distributed version? I don't have anything there.

      I made sure to have the "Blue Crystal" theme selected as well as the "NEW_DESIGN_FONT.css" as Custom CSS and I'm on DS 1.3 Patch 1.

      Something else I could be doing wrong?

      Regards,

      Philipp

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Phillip - Thanks for the feedback!

      You've found a bug for sure (I'll fix shortly).  This looks like if you add a tile on a launchpad that has no tiles yet, you will get this error.  As a workaround, can you add this line right before your line?

      LAUNCHPAD_1.removeAllTiles(); // Fix for uninitialized array bug

      LAUNCHPAD_1.addTile("test");

      The CSS is not needed, by the way.

      Author's profile photo Former Member
      Former Member

      Michael, thx for the quick help.

      That did the trick.

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      No problem, I've also updated the Github repository and online repository to include this bug fix.

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      Thanks for another great SDK component!

      Is it possible to add tiles dynamically when looping through a data source which has all the required elements for the Launch Pad as dimensions (title, info, icon, numberUnit etc.) and measure (number)?

      Regards. Arseny

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Arseny,

      Thanks for your feedback.

      I think you should be able to via BIAL scripting dynamically add tiles to the Launch Pad.  The only *required* field it 'title', and the subsequent parameters can be left off, or skipped with at blank "" parameter.  Note that all parameters are of type String, and it's really up to you as which parameter you want to be used for placement on the tile.  For instance, you can pass the measure (as String) to the title or info parameter if you want a different look.

      The only 'special' parameter would be icon, since that's obviously meant for iconography.

      Hope this helps!

      Author's profile photo Former Member
      Former Member

      Hi Arseny,

      I tested yesterday and used a loop over an array to create and fill the tiles. It worked fine and I was able to create one tile per key figure in the query. I also played around a bit with the scaling factor and the unit being shown in the tile.

      Below is my example (I used a listbox for a change of sales organization and called the creation based on that. That's why there're calls for the listbox included.):

      DS_1.setFilter("ZSALESORG", LISTBOX_1.getSelectedValue());

      LAUNCHPAD_1.removeAllTiles(); // Fix for uninitialized array bug

      var array_measures = DS_1.getMembers("4Z8450PV06FB94PKR3F2FEWI6", 100); 

      array_measures.forEach(function(element, index) {

         

          var title = element.text.substring(0, element.text.indexOf(" kum. "));

          var info = element.text.substring(element.text.indexOf("kum. "));

         

          var icon = "";

          if ((index == 0) || (index == 1)) {icon = "sap-icon://sales-order";}

          if (index > 1) {icon = "sap-icon://money-bills";}

         

          LAUNCHPAD_1.addTile(

              index+1+". "+title,

              info,

              icon,

              DS_1.getDataAsStringExt(element.internalKey, {"ZSALESORG": LISTBOX_1.getSelectedValue()}),

              "* "+

                  DS_1.getData(element.internalKey, {"ZSALESORG": LISTBOX_1.getSelectedValue()}).scalingFactor+

                  " "+

                  DS_1.getData(element.internalKey, {"ZSALESORG": LISTBOX_1.getSelectedValue()}).unitOfMeasure);

      });

      Hope it helps.

      Philipp

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      This is pure awesome, Phillip!  I am in the process of posting a blog entry with something very similar but also showing how you can use CSS styles to make change the tile appearance with alert-based thresholds in the script.

      Author's profile photo Former Member
      Former Member

      Hi Philipp,

      Thanks for sharing your code. Could you take a snap shot of the initial view of your data source DS_1 and the final result with tiles?

      Thanks.

      Regards. Arseny

      Author's profile photo Former Member
      Former Member

      Sorry Aseny,

      I can't post the data.

      But it's very straight forward. I have an initial view, that consists of several lines with the sales organization. If filter in my listbox on one of them, and build the tiles based on the event from the listbox. That's the code I posted.

      For my example to work, I just had to make sure, to return one line of data (after I filtered on the sales organization).

      Philipp

      Author's profile photo Former Member
      Former Member

      No worries, Philipp. If you need to create, say, 6 tiles dynamically, and you work with a data source which contains the following 6 lines of data and 5 columns, would it be possible to fetch the data at once without using setFilterExt to fetch a line at a time?

      Capture.PNG

      Author's profile photo Former Member
      Former Member

      Hi Arseny,

      my script was just an example. In my case, users always want to restrict on a specific sales organization, and I wanted to create the tiles accordingly (and it was just simpler to create the tiles from one-liners).

      Of course it should be possible to derive the data also from the lines you posted. You can either go from the columns and create an array for every dimension and loop over all of them to fill your entries. That's not very nice though. But there's no easy way to jump to an specific array index (yet).

      Or you can go from the lines and use different key: value paires with getDataAsStringExt to go from there.

      Just my 2 cents, Philipp

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      Thanks a lot for your great work.

      I tested it and wonder if it's possible to assign different "On Tile Select" script to different tiles?

      Regards,

      Alfred

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Thanks for the feedback, Alfred.

      You could facilitate different logic by using the On Tile Select Event and the getTileClicked() to determine which tile was clicked and then write your corresponding script in that if statement.

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      Oh, I see! getTileClicked() returns the Tile Title. Now I know how to do it.

      Thanks a lot.

      Alfred

      Author's profile photo Alexander Croll
      Alexander Croll

      Hi Michael,

      thanks for this great post.

      I would like to reduce the height of the launchpad, but the tiles are being cut off.

      In the additional properties, I can assign a custom css to each tile. Can I use this to modify the tile height? If yes, what would be the css tag to address the tiles?

      Thanks,

      Alex

      Author's profile photo Daniel Rothmund
      Daniel Rothmund

      Hi ,
      nice blog. Is there any option to integrate a Design Studio Report as a Tile into Fiori Launchpad (ABAP) ?

      Regards

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Daniel,

      As far as I am aware, direct integration of Design Studio apps into the Fiori Launchpad is only available with the Simple Finance (sFin) Wave 6 as discussed in the post Design Studio integration with Fiori, which also references SAP Design Studio on SAP HANA: Integration with Fiori Launchpad as another option.

      More recently, the Question and Answer from World Premiere SAP Design Studio 1.5 ASUG Webcast makes a reference to the possibility of publishing Design Studio applications deployed on the BI Platform to the Fiori Launchpad with some configuration.

      Regards,

      Mustafa.

      Author's profile photo Scott Kelson
      Scott Kelson

      Hello Mike,

      I don't understand.  Are you describing a new Component?  How do we get this component and how do we install it so we can use it in a Design Studio dashboard?

      Thank you,

      Scott

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Hi Scott,

      Yes, it is a new component.  You can find more information about our SCN community extensions with download link here:

      SCN Design Studio SDK Development Community

      Author's profile photo Former Member
      Former Member

      Hi Mike,

      First I want to thank you for all those extra functionalities you and a lot others (from the SDK Development Community) have created!

      I'm using Design Studio since a couple of months and and several components brought up are really useful for me!

      This functionality seems really useful as well, but i'm looking for a solution in which you can add a graph (or a speed-o-meter). But i need the same dynamic as in the LAUNCHPAD example. Do you know if there is such a component available? or any other examples?

      Kind regards,

      Jeroen