Create Generic Tiles in SAP Analytics Cloud Analytic App

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:

• Tile: SAP Analytics Cloud
• Sub Title: Generic Tile
• Icon: https://comparecamp.com/media/uploads/2019/02/SAP-Analytics-Cloud-logo-1-220×90.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