Creating an SAP Smart Business like tile without HANA on your Fiori Launchpad

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

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.

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

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

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:

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:

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

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…

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