Skip to Content
avatar image
Former Member

how to use Segmented Buttons instead of Icon Tabbar in SAPUI5?

Hi Gurus,

We want to use Segmented Buttons and achieve the functionalities of Icon Tabbar. So, Each buttons of the segment would act like Tabs. Like Segment Control Feature in iOS.

There are 2 completely different tables; table 1, table 2. So, When we click button 1 we will get table 1 and when we will click button 2, we will get table 2. And each table is having routing functionality to go to another page and come back.

Is there any work around for this? Sample code snippet would be very helpful.

Thanks & Regards,

Shubhrajit

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Feb 22, 2017 at 03:07 PM

    Easiest option is to use method setVisible() of the Table control. When button 1 is clicked set table 2 invisible and vice versa.

    ~Rahul

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 20, 2017 at 05:47 PM

    Hi Shubhrajit,

    It's definitely possible. Below is a code snippet - sorry it's in .js but easy enough to convert to XML:

    var oPage1 = new sap.m.Page("page1",{
    				content: new sap.m.Text({ text : "Page 1" })
    			});
    			
    			var oPage2 = new sap.m.Page("page2",{
    				content: new sap.m.Text({ text : "Page 2" })
    			});
    			
    			var oSegButton = new sap.m.SegmentedButton({
    				selectedKey:"one",
    				items: [new sap.m.SegmentedButtonItem({
    							text:"Page 1", 
    							key:"one",
    							press:function(){
    								oApp.to("page1");
    							}
    						}), 
    						new sap.m.SegmentedButtonItem({
    							text:"Page 2",
    							press:function(){
    								oApp.to("page2");
    							}
    						})
    				],
    			});
    			
    			var oApp = new sap.m.App({
    				  pages: [ oPage1, oPage2]
    			});
    			
    			
    			oSegButton.placeAt('content');
    			oApp.placeAt('content');
    
    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Hi Shubhrajit,

      Rahul is correct - you can put both tables in the same page and when the user clicks on button 1, oTable2.setVisible(false) and then when user clicks on button 2, toggle the visibility of both tables.