Skip to Content
Author's profile photo Former Member

Creating custom tiles with SAP HANA UI Integration Services (UIS)

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! 🙂

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Trimurthulu Kondepudi
      Trimurthulu Kondepudi

      Hi Wenjun Zhou,

      Very nice blog on Custom tiles..

      How do you pass data dynamically to these tiles. Here in your blog you hard coded the values. I want to pass these values at runtime.

      Regards,

      Trimurthulu.

      Author's profile photo Former Member
      Former Member
      Blog 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

      Author's profile photo Pinaki Patra
      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", {

         

      });

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN

      Hello,

      I have the same problem... Did you manage to solve this ?

      thank you.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Meinrad Funke
      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

       

      Author's profile photo Srinivasan S
      Srinivasan S

      Hi Wenjun Zhou,

      I followed your blog but after registering my app to the launchpad, still empty tile is displaying.

      Any idea where I could have possibly gone wrong. My application has only one view wherein I am using a Generic Tile as below.

      <mvc:View controllerName="ct.uiCustomTiles.controller.comaprisonChart" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
      	displayBlock="true" xmlns="sap.m">
      	<App>
      		<pages>
      			<Page title="{i18n>title}">
      				<content>
      					<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>
      				</content>
      			</Page>
      		</pages>
      	</App>
      </mvc:View>

       

      Awaiting your response.

      Thanks,

      Srinivasan S

       

      Author's profile photo Vinothkumar T
      Vinothkumar T

      Hi Expert,

       

      Can you please share your sample project to refer..

      Thanks in advance.