In this tutorial, we'll learn how you can create generic tiles in SAP Analytics Cloud Analytic App with SAPUI5 and link it to bar/column chart.
We will create a widget that leverages the Feed Tile that is a special tile that shows a news feed, but in this case we won't show any news feed, is just a static image with information.
experience.sap.com/fiori-design-web/tile/#feed-tile
To create the feed tile, we will use the SAPUI5 library sap.m.GenericTile.
Here is the main function in the widget that renders the GenericTile in XML view with the controller function.
Create an SAC Analytic App and insert the bar/column chart, Chart_1. I am using "BestRun" demo model as you can see in the screenshot below.
On the Chart_1: onSelect() function, insert the script to link the information from the chart to the tile.
Feed Tile
We will create a widget that leverages the Feed Tile that is a special tile that shows a news feed, but in this case we won't show any news feed, is just a static image with information.
experience.sap.com/fiori-design-web/tile/#feed-tile
Custom Widget WebComponents with sap.m.GenericTile
To create the feed tile, we will use the SAPUI5 library sap.m.GenericTile.
Here is the main function in the widget that renders the GenericTile in XML view with the controller function.
function loadthis(that, changedProperties) {
var that_ = that;
widgetName = changedProperties.widgetName;
if(typeof widgetName === "undefined") {
widgetName = that._export_settings.title.split("|")[0];
}
div = document.createElement('div');
div.slot = "content_" + widgetName;
if(that._firstConnection === 0) {
console.log("--First Time --");
let div0 = document.createElement('div');
div0.innerHTML = '<?xml version="1.0"?><script id="oView_' + widgetName + '" name="oView_' + widgetName + '" type="sapui5/xmlview"><mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="myView.Template"><GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop" backgroundImage="{' + widgetName + '>/icon}" frameType="TwoByOne" press="press"><TileContent unit="{/unit}" footer="{' + widgetName + '>/footer}"><ImageContent src="{/icon}"/><NewsContent contentText="{' + widgetName + '>/title}" subheader="{' + widgetName + '>/subtitle}"/></TileContent></GenericTile></mvc:View></script>';
_shadowRoot.appendChild(div0);
let div1 = document.createElement('div');
div1.innerHTML = '<div id="ui5_content_' + widgetName + '" name="ui5_content_' + widgetName + '"><slot name="content_' + widgetName + '"></slot></div>';
_shadowRoot.appendChild(div1);
that_.appendChild(div);
var mapcanvas_divstr = _shadowRoot.getElementById('oView_' + widgetName);
Ar.push({
'id': widgetName,
'div': mapcanvas_divstr
});
console.log(Ar);
}
sap.ui.getCore().attachInit(function() {
"use strict";
//### Controller ###
sap.ui.define([
"jquery.sap.global",
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"sap/ui/core/library",
"sap/ui/core/Core",
'sap/ui/model/Filter',
'sap/m/library',
'sap/m/MessageBox',
'sap/ui/unified/DateRange',
'sap/ui/core/format/DateFormat'
], function(jQuery, Controller, JSONModel, MessageToast, coreLibrary, Core, Filter, mobileLibrary, MessageBox, DateRange, DateFormat) {
"use strict";
return Controller.extend("myView.Template", {
onInit: function() {
console.log("-------oninit--------");
console.log(that._export_settings.title);
console.log("widgetName:" + that.widgetName);
if(that._firstConnection === 0) {
that._firstConnection = 1;
this._oModel = new JSONModel({
title: that._export_settings.title,
subtitle: that._export_settings.subtitle,
unit: that._export_settings.unit,
footer: that._export_settings.footer,
icon: that._export_settings.icon
});
sap.ui.getCore().setModel(this._oModel, that.widgetName);
} else {
var oModel = sap.ui.getCore().getModel(that.widgetName);
oModel.setProperty("/title", that._export_settings.title.split("|")[1]);
oModel.setProperty("/subtitle", that._export_settings.subtitle);
oModel.setProperty("/footer", that._export_settings.footer);
oModel.setProperty("/icon", that._export_settings.icon);
}
},
press : function(evt) {
MessageToast.show("The GenericTile is pressed.");
that._firePropertiesChanged();
this.settings = {};
this.settings.title = "";
that.dispatchEvent(new CustomEvent("onStart", {
detail: {
settings: this.settings
}
}));
}
});
});
//### THE APP: place the XMLView somewhere into DOM ###
console.log("widgetName Final:" + widgetName);
var foundIndex = Ar.findIndex(x => x.id == widgetName);
var divfinal = Ar[foundIndex].div;
console.log(divfinal);
var oView = sap.ui.xmlview({
viewContent: jQuery(divfinal).html(),
});
oView.placeAt(div);
});
}Use it in Analytic App
Create an SAC Analytic App and insert the bar/column chart, Chart_1. I am using "BestRun" demo model as you can see in the screenshot below.
- Tile: SAP Analytics Cloud
- Sub Title: Generic Tile
- Icon: https://comparecamp.com/media/uploads/2019/02/SAP-Analytics-Cloud-logo-1-220x90.png
- Unit
- Footer: Custom Widget
On the Chart_1: onSelect() function, insert the script to link the information from the chart to the tile.
var resultSet = Chart_1.getDataSource().getResultSet();
console.log(resultSet);
var region_sel = Chart_1.getSelections();
console.log(region_sel);
if(region_sel.length > 0) {
for ( var i=0; i < region_sel.length; i++ ) {
for(var dimension in region_sel[i]){
console.log(dimension);
if(dimension === "@MeasureDimension") {
var measureDimension = region_sel[i][dimension];
}
if(dimension === "ProductCategoryName") {
var ProductCategoryName = region_sel[i][dimension];
}
if(resultSet.length > 0) {
for ( var j=0; j < resultSet.length; j++ ) {
if((resultSet[j].ProductCategoryName.id === ProductCategoryName) && (resultSet[j]["@MeasureDimension"].id === measureDimension)) {
var description = resultSet[j]["@MeasureDimension"].description;
var formattedValue = resultSet[j]["@MeasureDimension"].formattedValue;
if(ProductCategoryName === "Alcohol") {
Tile_1.setTitle("Tile_1|" + description);
Tile_1.setSubTitle(formattedValue);
Tile_1.setFooter(ProductCategoryName);
Tile_1.setIcon("http://localhost/SAC/sactile/alcholos.jpg");
}
if(ProductCategoryName === "Carbonated Drinks") {
Tile_2.setTitle("Tile_2|" + description);
Tile_2.setSubTitle(formattedValue);
Tile_2.setFooter(ProductCategoryName);
Tile_2.setIcon("http://localhost/SAC/sactile/carborated-drinks.jpg");
}
if(ProductCategoryName === "Energy Drinks") {
Tile_3.setTitle("Tile_3|" + description);
Tile_3.setSubTitle(formattedValue);
Tile_3.setFooter(ProductCategoryName);
Tile_3.setIcon("http://localhost/SAC/sactile/energy-drinks.jpg");
}
if(ProductCategoryName === "Juices") {
Tile_4.setTitle("Tile_4|" + description);
Tile_4.setSubTitle(formattedValue);
Tile_4.setFooter(ProductCategoryName);
Tile_4.setIcon("http://localhost/SAC/sactile/juices.jpg");
}
}
}
}
}
}
}Demo Video
References
- Build a Custom Widget in SAP Analytics Cloud, Analytics Application
- github.com/ferrygun/SACGenericTile
- SAP Managed Tags:
1 Comment
