Step by step guide to use KPI Tiles from Smartbusiness

Prerequisites :-

You as an app developer need to subscribe to smartbusiness service, runtime application.

you can follow subscription guide of smartbusiness.

For sample application where you can see usage of this control you can follow  this.

Step-by-step guide:

Once you have subscribed to smartbusiness service and runtime application, you will have a destination name ssbruntime created by smartbusiness service in your account. In case you don’t have ssbruntime destination created you can create one yourself

URL should be : https://sapsmartbusiness-<<account>>.<<yourhcphost>>.com.

In your application you have to register module path of “sap.smartbusiness.ui.core.tiles” as “/destinations/ssbruntime/sap/smartbusiness/ui/core/tiles”.

jQuery.sap.registerModulePath("sap.smartbusiness.ui.control", "/destinations/ssbruntime/sap/smartbusiness/ui/control/");
jQuery.sap.require("sap.smartbusiness.ui.control.Tile");

Now you can instantiate smartbusiness tlies as :

var oSmartBusinessTile = new sap.smartbusiness.ui.control.Tile({
                                tileType: sap.smartbusiness.ui.control.TileType.NumericTile,    // type of visualization you want  *mandatory property
                                evaluationID : "E.12345679",                           //Evaluation ID  *mandatory property
                                dimension : "ProductCategory",                           //Optional for NumericTile, DeviationTile, ComparisonTile mandatory for TrendTile, ContributionTile
                                measures : measures,                                     //Mandatory for ComparisonTile and optional for all other tiles.
                                dualTileType : sap.smartbusiness.ui.control.TileType.DualTileType.Trend,    //If you have selected name as DualTile,
                                                    //you need to provide which right visualization you want
                                press : function() {                                     //Click handler for this control
                                        sap.m.MessageToast.show("Ooouch don't press me!!!\n" +
                                    "I am " + type);
                                    }
                         });
 
var oContainer = new sap.m.VBox();
oContainer.addItem(oSmartBusinessTile);                         //you can now place oSmartBusinessTile anywhere you like.

For everything to work you need to provide destination for smartbusiness runtime application in you neo-app.json

"routes": [
      {
      "path": "/destinations/ssbruntime/",
      "target": {
        "type": "destination",
        "name": "ssbruntime"
      },
      "description": "Destination for smartbusiness runtime UI application"
    },
],
"securityConstraints": [
    {
        "protectedPaths": [
            "/neo-app.json",
            "<<your app component path>> or <<your application root path>>"
        ],
    }
]

Possible values for each and every property in tile control:

tileType : [
    sap.smartbusiness.ui.control.TileType.NumericTile,
    sap.smartbusiness.ui.control.TileType.DeviationTile,
    sap.smartbusiness.ui.control.TileType.TrendTile,
    sap.smartbusiness.ui.control.TileType.ComparisonTile,
    sap.smartbusiness.ui.control.TileType.ContributionTile,
    sap.smartbusiness.ui.control.TileType.DualTile
]
 
evaluationID : E.1234344/*app developer needs to know this from smartbusiness modeler app*/
dimension : "Country "/*it should be valid dimension in odataservice/entity provided in evaluation
            i.e  "Country" */
 
measures : /* it's an array of maximum three elements
            i.e */
                [
                    {
                        COLUMN_NAME : "Sales",    //it should be valid dimension in odataservice/entity provided in evaluation
                        semanticColor : "Error"   //color you want to assing to the bar in visualization
                    },                            //possible values for colors are : "Error", "Good", "Neutral", "Critical"
                    {
                        COLUMN_NAME : "TotalSales",
                        semanticColor : "Good"
                    },
                        {
                        COLUMN_NAME : "SalesShare",
                        semanticColor : "Critical"
                    }
                ];
 
dualTileType : [
    sap.smartbusiness.ui.control.TileType.DualTileType.Deviation,
    sap.smartbusiness.ui.control.TileType.DualTileType.Comparison,
    sap.smartbusiness.ui.control.TileType.DualTileType.Contribution,
    sap.smartbusiness.ui.control.TileType.DualTileType.Trend
]

*If you are using your own index.html then you need to enable complex binding by providing : data-sap-ui-xx-bindingSyntax=”complex” in your html’s bootstarp argument.

Happy coding.

Note:

To know more about Smart Business Service, refer to the articles

Smart Business Service

Note: In case you face any issue with Smart Business Service, you can create an Incident on SAP Support Portal with the  components: CA-GTF-SB-HCP. You may also contact Smart Business team at smartbusiness@sap.com