Skip to Content


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.

New1.png

Variant items are bound with OData service So the data is coming from database table.

SCN2.png

SCN3.png

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

To report this post you need to login first.

22 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member

    Hi Tapesh,

    We are trying to implement variant management in our

    project.So We are referring to the code example.



    We have implemented it in the same way as explained,

    but while showing the variant set it is showing us only one value

    but we have four variants.

    The result is same in case of odata binding as well as in json binding


    Please guide us on the same


    Regards,

    Lekhak Patil

    (0) 
    1. Former Member Post author

      I have used Odata Service to store variant data but you can also through use Personalization fiori container using ushell.
      oPersonalizationService = sap.ushell.Container.getService("Personalization")

      (0) 
        1. Former Member

          Hi Tapesh,

          How the persistence works with below service? does this call a standard services?

          sap.ushell.Container.getService("Personalization")

          Please clarify?

          Regards,

          BG

          (0) 
        1. Michael Appleby

          Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

          NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

          Thanks, Mike (Moderator)

          SAP Technology RIG

          (0) 
  2. Former Member

    Does ui5 Variant managenet act as save variants in GUI ? If i save a variant for a filter in Ui5 for user1 , can other users access it or not ?

    (0) 
      1. Former Member

        Hi Tapesh,

        How the persistence works with below service? does this call a standard services?

        sap.ushell.Container.getService("Personalization")

        Please clarify?

        Regards,

        BG

        (0) 
        1. Former Member Post author

          persistence i have not used, It works when you are working with smart controls.

          sap.ushell.Container this will work only when you run throgh fiori container, or when you try to run your application in fiori sandbox, Otherwise you will get error sap.ushell not found

           

          (0) 
  3. Former Member

    Nice blog Tapesh.

    We have a requirement to implement variant management where we need to save tiles as variants with selection within that gets execution on navigation.

    Example: We have an Orders application with master list containing ‘Filter / Grouping / Sort’ options. When we try to save the variant with specific selections, a new tile should be created and on navigating to the newly created tile, the variant should be applied.

    Above scenario is possible ? If yes, can you please point the steps we should follow ?

    Thanks.

     

    (0) 
  4. Holger Schäfer

    Hi Tapesh,
    any reason why you did not use the LREP Service?

    Concerning storing Variants inside AS ABAP, there is the out-of-the-box LREP services inside AS ABAP which is part of the SAPUI5 Flexibility services.

    We had a customer szenario, where this services has not been available (NW 7.01) and especially for this szenario, we used the FakeLrepConnector (like seen in the samples)

    sap/ui/fl/FakeLrepConnectorLocalStorage

    and have overwritten the custom storage solution in place.

    Doing it this way, we have been compatible with further updates on UI5 core.

    But if you are running on an up-to-date AS ABAP, the corresponding SAP/BC/LREP service will automatically handle this for you without any additional coding.

    https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.4.19/en-US/a8e55aa2f8bc4127923b20685a6d1621.html

     

    Is your solution used in prior to LREP?

    Regards Holger

    (0) 
    1. Former Member

      Hi Holger,

      I have the same requirements as in in the Guide above. I want to implement the Variant Management for my Filterbar using Lrep (flexibilty Service), but can’t figure out how to get it done. I can only find examples for Smart-Elements, but im not using Smart-Elements. Is it possible that you could provide an example? I would really appreciate.

       

      Best Regard Vura

      (0) 
      1. Holger Schäfer

        The FakeLREP needs to be intialized like this

        FakeLrepConnectorLocalStorage.enableFakeConnector({
            sInitialComponentJsonPath: jQuery.sap.getModulePath("ips.ac.lrep.component-changes") + ".json"
        });
        
        The default variants needs to be stored in a file inside the folder lrep/component-changes.json
        
        The file should look like this
        
        
        {
            "changes": [
                {
                    "fileName": "Default_addFavorite",
                    "fileType": "change",
                    "changeType": "addFavorite",
                    "content": {
                        "key": "*standard*",
                        "visible": true
                    },
                    "selector": {
                        "persistencyKey": "PV_Projects_PKey"
                    },
                    "layer": "VENDOR",
                    "originalLanguage": "DE"
                },
                {
                    "fileName": "Project_OpenUsers_page",
                    "fileType": "variant",
                    "changeType": "page",
                    "content": {
                        "SF_Projects_PKey": {
                            "version": "V2",
                            "filterbar": [
                                {
                                    "group": "Project",
                                    "name": "City",
                                    "partOfCurrentVariant": true,
                                    "visibleInFilterBar": true,
                                    "visible": true
                                }
                            ],
                            "filterBarVariant": "{\"_BASIC_SEARCH_FIELD\":null,\"ActivityGuid\":{\"value\":null,\"ranges\":[],\"items\":[]},\"AddressDescription\":{\"value\":null,\"ranges\":[],\"items\":[]},\"AddressTitle\":{\"value\":null,\"ranges\":[],\"items\":[]},\"City\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ContactPerson\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ContactPersonEmail\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ContactPersonTelephone\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ContainerGuid\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ContainerSubType_Id\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ContainerSubType_Value\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ContainerType_Id\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Country\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Country_Id\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Country_Value\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Description\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ExternalId\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Guid\":{\"value\":null,\"ranges\":[],\"items\":[]},\"HouseNumber\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ImageFileGuid\":{\"value\":null,\"ranges\":[],\"items\":[]},\"IssuedToClientGuid\":{\"value\":null,\"ranges\":[],\"items\":[]},\"IssuedToClientName01\":{\"value\":null,\"ranges\":[],\"items\":[]},\"IssuedToClientName02\":{\"value\":null,\"ranges\":[],\"items\":[]},\"IssuedToEmployeeGuid\":{\"value\":null,\"ranges\":[],\"items\":[]},\"IssuedToUsername\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Latitude\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Longitude\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Name01\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Name02\":{\"value\":null,\"ranges\":[],\"items\":[]},\"ObjectType_Id\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Place\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Region\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Status_Id\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Street\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Title\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Visibility_Id\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Visibility_Value\":{\"value\":null,\"ranges\":[],\"items\":[]},\"Zip\":{\"value\":null,\"ranges\":[],\"items\":[]},\"_CUSTOM\":{\"ObjectType_Value\":[\"PRIVATE\"],\"Status_Value\":[],\"ContainerType_Value\":[\"APARTMENT\"]}}"
                        },
                        "ST_Projects_PKey": {
                            "columns": {
                                "columnsItems": [
                                    {
                                        "columnKey": "Status_Value",
                                        "visible": false
                                    }
                                ]
                            },
                            "group": {
                                "groupItems": [
                                    {
                                        "columnKey": "City",
                                        "operation": "GroupAscending",
                                        "showIfGrouped": true
                                    }
                                ]
                            }
                        }
                    },
                    "selector": {
                        "persistencyKey": "PV_Projects_PKey"
                    },
                    "layer": "VENDOR",
                    "texts": {
                        "variantName": {
                            "value": "IPS Preset",
                            "type": "XFLD"
                        }
                    },
                    "originalLanguage": "DE"
                },
                {
                    "fileName": "Project_OpenUsers_addFavorite",
                    "fileType": "change",
                    "changeType": "addFavorite",
                    "content": {
                        "key": "Project_OpenUsers_page",
                        "visible": true
                    },
                    "selector": {
                        "persistencyKey": "PV_Projects_PKey"
                    },
                    "layer": "VENDOR",
                    "originalLanguage": "DE"
                }
            ],
            "settings": {
                "isKeyUser": true,
                "isAtoAvailable": false,
                "isProductiveSystem": false
            }
        }
        
        To easily allow creatation of defaults, you should save the relevant variants using SmartVariantManagement Widget.
        Doing it this way, the Variants are stored inside browsers LocalStorage (chrome F12 -> Application ->LocalStorage).
        
        You can copy the relevant settings from here to the corresponding json file.
        
        I also removed some unnessasary settings inside upper example to make it easier to support.
        
        Now if browser starts, your custom settings will be load from json and custom settings will be merged from local storage.
        This is quite nice if LREP service is not available but you still want to use P13N for SmartFilter, SmartTable, etc.
        
        Besides the Variant data itself, the json also needs an favorite entry to show your custom data (see "changeType": "addFavorite")
        
        Hope that helps.
        
        Regards Holger
        (0) 
  5. Tanveer Shaikh

    Hi Tapesh –

    Thank you for excellent blog –

    I created a shared variant and want to make that shared variant as default variant for all other users. Also have a use case where need to have a logic to dynamically set variant based on some conditions.  Is there a way to get a varinat set in OnInit() funtion in conroller.js ?

    I posted a question in question in Q&A too.. But helpful no responses. Any hint is greatly appriciated.

    (https://answers.sap.com/questions/447876/sapui5-set-default-variant.html?childToView=447897#answer-447897)

    Thanks,

    Tanveer

    (0) 

Leave a Reply