Dynamic Links using SAPUI5

[former_member222346]

Hi,

I want to create dynamic links tabs using SAPUI5. Can anyone give me an idea of how to start and which control to use or any example?

Regards, Sindhu

[saivellanki]

Hi Sindhuja,

How about TabStrip (for sap.ui.commons)? SAPUI5 SDK - Demo Kit

or IconTabBar (for sap.m)? SAPUI5 Explored

Regards,

Sai Vellanki.

[former_member222346]

Thanks Sai..will try and let u know in case any errors

[former_member222346]

Hi Sai,

This is my code.Please check where I am doing wrong..I am getting a blank screen as output.Just tried a sample

createContent : function(oController) {

  var oTabStrip1 = new sap.ui.commons.TabStrip("Tabstrip1");

  oTabStrip1.setWidth("400px");

  oTabStrip1.setHeight("200px");

  oTabStrip1.setEnableTabReordering(true);

  oTabStrip1.attachClose( function (oEvent) {

  var oTabStrip = oEvent.oSource;

  oTabStrip.closeTab(oEvent.getParameter("index"));

  var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 2, width: "100%"});

  oLayout1.setWidths(['150px']);

  oTabStrip1.createTab("Geology",oLayout1);

  return oTabStrip1;

  });

  }

[Former Member]

Hi Sindhuja,

you are creating Layout and returning tab strip inside CloseTab event.Below lines of code should be outside closeTab event .

var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 2, width: "100%"});

  oLayout1.setWidths(['150px']);

  oTabStrip1.createTab("Geology",oLayout1);

  return oTabStrip1;

Your code should be like this.

var oTabStrip1 = new sap.ui.commons.TabStrip("Tabstrip1");

  oTabStrip1.setWidth("400px");

  oTabStrip1.setHeight("200px");

  oTabStrip1.setEnableTabReordering(true);

  oTabStrip1.attachClose( function (oEvent) {

  var oTabStrip = oEvent.oSource;

  oTabStrip.closeTab(oEvent.getParameter("index"));

  });

  var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 2, width: "100%"});

  oLayout1.setWidths(['150px']);

  oTabStrip1.createTab("Geology",oLayout1);

  return oTabStrip1;

Regards,

Viswa

[former_member222346]

hi Viswa,

I corrected but still I am facing the same..showing a blank page

[Former Member]

Hi Sindhuja,

Any error in the console. Clear the Cache and try.

Regards,

Viswa

[former_member222346]

Hi Viswa,

Console is empty

regards, sindhu

[saivellanki]

Sindhuja,

For attachClose event, you're not closing the braces (check comments in below code). Try this:

createContent : function(oController) {
  var oTabStrip1 = new sap.ui.commons.TabStrip("Tabstrip1");
  oTabStrip1.setWidth("400px");
  oTabStrip1.setHeight("200px");
  oTabStrip1.setEnableTabReordering(true);
  oTabStrip1.attachClose(function (oEvent) {
  var oTabStrip = oEvent.oSource;
  oTabStrip.closeTab(oEvent.getParameter("index"));
  });          //These are the braces that I was talking about
  var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 2, width: "100%"});
  oLayout1.setWidths(['150px']);
  oTabStrip1.createTab("Geology",oLayout1); 
  return oTabStrip1;
  });
}

Regards,

Sai Vellanki.

[former_member222346]

Hi Viswa,

I am getting output for the example given in SAPUI5 demo kit.

But I want to create another tab in inside the tab as dynamic tab links... as in the picture showed in my query....Can u tell me how to do that...

		var oTabStrip1 = new sap.ui.commons.TabStrip("TabStrip1"); oTabStrip1.setWidth("400px"); oTabStrip1.setHeight("200px"); oTabStrip1.attachClose( function (oEvent) { var oTabStrip = oEvent.oSource; oTabStrip.closeTab(oEvent.getParameter("index")); }); var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 2, width: "100%"}); var oTabStrip2 = new sap.ui.commons.TabStrip("TabStrip1"); oTabStrip2.setWidth("400px"); oTabStrip2.setHeight("200px"); oTabStrip2.attachClose( function (oEvent) { var oTabStrip = oEvent.oSource; oTabStrip.closeTab(oEvent.getParameter("index")); }); var oTabStrip3 = new sap.ui.commons.TabStrip("TabStrip1"); oTabStrip3.setWidth("400px"); oTabStrip3.setHeight("200px"); oTabStrip3.attachClose( function (oEvent) { var oTabStrip = oEvent.oSource; oTabStrip.closeTab(oEvent.getParameter("index")); }); oLayout1.createRow(oTabStrip2, oTabStrip3); oTabStrip1.createTab("General Data",oLayout1);   return oTabStrip1;

This is my code I tried for getting dynamic links but I failed in doing so..can u please check my code nd help me in achieving this

[former_member222346]

Hi Sai,

I am getting output for the example given in SAPUI5 demo kit.

But I want to create another tab in inside the tab as dynamic tab links... as in the picture showed in my query....Can u tell me how to do that...

		var oTabStrip1 = new sap.ui.commons.TabStrip("TabStrip1"); oTabStrip1.setWidth("400px"); oTabStrip1.setHeight("200px"); oTabStrip1.attachClose( function (oEvent) { var oTabStrip = oEvent.oSource; oTabStrip.closeTab(oEvent.getParameter("index")); }); var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 2, width: "100%"}); var oTabStrip2 = new sap.ui.commons.TabStrip("TabStrip1"); oTabStrip2.setWidth("400px"); oTabStrip2.setHeight("200px"); oTabStrip2.attachClose( function (oEvent) { var oTabStrip = oEvent.oSource; oTabStrip.closeTab(oEvent.getParameter("index")); }); var oTabStrip3 = new sap.ui.commons.TabStrip("TabStrip1"); oTabStrip3.setWidth("400px"); oTabStrip3.setHeight("200px"); oTabStrip3.attachClose( function (oEvent) { var oTabStrip = oEvent.oSource; oTabStrip.closeTab(oEvent.getParameter("index")); }); oLayout1.createRow(oTabStrip2, oTabStrip3); oTabStrip1.createTab("General Data",oLayout1);   return oTabStrip1;

This is my code I tried for getting dynamic links but I failed in doing so..can u please check my code nd help me in achieving this

[saivellanki]

Sindhuja,

What is the source to create dynamic tabs? Is there any model associated to fetch the data which creates dynamic tabs?

Regards,

Sai Vellanki.

[former_member222346]

I am not planning to fetch data but I want only look and feel...Like...I want my output page to look like this

Only links.....Can we create a tab and pre define a tab under that??? and predefine some links under that tab???

Nothing to do with fetching data....

Or should I use any other control instead of this??

I am thinking this would be fine If I know creating tabs under tabs..and finally tree structure of links under the last stage.

Regards, Sindhu