This blog post shows how to implement SmartVariantManagement for an sap.ui.comp.filterbar.FilterBar.
⚠️ SmartVariantManagement doesn’t work for standalone apps. This blog post is only relevant for applications running in the Fiori Launchpad (SAP Fiori Launchpad Component).
A complete example implementation is available at the following GIT repo: https://github.com/BloggingWithJan/SVMFilterBar
In the following we will go through the different steps to get the SmartVariantManagement functionality running.
Creation of a filter model
First of all we have to take care of the data management. To easily fetch and apply the different variants its recommend to realize the data management with an sap.ui.model.json.JSONModel. The JSONModel should be instantiated right at the beginning in the onInit method in the controller.
//example of an filtermodel with three filteritems(name, classification and createdAt)
this.oFilterModel = new JSONModel({
name: {
value: void 0,
visibleInFB: true
},
classification: {
selectedKeys: void 0,
visibleInFB: true
},
createdAt: {
value: void 0,
visibleInFB: true
}
});
this.getView().setModel(this.oFilterModel, "filterModel");
Import the SVMFilterBar Custom Control
Next create a folder called SVMFilterBar in your application where you store the custom control. Import the SVMFilterBar custom control from the git repo into the folder.
💡 It is best to move the control to a library right from the start. Then it can be reused in any other application.
⚠️ After the files are imported into your application or an library make sure to adjust the namespace in the
FilterBar.extendargument.
Include the SVMFilterBar in the view
To include the control into the view you need to define the namespace path.
<mvc:View ... xmlns:svmFilterBar="sample.SVMFilterBar.control.SVMFilterBar"> </mvc:View>"
Next the SVMFilterBar can be integrated in the view.
<svmFilterBar:SVMFilterBar id="svmFilterBar" persistencyKey="sample.SVMFilterBar.First.svmFilterBar" showFilterConfiguration="true"> </svmFilterBar:SVMFilterBar>
⚠️ It is important to define a unique persistency key. I recommended to use the namespace of the SAPUI5 application plus the view name and the defined id.
Then you can define the different filterItems of the FilterBar. Make sure that the values and properties of each filterItem are binded to your created filter model.
<!--example of filteritems (name, classification and createdAt)-->
<svmFilterBar:filterItems>
<fb:FilterItem name="name" label="{i18n>name}" visibleInFilterBar="{filterModel>/name/visibleInFB}">
<fb:control>
<Input id="name" value="{filterModel>/name/value}" valueLiveUpdate="true"/>
</fb:control>
</fb:FilterItem>
<fb:FilterItem name="classification" label="{i18n>classification}" visibleInFilterBar="{filterModel>/classification/visibleInFB}">
<fb:control>
<MultiComboBox id="classification" selectedKeys="{filterModel>/classification/selectedKeys}">
<core:Item key="A" text="{i18n>aCustomer}"/>
<core:Item key="B" text="{i18n>bCustomer}"/>
<core:Item key="C" text="{i18n>cCustomer}"/>
</MultiComboBox>
</fb:control>
</fb:FilterItem>
<fb:FilterItem name="createdAt" label="{i18n>createdAt}" visibleInFilterBar="{filterModel>/createdAt/visibleInFB}">
<fb:control>
<DatePicker id="createdAt" dateValue="{filterModel>/createdAt/value}"/>
</fb:control>
</fb:FilterItem>
</svmFilterBar:filterItems>
Fetch & Apply methods
Now that we have integrated the SVMFilterBar into our view and binded everything to the model we have to care about the data synchronisation between the system and the application. Since our data management is completely based on our model, this is quite easy to achieve.
⚠️ The data is saved as a JSON string. Objects like JS dates are converted to date strings. When applying the data, we have to convert the date strings back into JS date objects. In this example this is achieved via
_adjustDatesForSVM
/**
* @description functions gets called when saving a variant
* return the variant representation - send to system
* @returns {object} JSON object - FilterModelData
*/
onFetchData: function () {
return this.oFilterModel.getData();
},
/**
* @description the function is called when a variant must be applied. functions receives all data via JSON, as initially provided by the fetch function.
* applying the variant data to the filtermodel - retrieve from system
* @param {object} oVariantContext
*/
onApplyData: function (oVariantContext) {
var oApplyData = this._adjustDatesForSVM(oVariantContext);
this.oFilterModel.setData(oApplyData);
},
/**
* @description convert date string to date
* @param {object} oVariantContext
*/
_adjustDatesForSVM: function (oVariantContext) {
if (oVariantContext.createdAt.value) {
oVariantContext.createdAt.value = new Date(oVariantContext.createdAt.value);
}
return oVariantContext;
}
Connect everything in the controller
Finally we have to put everything together. The fetch and apply methods have to be registered. Furthermore a variant can only be saved after it’s modified. For that we apply a propertyChange event to our filtermodel. As soon as a property changes the variant gets the modified flag. Paste this coding into the onInit method of the controller.
//initialize SVMFilterBar
this._fnFilterPropertyChange = function (oEvt) {
var oVariantManagement = this.getView().byId("svmFilterBar").getVariantManagement();
if (oVariantManagement) {
oVariantManagement.currentVariantSetModified(true);
}
};
this.oFilterModel.attachPropertyChange(this._fnFilterPropertyChange.bind(this));
this.getView().byId("svmFilterBar").fireInitialise();
this.getView().byId("svmFilterBar").registerFetchData(this.onFetchData.bind(this);
this.getView().byId("svmFilterBar").registerApplyData(this.onApplyData.bind(this);
That’s it. The sap.ui.comp.filterbar.FilterBar now has a SmartVariantManagement functionality. To activate the SmartVariantManagement functionality also for the sap.m.Table check out this blog post: sap.m.Table with SmartVariantManagement functionality
Credits
Big credits to the blog post of Alex Necula on which this post is based.