Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ferrygun18
Contributor
2,890
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.



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.


Insert the  custom widget you have created. I have 4 instances of the tile widget: Tile_1,Tile_2,Tile_3 and Tile_4.


For each tile, in the "Custom Widget Additional Properties", fill in the following:





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



1 Comment
Labels in this area