Skip to Content

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.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply