Skip to Content
0

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

Feb 20, 2017 at 01:39 PM

262

avatar image
Former Member

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

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

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

~Rahul

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member
Feb 20, 2017 at 05:47 PM
0

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');
Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Sarah,

Thanks for the response. But my requirement is that, when I click on button 1 it will show table 1 and Button 2 will display table 2. When we click on the line item of table 1 it will goto next page.

So my question is when we click on button 1 how to display only table 1, not table 2.

Thanks,

Shubhrajit

0
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.

1