Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Prerequisites :-

Subscription to Smart Business Service from your HCP Account. you can follow  subscription guide of smartbusiness.

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

Step-by-step guide


Here is how drilldown control looks like and how different property of drilldown control is linked to which part of UI.



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.control" as "/destinations/ssbruntime/sap/smartbusiness/ui/control/".
jQuery.sap.registerModulePath("sap.smartbusiness.ui.control", "/destinations/ssbruntime/sap/smartbusiness/ui/control/");
jQuery.sap.require("sap.smartbusiness.ui.control.Kpi");

 

Now you can instantiate smartbusiness application as :
var oSmartBusinessDrillDown = new sap.smartbusiness.ui.control.Kpi({
evaluationId: "E.12345679", //Evaluation ID *mandatory property
showAggregate : true/false, //to Show/Hide aggregate value in drilldown objectHeader
showFilters : true/false, //to Show/Hide facetFilter
showMiniChart : true/false, //to Show/Hide miniChart
showChart : true/false, //to Show/Hide chart
views : [array of viewID's of smartbusiness drilldown], //to restrict no. of charts/views shown in drilldown
showKpiTitle : true/false, //to Show/Hide KPI title in header of application
showEvaluationTitle : true/false //to Show/Hide evaluation title in header of application
});
var oContainer = new sap.m.VBox();
oContainer.addItem(oSmartBusinessDrillDown); //you can now place oSmartBusinessTile anywhere you like.

 

Once smartbusiness drilldown applicaiton is instantiated. You can apply additional filters on top of existing evaluation filters, or you can override exiting evaluation filters with your own filters.
var overrideFilters = true;
var oFilters = [{
path: "SupplierId",
operator : "EQ",
value1 : "100000004"
},
{
path: "SupplierId",
operator : "EQ",
value1 : "100000027"
},
{
path: "SupplierId",
operator : "EQ",
value1 : "100000002"
}
]; //we expect filter format to be in above format

oSmartBusinessDrillDown.applyFilter(oFilters); //this way you can apply you oFilters on top of existing filters(evaluation e.t.c)
oSmartBusinessDrillDown.applyFilter(oFilters, overrideFilters) //it will override all existing filters applied on drilldown so far

 

 

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>>"
],
}
]

 

Drilldown control provides filterChangeEvent. If you change facetFilter in drilldown event associated with drilldown will be fired. Event has three parameters  "addedFilters", "currentFilter", "removedFilters": You can attachFilterChangeEvent as following:
oSmartBusinessDrillDown.attachFilterChange(function(oEvent){
var oAddedFilters = oEvent.getParameter("addedFilters"); // New filters which has been added in facet
var oCurrentFilters = oEvent.getParameter("currentFilter"); // Current filter which is applied in facet
var oRemovedFilters= oEvent.getParameter("removedFilters"); // Filters which are removed
/**
* you can use these three filters array and act upon it
**/
});

 

Drilldown control provides chartViewChange event. If you change chart view in drilldown corresponding event associated with drilldown will be fired. Event has one parameters  "viewId": viewId is ID of view currently selected. You can attachChartViewChange  event as following:
oSmartBusinessDrillDown.attachChartViewChange(function(oEvent){
var currentViewSelected = oEvent.getParameter("viewId");
/**
* you can use this view ID for you action
**/
});

 

Drilldown control provides chartDataPointSelection event. If you selcet some point in chart  corresponding event associated with drilldown will be fired. Event has two parameters  "currentDataPoint" and "allDataPoint":  currentDataPoint is array of data points which has triggered the event and allDataPoint gives array of all data points which are currently selected in chart. You can attachChartDataPointSelection  event as following:
oSmartBusinessDrillDown.attachChartDataPointSelection(function(oEvent){
var currentDataPoint = oEvent.getParameter("currentDataPoint");
var allDataPointSelected = oEvent.getParameter("allDataPoint");
* you can use these parameters for your action.
**/
});

 

Drilldown control provides adding delegates to filterChange event. Currently only filterChage event can be delegated. As drilldown control internally makes async calls to backend datasource. you can't add delegates unless control is instantialted, for this there is another event "onAfterInitialization".  you can provide delegates and perform action inside this event callback. sample code is as follows :
var oSmartBusinessDrillDown = new sap.smartbusiness.ui.control.Kpi({
evaluationId: "E.12345679", //Evaluation ID *mandatory property
});
var oSmartBusinessDrillDownNew = new sap.smartbusiness.ui.control.Kpi({
evaluationId: "E.1234567212", //Evaluation ID *mandatory property
});


var delegate = {
onFilterChange : function(filter) {
jQuery.sap.log.info("fire filterChange event on delegation " + filter);
/**
* you can write your own custom function with it.
*/

}
};

/**
* Adding business delegate accepts two arguments
* 1. delegate object
* 2. Array of events you want to add delegate to - It's optional if you don't give any arguments by default it's going to add delegate to filterChange event.
*/
oSmartBusinessDrillDown.attachOnAfterInitialization(function() {
oSmartBusinessDrillDown.addBusinessDelegate(delegate ); //adding custom delegate
oSmartBusinessDrillDown.addBusinessDelegate(oSmartBusinessDrillDownNew); //adding drilldown another instance as chain.
oSmartBusinessDrillDown.addBusinessDelegate(oSmartBusinessDrillDownNew,["viewTypeChange"]); //if you don't want filterChange event to be delegated provide array of event with event
//you want to add delegate
});

/**
* similarly you can remove business delegate
* here you explicitly need to mention the name of event you want to remove delegate from.
*/
oSmartBusinessDrillDown.attachOnAfterInitialization(function() {
oSmartBusinessDrillDown.removeBusinessDelegate(delegate, "filterChange"); //adding custom delegate
oSmartBusinessDrillDown.removeBusinessDelegate(oSmartBusinessDrillDownNew, "filterChange"); //adding drilldown another instance as chain.
});

 

*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
2 Comments