Technical Articles
How to extend Smart Controls – SmartChart (onSelect event)
Introduction
Hello SAP Community,
As you may know, with the release of Fiori Elements Floorplans (List Report, Analytical List Report, Overview Page) most of the requirements raised by Business Consultants are being solved by using them.
But there are still some cases where the Floorplan doesn’t apply to your needs, and we need to use FreeStyle applications. The features of these kind of apps are that they are built without using the standard templates, but adding manually the controls desired to the fiori application.
If this is your case, It is a good option to use smart Controls for building them due to the reduced amount of code we have to use to show the information.
Also, as these controls are used by a large amount of standard apps, they are constantly being updated, therefore we can be sure that our apps are going to get all the new functionalities released for these controls.
When we refer to smart controls, we are talking about the following sapui5 controls:
From this list, in my experience, I found that the first three of them are the most common ones to use to solve our customer needs.
In case you are curious about how to implement a Smart FilterBar and extend it, check the following link.
For extending Smart Tables there is already information about how to extend it: Link1, Link2, Link3 and Link4.
But regarding Charts, I was not able to find much information about how to extend them, so I am going to detail next how to do it.
Typical Use Cases
In today’s world, most of the information is consumed through images or videos, so we can consider that our users are expecting us to deliver solutions following this trend. One way we could achieve that, is by using Smart Charts. In case you want to see how Smart Charts look like, you can find several examples in the official documentation.
When working with Smart Charts, there are some cases where the standard properties, methods or events of the control may not satisfy your needs. In this cases, we have the possibility to extend the functionality of the standard control.
Typical requirements where we may need to extend the Smart Chart control, could be when customer wants to execute certain actions when clicking a determined bar of you chart, or implement some action like filtering, navigation, send an email, download an excel, show a popup, etcetera.
The way to resolve this is by using the component sap.chart.Chart, inside the definition of the Smart Chart as we are going to see next.
Coding
I am going to assume you have already placed the Smart Chart in your application and it’s working fine.
Just a brief introduction, the only thing you have to define when using Smart Charts is the EntitySet of the oData from which you are going to get the data, and fill some of the preferences you want to apply to the graphic. Then, you have to add the annotation file with the dimensions and measures your graphic is supposed to have. Take a look at this blog if you are interested on how to do that.
<smartchart:SmartChart id="smartChart" enableAutoBinding="true" entitySet="xxxxx" useVariantManagement="false"
smartFilterId="smartFilterBar" persistencyKey="xxxxx" useChartPersonalisation="true" header="" showFullScreenButton="true"
selectionMode="Single" showChartTooltip="true" showDrillBreadcrumbs="false" showDetailsButton="true" showDrillButtons="true">
</smartchart:SmartChart>
In order to extend the Smart Chart with the sap.chart.Chart component, you should add first the namespace to the view.
To do this, go to your View tag and add the xmlns:chart=”sap.chart” tag.
<mvc:View controllerName="xxxxxx" xmlns:mvc="sap.ui.core.mvc" xmlns:smartchart="sap.ui.comp.smartchart"
xmlns:smartTable="sap.ui.comp.smarttable" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:viz="sap.viz.ui5.controls"
xmlns:l="sap.ui.layout" xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns:core="sap.ui.core"
displayBlock="true" xmlns="sap.m" xmlns:chart="sap.chart">
After we have added the namespace to the View tag, we have to indicate the Smart Chart that we are going to extend the sap.chart.Chart component used by it for rendering the graphic.
To be able to extend the Smart Chart, we have to add component sap.chart.Chart as we have mentioned previously.
<smartchart:SmartChart id="smartChart" enableAutoBinding="true" entitySet="xxxxx" useVariantManagement="false"
smartFilterId="smartFilterBar" persistencyKey="xxxxx" useChartPersonalisation="true" header="" showFullScreenButton="true"
selectionMode="Single" showChartTooltip="true" showDrillBreadcrumbs="false" showDetailsButton="true" showDrillButtons="true">
<chart:Chart id="idcolumn" width="100%" selectData="onSelect" deselectData="onDeselect" renderComplete="onRenderComplete">
</chart:Chart>
</smartchart:SmartChart>
As you can see, in this case we have configured three different event handlers to manage the events selectData, deselectData and renderComplete of the sap.chart.Chart component.
Keep in mind that these events were not available in the standard Smart Chart control, and we were able to introduce them by extending the controller.
Finally, we have to add the three methods indicated in the xml view in the controller logic, and code the logic needed to execute the tasks we want.
Event onSelect:
//Method executed when clicking on a bar of the graphic
onSelect: function (oEvent) {
//Get SmartFilterBar
var oGlobalFilter = this.getView().byId("yourId--smartFilterBar");
var filterValue = oEvent.mParameters.data[0].data.<yourProperty>;
var oDefaultFilter = {
"yourProperty": filterValue
};
//Set SmartFilterBar initial values
oGlobalFilter.setFilterData(oDefaultFilter);
oGlobalFilter.fireSearch();
}Event onDeselect:
//Method executed when deselecting a bar of your graphic
onDeselect: function (oEvent) {
//Your logic
}Event onRenderComplete:
//Method executed after graphic is completely rendered
onRenderComplete: function(oEvent){
//<your logic>
}As you have seen, it’s very easy to use this smart control and extend it. In return, the output and functionality you get is quite amazing.
Well I hope the content of this blog is useful for you. Don’t hesitate in comment and share your own experiences.
Best regards,
Emanuel