cancel
Showing results for 
Search instead for 
Did you mean: 

I have created a tabstrip and added 4 tabs to it. How to go to particular view on clicking each tab.

Former Member
0 Kudos

I have created a tabstrip and added 4 tabs to it. How to go to particular view on clicking each tab.This is the code:

var tabstrip1 = new sap.ui.commons.TabStrip("ts1",{

tabs:[

    new sap.ui.commons.Tab("t1",{text:"KPI"}),

    new sap.ui.commons.Tab("t2",{text:"Data" }),

    new sap.ui.commons.Tab("t3",{text:"Config"}),

    new sap.ui.commons.Tab("t4",{text:"Admin"})

      ]

});

Suppose I click on tab with id "t1".. it must go to that view..how to do that. I came across attachSelect method under tabstrip.. how to use it or are there any other methods to implement the same.

Thanks in advance

Accepted Solutions (0)

Answers (3)

Answers (3)

juancarlosorta
Participant
0 Kudos

I hope this helps:

tabstrip1.attachSelect(function() { ... } Example:


JS Bin - Collaborative JavaScript Debugging

Regards

Former Member
0 Kudos

Hi Vinay,

What is the "view" you are referring to ? If you are referring to a different page then you to navigate to your view on click of the tab (by using select method) either by routing or by app's nav method.

If you want to remain in the same page and replace the content of that tab, then it is automatically handled by the tab control.

You just have to write what content you want to display:

new sap.ui.commons.TabStrip("ts1",{

  tabs:[

     new sap.ui.commons.Tab("t1",{text:"KPI",content:[ new sap.ui.commons.Button({text:"Btn 1"})]}),

     new sap.ui.commons.Tab("t2",{text:"Data",content:[ new sap.ui.commons.Button({text:"Btn 2"})]}),

     new sap.ui.commons.Tab("t3",{text:"Config"}),

     new sap.ui.commons.Tab("t4",{text:"Admin"})

       ]

  });

Thanks and Regards,

Vinuta

Former Member
0 Kudos

Hi Vinay,

This may be helpful :TabStrip - SAPUI5 Demo Kit

Regards,

Devaarth