Variant Management Implementation Guide (UI5)

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:View xmlns: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“ >

<App id=“app”>

<Page title=“Variant Management” navButtonPress=“onNavBack” showNavButton=“true”>

<content>

      <v:VariantManagement id=“vm” select=“onSelect” save=“onSave” enabled=“true” manage=“onManage”

                         showExecuteOnSelection=“true” showShare=“false” variantItems=“{/VariantSet}”>

<v:variantItems>

<v:VariantItem text=“{VAR_NAME}” key=“{VAR_KEY}”> </v:VariantItem>

            </v:variantItems>                             

      </v:VariantManagement>

                            

<fb:FilterBar id=“fb” search=“onGo” initialise=“initialise”>

<fb:filterItems>

      <fb:FilterItem name=“A” label=“FirstProfile”>

      <fb:control>

<Input id=“firstProfile” value=“{selection>/FIRST_PROFILE}” type=“Text” placeholder=“First Profile …”

showSuggestion=“true” showValueHelp=“true” valueHelpRequest=“firstProfileValueHelp” />

      </fb:control>

      </fb:FilterItem>

    

<fb:FilterItem name=“B” label=“Second Profile”>

      <fb:control>

      <Input id=“secondProfile” value=“{selection>/SECOND_PROFILE}” type=“Text” placeholder=“Second Profile …”

showSuggestion=“true” showValueHelp=“true” valueHelpRequest=“secondProfileValueHelp”></Input>

      </fb:control>

      </fb:FilterItem>

      <fb:FilterItem name=“C” >

      <fb:control>

      <CheckBox id=“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);

         }

}else if (!modelData){
          sap.ui.getCore().byId(“idPunter1”).byId(“vm”).currentVariantSetModified(true);

         }

           else if (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