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.
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.
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.
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.
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.
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”
Bullet Chart Tile
Comparison Chart Tile
Placing custom tiles to Fiori Launchpad
Save and activate everything. Now let’s have a look at the Fiori Launchpad. Here you go.
Hope you enjoyed reading my blog and create your custom tiles successfully! 🙂
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.
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
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", {
});
Hello,
I have the same problem... Did you manage to solve this ?
thank you.
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
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
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.
Awaiting your response.
Thanks,
Srinivasan S
Hi Expert,
Can you please share your sample project to refer..
Thanks in advance.