Hi everyone, in the previous blog post Creating news tiles with SAP HANA UI Integration Services (UIS), we learned how to create news tiles in the UIS catalog and show them on the Fiori Launchpad. As I showed in the previous post, besides news tiles, another new feature in UIS is the custom tiles or “Custom App Launcher” formally. So, in this post I will continue sharing with you how to create custom tiles and put them on the Fiori Launchpad with UIS. If you are new to UIS, I highly recommend to first have a look at the section “What’s UIS? & Some useful materials” in Creating news tiles with SAP HANA UI Integration Services (UIS)

Motivation

As you can see, in SAP HANA SPS08 we can only select the following tile templates with UIS.

1.PNG

It’s difficult for us to create the following Fiori Launchpad (which contains news tile, bullet chart tile, comparison chart tile, etc.) with UIS inside SAP HANA SPS08, since there’s no template for news tiles and custom tiles at that time.

/wp-content/uploads/2015/03/2_660087.png

Image source

As of SAP HANA SPS09, news tiles and custom tiles are newly introduced in UIS. With these new features, now we are able to create the above Fiori Launchpad using UIS. We’ve already discussed news tiles in Creating news tiles with SAP HANA UI Integration Services (UIS), so in this post we’ll be focused on “Custom App Launcher” or we say custom tiles.

/wp-content/uploads/2015/03/3__660088.png

Creating SAPUI5 views

First of all let’s have a look at what we can configure in custom tiles. As you can see in the following screenshot, there are three parts including “General”, “Configuration” and “Navigation”. “General” and “Navigation” parts are the same as “Static App Launcher”, but “Configuration” is a particular part for “Custom App Launcher” and that’s the place where we can configure our own custom tiles.

/wp-content/uploads/2015/03/4_4_660163.png

OK. What we want to do is placing two custom tiles on the Fiori Launchpad. One is bullet chart tile, another is comparison chart tile. Based on the XS project in Creating news tiles with SAP HANA UI Integration Services (UIS), we can first create these two SAPUI5 views. In order to save time, I used the code from SAPUI5 Explored and did some modifications.

/wp-content/uploads/2015/03/5_1_660176.png

bulletChartTile.view.xml


<core:View
  xmlns="sap.suite.ui.commons"
  xmlns:core="sap.ui.core">
  <GenericTile
  header="Cumulative Totals"
  subheader="Expenses"
  size="M"
  frameType="OneByOne">
  <tileContent>
  <TileContent footer="Actual and Target" unit="EUR" size="M">
  <content>
  <BulletChart size="M" scale="M" targetValue="75" targetValueLabel="75c" minValue="0" maxValue="150">
  <actual>
  <BulletChartData value="125" color="Error"/>
  </actual>
  <thresholds>
  <BulletChartData value="35" color="Critical"/>
  <BulletChartData value="115" color="Error"/>
  </thresholds>
  </BulletChart>
  </content>
  </TileContent>
  </tileContent>
  </GenericTile>
</core:View>




comparisonChartTile.view.xml



<core:View
  xmlns="sap.suite.ui.commons"
  xmlns:core="sap.ui.core">
  <GenericTile
  header="Comparative Annual Totals"
  subheader="By Region"
  size="M"
  frameType="OneByOne">
  <tileContent>
  <TileContent footer="Compare across regions" unit="EUR" size="M">
  <content>
  <ComparisonChart size="M" scale="M">
         <data>
          <ComparisonData title="Americas" value="234" color="Good"/>
          <ComparisonData title="EMEA" value="97" color="Error"/>
          <ComparisonData title="APAC" value="197" color="Critical"/>
         </data>
         </ComparisonChart>
  </content>
  </TileContent>
  </tileContent>
  </GenericTile>
</core:View>


Creating “Custom App Launcher”

/wp-content/uploads/2015/03/6_1_660178.png

Bullet Chart Tile

7.PNG

Comparison Chart Tile

8.PNG

Placing custom tiles to Fiori Launchpad

9.PNG

Save and activate everything. Now let’s have a look at the Fiori Launchpad. Here you go.

/wp-content/uploads/2015/03/10_1_660194.png

Hope you enjoyed reading my blog and create your custom tiles successfully! 🙂

To report this post you need to login first.

6 Comments

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

    1. Wenjun Zhou Post author

      Hi,

      You can first call some services, e.g., xsjs or xsodata and then bind some values to the objects. Since I’m more familiar with JSView, here’s some JS code for you. In addition, you need to choose “JSView” in “Module Type”.

      sap.ui.jsview(“zwj.ui.tiles.comparisonChartTile”, {

        /** Specifies the Controller belonging to this View.

        * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

        * @memberOf zwj.ui.tiles.comparisonChartTile

        */

        getControllerName : function() {

        return “zwj.ui.tiles.comparisonChartTile“;

        },

        /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

        * Since the Controller is given to this method, its event handlers can be attached right away.

        * @memberOf zwj.ui.tiles.comparisonChartTile

        */

        createContent : function(oController) {

        var jsonModel = new sap.ui.model.json.JSONModel();

        jsonModel.loadData(“/zwj/services/XXX.xsodata/XXX/?$format=json&$XXX=XXX”, null, false);

        var json = jsonModel.getProperty(“/d/results”);

        var comparisonChart = new sap.suite.ui.commons.GenericTile({

        header: “XXX”,

        size: “M”,

        frameType: “OneByOne”,

        tileContent: [

                     new sap.suite.ui.commons.TileContent({

                     footer: “XXX”,

                     unit: “XXX”,

                     size: “M”,

                     content: new sap.suite.ui.commons.ComparisonChart({

                     size: “M”,

                     scale: “M”,

                     data: [

                            new sap.suite.ui.commons.ComparisonData({

                            title: json[0].XXX,

                            value: json[0].XXX,

                            color: “Good”

                            }),

                            new sap.suite.ui.commons.ComparisonData({

                            title: json[1].XXX,

                            value: json[1].XXX,

                            color: “Error”

                            }),

                            new sap.suite.ui.commons.ComparisonData({

                            title: json[2].XXX,

                            value: json[2].XXX,

                            color: “Critical”

                            })

                            ]

                     })

                     })

                     ]

        });

        return comparisonChart;

        }

      });

      Best regards,

      Wenjun

      (0) 
      1. Pinaki Patra

        Hi ,

        I have tried using js view but is throwing error

        The view instantiation resulted in js errorTypeError:

        t.createContent is not a function –

        I have created a view and an controller with the following structure

        View Code



        sap.ui.jsview(“Tile.nameDisplay”, {

           

          getControllerName : function() {

          return “Tile.nameDisplay”;

          },

          createContent : function(oController) {

          var comparisonChart = new sap.suite.ui.commons.GenericTile({

          header: “XXX”,

          size: “M”,

          frameType: “OneByOne”,

          tileContent: [

                       new sap.suite.ui.commons.TileContent({

                       footer: “XXX”,

                       unit: “XXX”,

                       size: “M”,

                       content: new sap.suite.ui.commons.ComparisonChart({

                       size: “M”,

                       scale: “M”,

                       data: [

                              new sap.suite.ui.commons.ComparisonData({

                              title: “Sales”,

                              value: “45.25”,

                              color: “Good”

                              }),

                              new sap.suite.ui.commons.ComparisonData({

                                  title: “Profit”,

                                  value: “7.58”,

                                  color: “Good”

                              }),

                              ]

                       })

                       })

                       ]

          });

          return comparisonChart;

          }

        });


        Controller Code


        sap.ui.controller(“Tile.nameDisplay”, {

           

        });

        (0) 
  1. Yue Fang

    Hi, thanks for the blog!

    When creating “Custom App Launcher” we can also define some custom properties as key-values pair. But how to use these custom properties? Can we access them from the UI5 module associated?

    Yue

    (0) 
  2. Meinrad Funke

    Hi Wenjun,

     

    first of all I want to thank you for this blog. Do you probably remember after this long time if something needed to be done to make the Custom App Launchar available for Launchpad Designer? I’m sitting on a S/4 1610 system and it’s just not available. Even when I call transaction /UI2/CHIP I can’t see a chip that seems to be suitable.

     

    Any ideas?

    Regards

    Meinrad

     

    (0) 

Leave a Reply