Introduction

I originally posted a question about the title of this post http://scn.sap.com/thread/3886381 after seeing DJ Adams post highlighting an upcoming webinar about the Fiori Launchpad they are hosting in the next few days.  It wasn’t immediately obvious, but it appeared that DJ had actually created a Smart Business Tile without Smart Business; and I thought, of course that’s possible, why hadn’t I done that yet.  e.g. I really like actionable tiles, but sometimes the simple dynamic tile isn’t enough, and while I do have Smart Business available where I am; what if I needed something slightly different?

So if you like the look of Smart Business or the custom tiles that you can build on HANA; but you’ve got an ERP system without HANA and an on-premise Fiori Launchpad (FLP); then this post can help you create a Smart Business like tile with just a little effort.


While this does work, I’m not sure how supported it is from a longer term perspective since it relies a little on what I believe is the original framework for Fiori that was used in HR Renewal Lane Pages.  I’m also working with the UI Add-on 2.0 so not completely aware if there are any limitations there if you are on earlier versions (e.g. I heard that adding remote catalog tiles to groups may not be supported in earlier releases of FLP).


Quick Overview of What is Required

The way this works is through the use of Remote Catalogs in FLP.  To start with, you create and deploy a Chip which is effectively a mini-UI5 project with a chip/tile definition file.  Then you reference the Chip via config to give it access to the internal Catalog (not the FLP catalog but the catalog inside the Suite Page Builder). Then you add this “remote” catalog to FLP; and finally add your tile to the appropriate group (if desired). 

Before describing these steps in more detail, I will just point out the following references:


This HANA based custom tile generation was very useful in understanding how to get there (and helped understand the chip definition and project layout required) – Kudos to Wenjen for writing this: Creating custom tiles with SAP HANA UI Integration Services (UIS)

Also, this help is also very valuable for understanding how to do it:

User Interface Add-On for SAP NetWeaver – SAP Library

Please note – There’s a lot more to this than what is written, mainly around configuration, Tile previews and using gateway services to fill data; but I’ll let others cover that if required (most is pretty obvious if you’re a UI5 developer).

Creating the Tile Itself

Wenjen’s post has an example you can use to start with, but in short, create a project using your favourite editor (typically WebIDE now days); and in the webapp folder, you’ll need a tile definition:


<?xml version="1.0" encoding="UTF-8"?>
<chip xmlns="http://schemas.sap.com/sapui2/services/Chip/1">
<implementation>
    <sapui5>
<viewName>example/Tile.view.xml</viewName>
    </sapui5>
</implementation>
  <appearance>
    <title>My Tile</title>
<description>Custom Tile</description>
  </appearance>
  <contracts>
              <consume id="fullscreen"/>
    <consume id="configuration">
    </consume>
  </contracts>
</chip>









Refer to the help link above for more details on the schema – especially since this is how you can pass parameters to the tile which are available from this.getView().getViewdata() (or something like that).

Then the unique thing about the tile configuration is you need to create the full folder hierarchy of the package for the view to be found. e.g. The example above uses example/Tiles.view.xml; hence I would create Tiles.view.xml under a sub-folder called example, but unlike a normal ui5 project, if you have a package like au.com.mycompany.tiles; then you would need to create au and the subsequent folders for it to work (you can’t set the relative path in this xml file).

So then you create your View, and for a comparison micro chart, it would look something like this:


<?xml version="1.0" encoding="UTF-8"?>
<core:View xmlns="sap.suite.ui.commons" xmlns:mc="sap.suite.ui.microchart" xmlns:core="sap.ui.core" controllerName="example.Tile">
              <GenericTile header="My Team Status" subheader="Summary" size="M" frameType="OneByOne" press="displayOverview">
                             <tileContent>
                                           <TileContent>
                                                          <content>
                                                                        <mc:ComparisonMicroChart size="M" id="myChart">
                                                                                      <mc:data>
                                                                                                    <mc:ComparisonMicroChartData title="Spend Alerts" value="1" color="Error"/>
                                                                                                    <mc:ComparisonMicroChartData title="SSIs Pending for Month" value="4" color="Good"/>
                                                                                                    <mc:ComparisonMicroChartData title="Events in next 7 days" value="2" color="Critical"/>
                                                                                      </mc:data>
                                                                        </mc:ComparisonMicroChart>
                                                          </content>
                                           </TileContent>
                             </tileContent>
              </GenericTile>
</core:View>









And because I want the Tile to actually do something, I added the following method to do an intent based navigation:


displayOverview: function() {
                                           var oCrossAppNav = sap.ushell.Container.getService("CrossApplicationNavigation");
                                           oCrossAppNav.toExternal({
                                                          target: {
                                                                        semanticObject: "MyTile",
                                                                        action: "doSomething"
                                                          },
                                                          params: {}
                                           });
                             }








After this, we deploy the UI5 webapp to our Gateway/Fiori server.

Registering the Tile in the Old School (?) Catalog

Run the transaction /ui2/chip (never used this till I created this tile so was new to me too).

Now we create a new Chip configuration and put the path to our new Tile (You’ll see I didn’t deploy it correctly below as the webapp folder is in the path but hey – next time…)

/wp-content/uploads/2016/04/chip_937083.png

Save and now start another application I’d never used before which is the Suite Page Builder (you may need to activate this in SICF:

/sap/bc/ui5_ui5/sap/ARSRVC_SPB_ADMN/main.html

It’s a little clunky this app, and you may need to refresh it occasionally (e.g. My new catalog would sometimes not show up upon startup, but after a refresh would come up).

So we create a catalog which will be our remote catalog in FLP but selecting the + icon.

/wp-content/uploads/2016/04/pageadmin_937084.png

Then we go back to All CHIPs, and select Add on our Tile; to add this to our catalog.

/wp-content/uploads/2016/04/addtile_937127.png

Now selecting our catalog, you’ll see we have our tile showing a text version of our tile.

/wp-content/uploads/2016/04/pageadmin2_937128.png

Almost there…

Creating the Remote Catalog

So we’re finally back in the FLP admin page, and there we create a new Catalog, and select Remote which gives us a few more options:

/wp-content/uploads/2016/04/catalog_937129.jpg

Now since the config above was done on my Fiori/Gateway server; I don’t need a System alias; so pressing Save now gives us our catalog and a preview of our Tile:

/wp-content/uploads/2016/04/catalogpreview_937130.jpg

Finally, if required, add this to your Group and you’re done (provided your intent based navigation is ready to go:

/wp-content/uploads/2016/04/finished_937131.png

One Final Learning – FLP Cachebuster

Unlike the cachebuster used for UI5 apps; the Tile seems to use the same cachebuster id as per the FLP; however updating the Tile does not update this id so you may see stale information (this also applies for Overview Pages which I noted has the same behaviour. 

You can use a URL parameter to get around this (the nicer way to do it for others), but I just went to transaction SMICM and invalidated the global cache after any major updates which works better, if not potentially a little more annoying other users of the system.

Wrap-Up and Thoughts

So having a micro chart in your tile is pretty straightforward, looks awesome, and can be really useful for your users; but with great power (or feature capabilities), comes great responsibility.  I believe going forward, it is worth designing these tiles just as much as you would any application; as users can really save time with the right information and visualisation in a tile.  But be careful not to abuse these tiles (which I started to initially); since in many cases, the dynamic tile will be perfect.


Anyway, hopefully this was something that may be of use to you, or at the very least, will make you intrigued in what else can be done to make the Fiori experience even better!  And fInally to end,  while I found all the micro charts really easy to use; I’d like to challenge you in the SAP ecosystem to start sharing more unique d3.js style visualisations tiles since I think after you’ve exhausted the possibilities of dynamic and Smart Business tiles you’ll find yourself saying, “I can’t go back to just a simple static tile for this action – I need something to tell the user that there’s work to be done” .


Update 5 May, 2016

After continuing the implementation of a large Fiori Launchpad deployment further, I’ve discovered how important Catalogs (and their grouping) will be longer term, and for that reason, Remote Catalogs are less than ideal as you can’t combine say an SSB like Tile “Approve Timesheets” with the related “My Timesheets” app.  For that reason, it might be worth waiting to see how the Custom Catalogs can be implemented in local Catalogs in Fiori which I believe should be discussed in the replay of the aforementioned webinar that hopefully the Bluefin people will publish soon… cc DJ Adams


Update 6 May, 2016

Couldn’t let it go, so dug a little deeper, and while the help doco is clear, it’s quite confusing as well.  Instead of doing the Remote Catalog, the only difference is you need to add your Custom Tile to the Tile Templates configuration.  The confusing part is the config for this is actually managed within a Web Dynpro Component.

So this help is telling you the right thing (I just followed it wrong several times):

https://help.sap.com/saphelp_nw74/helpdata/en/2e/2c64446f074a308d93cc43af348253/content.htm


In short, edit the Web Dynpro customising for /UI2/CHIP_CATALOG_CONFIG and configuration Id /UI2/FLPD_CATALOG and add your new (template) tile there to the end of the list…


Capture.JPG

Then hey presto: you can add your tile to any local catalog (bad example shown that I’m not using)!

Capture.JPG

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Jocelyn Dart

    Hi Matt,

    Great work – and very handy for the right use case!  Nice to know how we take advantage of this without HANA. 

    Need to be careful not to abuse this though… especially without the performance advantages of HANA behind the call.

    Plus having seen some pretty awful FLP dashboards now at some customer sites I would encourage people to always consider:

    • Is this chart truly meaningful for *this* end user? 
      • Don’t create micro-charts just because you think they look attractive – there has to be enough value to justify the performance and system load costs
    • How important is this chart for this user?
      • Is this really something they want to see every day on their dashboard? Or am I better off going for static tile and a fuller analytical app they look at occasionally
    • If we agree it does belong on the dashboard… have you agreed WHERE it will be placed? 
      • The worst dashboards are those where tiles have been added at random with no apparent logical grouping or sort order.

    A dashboard should tell a story… using Smart Business like tiles can make it a more attractive and immediate story. 

    But if your dashboard looks like a teenage slob’s sock drawer, please get it sorted first.

    Thanks Matt!

    Rgds

    Jocelyn

    (0) 
    1. Matt Harding Post author

      Hi Jocelyn,

      Your comments are very much aligned with my closing comments.  But probably to stress it even more than you – I think the design of the tiles and initial layout of FLP is probably more important than the apps themselves.  In the early days, who cares; but as soon as you open up tiles to non-SAP links and it grows substantially; you’re going to have more than a teenage slob’s sock drawer to deal with!  e.g. For this reason, I just raised this idea in idea place as I see managing tiles is going to be very challenging for end users as you role out new apps (though also noted in Fiori 2.0 they have a New Apps tile to counteract this issue slightly):

      https://t.co/8orkAMQANW

      Cheers,

      Matt

      (0) 
  2. Naseem VP

    Hi Matt,

    Thanks a lot for such a great detailed blog.

    I have a query. Is there a way to update the values on the comparison micro chart which we have created through this method?

    Regards,

    Naseem

    (0) 
      1. Naseem VP

        Hello Matt,

        This seems motivating, but however i am in a little bit confused to achieve this.

        My requirement is to refresh the data displayed in the micro charts at some specific interval of time as in the HANA smart business apps.

        Is it possible to achieve this periodic refresh functionality? If so, please give some high level suggestions on it.

        I am able to achieve the intial display of the data through the controller attached to the view. I am stuck with the period refresh of the data on the view

        Thanks & Regards,

        Naseem

        (0) 
        1. Matt Harding Post author

          Ah – For that I would suggest reverse engineering the dynamic tile and see how they do it there…And would be great to post how you did it so others can learn from it too.

          Good luck,

          Matt

          (0) 
          1. Naseem VP

            Thanks Matt,

            I will surely share if i manage to do it.

            I have a doubt in the navigation of the app, when clicking this tile in the Fiori Launchpad.

            Could you please elaborate on that part. You have given the code for crossAppNavigation.

            But where am i supposed to use it and where should i place this file.

            If you have the source code already, please share that as it will be more useful.

            Regards,

            Naseem

            (0) 

Leave a Reply