Overview -
The variant management control allows users to load, save, and change variants. You can use variant management with filter bar. The filter settings consist of selection fields, their filter parameters, and layout, But this blog refers to a variant management that allows users to load, save, and change variants without interacting filter bar.
Biggest challenge in such implementation of variant management is to enable save button, for which i have used "currentVariantSetModified(true);"
Here is the step by step guide to implement such variants -
I have created following view to implement Variant Management.
This view has two controls
- Filter bar with two input fields and one checkbox.
- Variant management.
Variant items are bound with OData service So the data is coming from database table.
View
Below is the code to create view as shown in screenshot.
<core:Viewxmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"
xmlns:fb="sap.ui.comp.filterbar"xmlns="sap.m"xmlns:l="sap.ui.layout"
xmlns:v="sap.ui.comp.variants"controllerName="scn.Punter"
xmlns:html="http://www.w3.org/1999/xhtml">
<Appid="app">
<Pagetitle="Variant Management"navButtonPress="onNavBack"showNavButton="true">
<content>
<v:VariantManagementid="vm"select="onSelect"save="onSave"enabled="true"manage="onManage"
showExecuteOnSelection="true"showShare="false"variantItems="{/VariantSet}">
<v:variantItems>
<v:VariantItemtext="{VAR_NAME}"key="{VAR_KEY}"></v:VariantItem>
</v:variantItems>
</v:VariantManagement>
<fb:FilterBarid="fb"search="onGo"initialise="initialise">
<fb:filterItems>
<fb:FilterItemname="A"label="FirstProfile">
<fb:control>
<Inputid="firstProfile"value="{selection>/FIRST_PROFILE}"type="Text"placeholder="First Profile ..."
showSuggestion="true"showValueHelp="true" valueHelpRequest="firstProfileValueHelp"/>
</fb:control>
</fb:FilterItem>
<fb:FilterItemname="B"label="Second Profile">
<fb:control>
<Inputid="secondProfile"value="{selection>/SECOND_PROFILE}"type="Text"placeholder="Second Profile ..."
showSuggestion="true"showValueHelp="true"valueHelpRequest="secondProfileValueHelp"></Input>
</fb:control>
</fb:FilterItem>
<fb:FilterItemname="C">
<fb:control>
<CheckBoxid="critical"selected="{selection>/CRITICAL}" text="Critical"/>
</fb:control>
</fb:FilterItem>
</fb:filterItems>
</fb:FilterBar>
</content>
</Page>
</App>
</core:View>
Controller
sap.ui.controller("scn.Punter", {
onInit : function() {
var oModel = new sap.ui.model.json.JSONModel();
oDataModel = new sap.ui.model.odata.ODataModel("https://xxxxxx.xxx.sap.corp:xxxxx/sap/opu/odata/xxxxxx/xxxxx_xxxxxxxx_SRV/");
oDataModel.read("VariantSet",null,null,true,function(oData, response){
oModel.setData({VariantSet : oData.results});
}, function(err) {
alert("Service Failed");
});
sap.ui.getCore().setModel(oModel);
var oModelSelection = new sap.ui.model.json.JSONModel();
oModelSelection.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
sap.ui.getCore().setModel(oModelSelection,"selection");
},
onSave : function(oEvent) {
jQuery.sap.require("sap.m.MessageToast");
var params = oEvent.getParameters();
if (params.overwrite){
//Get Values from selection screen
var parametersValue = this.getParametersValue();
//Get selected Variants Data
var selectedKey = oEvent.getSource().getSelectionKey();
var bindingPath = oEvent.getSource().getItemByKey(selectedKey).getBindingContext().getPath();
var modelData = sap.ui.getCore().byId("idPunter1").byId("app").getModel().getProperty(bindingPath);
var save = Object.create(null);
save.FIRST_PROFILE = parametersValue.firstProfile;
save.SECOND_PROFILE = parametersValue.secondProfile;
save.CRITICAL = parametersValue.critical;
save.VAR_KEY = modelData.VAR_KEY;
save.VAR_NAME = modelData.VAR_NAME;
$.extend( modelData, save );
sap.ui.getCore().byId("idPunter1").byId("app").getModel().refresh();
oDataModel.update("VariantSet('"+save.VAR_KEY+"')", save, null,function(oData, response){
}, function(err) {
alert("Service Failed");
});
}
else{
var parametersValue = this.getParametersValue();
var newEntry = Object.create(null);
newEntry.VAR_NAME = params.name;
newEntry.VAR_KEY = params.key;
newEntry.FIRST_PROFILE = parametersValue.firstProfile;
newEntry.SECOND_PROFILE = parametersValue.secondProfile;
newEntry.CRITICAL = parametersValue.critical;
//Updating database via Odata
oDataModel.create("VariantSet",newEntry, null,function(oData, response){
//Updating Json Model Local Data
var Data = sap.ui.getCore().byId("idPunter1").byId("app").getModel().getData().VariantSet;
Data.push(newEntry);
sap.ui.getCore().byId("idPunter1").byId("app").getModel().refresh();
}, function(err) {
alert("Service Failed");
});
}
var sMessage = "New Name: " + params.name + "\nDefault: " + params.def + "\nOverwrite:" + params.overwrite + "\nSelected Item Key: " + params.key;
sap.m.MessageToast.show(sMessage);
},
onManage : function(oEvent) {
"use strict";
jQuery.sap.require("sap.m.MessageToast");
var params = oEvent.getParameters();
var renamed = params.renamed;
var deleted = params.deleted;
//rename backend data
if (renamed){
renamed.forEach(function(rename){
oDataModel.update("/VariantSet('"+rename.key+"')",
{VAR_KEY: rename.key,
VAR_NAME:rename.name}, null, function(){
alert("Update successful");
},function(){
alert("Update failed");});
});
}
var sMessage = "renamed: \n";
for (var h = 0; h < renamed.length; h++) {
sMessage += renamed[h].key + "=" + renamed[h].name + "\n";
}
//delete backend data
if (deleted){
deleted.forEach(function(remove){ oDataModel.remove("/VariantSet('"+remove+"')", null, function(){
alert("Delete successful");
},function(){
alert("Delete failed");});
});
}
sMessage += "\n\ndeleted: ";
for (var f = 0; f < deleted.length; f++) {
sMessage += deleted[f] + ",";
}
sap.m.MessageToast.show(sMessage);
},
onSelect : function(oEvent) {
var selectedKey = oEvent.getSource().getSelectionKey();
if(selectedKey === "*standard*"){
var modelData={};
var model=sap.ui.getCore().byId("idPunter1").byId("app").getModel("selection");
model.setData(modelData);
model.refresh();
}
else{
var bindingPath = oEvent.getSource().getItemByKey(selectedKey).getBindingContext().getPath();
var modelData=sap.ui.getCore().byId("idPunter1").byId("app").getModel().getProperty(bindingPath);
var model=sap.ui.getCore().byId("idPunter1").byId("app").getModel("selection");
model.setData(modelData);
if(model.oData.CRITICAL == "false" || model.oData.CRITICAL == false ){
model.oData.CRITICAL = false;
}
else
model.oData.CRITICAL = true;
model.refresh();
}
var sMessage = "New Variant Selected:"+selectedKey;
sap.m.MessageToast.show(sMessage);
},
onAfterRendering: function() {
var controlIdArray="firstProfile secondProfile critical".split(" ");
controlIdArray.forEach(function(controlId){
var control=sap.ui.getCore().byId("idPunter1").byId(controlId);
control.addEventDelegate({
onfocusout : function() {
var selectedKey = sap.ui.getCore().byId("idPunter1").byId("vm").getSelectionKey();
var bindingPath = sap.ui.getCore().byId("idPunter1").byId("vm").getItemByKey(selectedKey)&&sap.ui.getCore().byId("idPunter1").byId("vm").getItemByKey(selectedKey).getBindingContext().getPath();
var modelData=sap.ui.getCore().byId("idPunter1").byId("app").getModel().getProperty(bindingPath);
var map = {
critical : "CRITICAL",
firstProfile : "FIRST_PROFILE",
secondProfile : "SECOND_PROFILE",
};
if(controlId==="critical"){
if(modelData["CRITICAL"] !== control.getSelected()){ sap.ui.getCore().byId("idPunter1").byId("vm").currentVariantSetModified(true);
}
}elseif (!modelData){
sap.ui.getCore().byId("idPunter1").byId("vm").currentVariantSetModified(true);
}
elseif (modelData[map[controlId]] !== control.getValue()){ sap.ui.getCore().byId("idPunter1").byId("vm").currentVariantSetModified(true);
}
}
});
});
},
getParametersValue: function (){
var parametersValue = Object.create(null);
parametersValue.firstProfile = sap.ui.getCore().byId("idPunter1").byId("firstProfile").getValue();
parametersValue.secondProfile = sap.ui.getCore().byId("idPunter1").byId("secondProfile").getValue();
parametersValue.critical = sap.ui.getCore().byId("idPunter1").byId("critical").getSelected();
return parametersValue;
},
});
Thanks
- Tapesh Syawariya