Dynamic Tab Creation in sap.ui.commons.TabStrip

[sanjoy0308]

Requirement is based on odata output show linked children tabs corresponding to the parent tab. These children numbers are dynamic depending upon parent's data configuration. Also we have to go each tab and give some inputs, then save all tabs together in one save. Also user can move to any tab, but entered data should not be lost. Now check the solution below: if(sap.ui.getCore().byId("idParentTabStrip") == null) {

  oTabStrip = new sap.ui.commons.TabStrip("idParentTabStrip", {

  selectedIndex : 0, // int

  tabs : [ new sap.ui.commons.Tab({

  width : "100%", // sap.ui.core.CSSSize

  content : [this.options.tileContainerObj], // sap.ui.core.Control

  title : new sap.ui.core.Title({

  text : "Parent", // string

  icon : "sap-icon://task", // sap.ui.core.URI

  }),

  }) ],

  select : [ function(oEvent) {

  var resultData = null;

  var callSuccess = false;

  _self.syncChildWithParent(oEvent.getSource().getSelectedIndex());

  _self.setIndexOfTab(oEvent.getSource().getSelectedIndex()-1);

  if(_self.options.tabAlreadyClicked.indexOf("idChildTab"+_self.options.indexOfTab) >= 0){

  } else {

  _self.options.tabAlreadyClicked.push("idChildTab"+_self.getIndexOfTab());

  var oTab = sap.ui.getCore().byId("idChildTab"+_self.getIndexOfTab());

  if(oTab != null && sap.ui.getCore().byId("idBarCode") != null) {

  var urlChildDetfromParent = location.protocol+"//"+dynamicHost+":"+dynamicPort+"/sap/opu/odata/XXX/XXX_XXX_XXX/getChildFromParent?$filter=IParentBarcode eq '"

  + sap.ui.getCore().byId("idBarCode").getNumber()

  + "'&$format=json";

  jQuery.ajax({username: sap.ui.getCore().getModel("userModel").getData().username, password: sap.ui.getCore().getModel("userModel").getData().password,

  url : urlChildDetfromParent,

  enableJsonpCallback: true,

  jsonpCallback : 'getJSON',

  contentType : "application/json",

  dataType: "json",

  async: false,

  complete: function(jqXHR,textStatus){

  if(callSuccess){

  data = resultData;

  if(data.d.results.length > 0){

  var i = _self.getIndexOfTab();

  otab = sap.ui.getCore().byId("idChildTab"+i);

  fieldsVal = data.d.results[i];

  _self._buildMandatoryFieldsInTab(fieldsVal);

  }

  }

  },

  success: function(data, textStatus, jqXHR) {

  callSuccess = true;

  resultData = data;

  }

  });

  }

  }

  }, this ]

  });

  }

  var urlChildList = location.protocol+"//"+dynamicHost+":"+dynamicPort+"/sap/opu/odata/XXX/XXX_XXX_XXX/getChildList?$filter=IAllparam eq '"

  + "WW,"+sap.ui.getCore().byId("idYYYcode").getNumber()+","+sap.ui.getCore().byId("idCCCType").getNumber()+","+sap.ui.getCore().byId("idDDDType").getNumber()

  + "'&$format=json";

  jQuery.ajax({username: sap.ui.getCore().getModel("userModel").getData().username, password: sap.ui.getCore().getModel("userModel").getData().password,

  url : urlChildList,

  enableJsonpCallback: true,

  jsonpCallback : 'getJSON',

  contentType : "application/json",

  dataType: "json",

  async: false,

  success: function(data, textStatus, jqXHR) {

  for (var i=0;i<data.d.results.length;i++) {

  if(sap.ui.getCore().byId("idChildCat"+i) == null){

  var oChildPanel = new sap.m.Panel("idChildPanel"+i, {

  width : "100%",

  height : "auto",

  content : [

            new sap.m.Text("idChildCat"+i,

            {

            text : data.d.results[i].ChildCat,

            visible : false

            }),

            new sap.m.Text("idChildCatDesc"+i,

            {

            text : data.d.results[i].Description,

            visible : false

            })

            ], // sap.ui.core.Control

  });

  var oChildTab = new sap.ui.commons.Tab("idChildTab"+i, {

  width : "100%", // sap.ui.core.CSSSize

  content : [oChildPanel], // sap.ui.core.Control

  title : new sap.ui.core.Title({

  text : data.d.results[i].ShortKey, // string

  icon : "sap-icon://task", // sap.ui.core.URI

  }), // sap.ui.core.Title

  });

  if(oTabStrip) {

  oTabStrip.addTab(oChildTab);

  }

  }

  }

  }

  });

  sap.ui.getCore().byId(this.options.pageId).addContent(oTabStrip);

Also the other challenge was that if user inputs one field in any tab, then user has not to enter again in other tabs(parent or child) if fields are same, for that we have one small function named "syncChildWithParent". Prerequisite is common fields are already known here, but code can be changed for unknown matching fields and that part is left to you for comment. Code:

syncChildWithParent : function(index) {

  if(sap.ui.getCore().byId("idParentTabStrip")){

  oTabs = sap.ui.getCore().byId("idParentTabStrip").getTabs();

  var idArray = ["idChildType",

                "idChildThreadOutlet",

                "idChildConn",

                "idChildThreadInlet",

                "idChildManu",

                "idChildDate",

                "idPartNo"];

  for (var i = 0; i < idArray.length; i++) {

  idString = idArray[i];

  parentValue = "";

  childValue = "";

  parentValueUnit = "";

  childValueUnit = "";

  if(sap.ui.getCore().byId(idString)) {

  parentValue = sap.ui.getCore().byId(idString).getNumber();

  parentValueUnit = sap.ui.getCore().byId(idString).getNumberUnit();

  }

  for (var int = 0; int < oTabs.length; int++) {

  if(sap.ui.getCore().byId(idString+int)) {

  childValue = sap.ui.getCore().byId(idString+int).getNumber();

  childValueUnit = sap.ui.getCore().byId(idString+int).getNumberUnit();

  if (parentValue && parentValue != childValue && index > 0){

  sap.ui.getCore().byId(idString+int).setNumber(parentValue);

  sap.ui.getCore().byId(idString+int).setNumberUnit(parentValueUnit);

  if (sap.ui.getCore().byId(idString+int).getNumber() == ""

  || sap.ui.getCore().byId(idString+int).getNumber() == null) {

  sap.ui.getCore().byId(idString+int)

  .setInfoState(sap.ui.core.ValueState.None);

  } else {

  sap.ui.getCore().byId(idString+int)

  .setInfoState(sap.ui.core.ValueState.Success);

  }

  } else if (childValue && sap.ui.getCore().byId(idString) && parentValue != childValue && index == 0){

  sap.ui.getCore().byId(idString).setNumber(childValue);

  sap.ui.getCore().byId(idString).setNumberUnit(childValueUnit);

  if (sap.ui.getCore().byId(idString).getNumber() == ""

  || sap.ui.getCore().byId(idString).getNumber() == null) {

  sap.ui.getCore().byId(idString)

  .setInfoState(sap.ui.core.ValueState.None);

  } else {

  sap.ui.getCore().byId(idString)

  .setInfoState(sap.ui.core.ValueState.Success);

  }

  }

  }

  }

  }

  }

  },

Lastly, this code is tested and run successfully and I am sharing here for reuse.