How to create multiple tabs in screen?

Forum > Ask Anything > How to create multiple tabs in screen?

n/A

postedon April 9, 2014at 12:41 PM

How to create multiple tabs in screen?
I have seen all the details mentioned in tutorial but was not able to create screen with muitiple tab.
Also was not able to display the content in those tab.
Please let me knoe the solution to go ahead.

Simon Umbricht

repliedon April 11, 2014at 10:27 AM

Hi Piyush,

The way the tab boxes work is that you have one TabBox with multiple TabContents inside. Each TabContent represents one tab displayed to the user (unless you put TabContents inside of a loop, which would also be possible).

In order to make this work, you'll have to do the following:
- Create a TabBox with multiple TabContents inside
- give the TabBox a unique htmlId
- give each of the TabContents a unique Id
- create a String variable $selectedTab and put that as the "Selected Tab ID Expression" on the TabBox

In general you shouldn't need any actions on the TabBox or TabContent unless you want to create some more advanced functionality, so best remove the ones you already have.

How this all ties together: to determine the currently selected tab, the TabBox will evaluate the value of $selectedTab and compare it against the Ids of all TabContents. The first matching one will be the selected tab. When you click a tab title, $selectedTab will automatically be updated to the Id of that tab.

Let me know if it's still not working.

Regards,
Simon

n/A

repliedon April 12, 2014at 7:46 AM

Hi Simon,

I have followed the steps you have mentioned
I have created selectedTab as a string variable, given unique html id to each of the tab content under tab box.
And I am able to see the tab contents of first tab.
But the moment I click on another tab it gives me "Ajax updare area error:403 forbidden".
Also on server I got following error:

2014-04-12 11:07:00,746 WARN com.nm.security.AccessControlHandler - Access Token parameter not found: accessToken [ url=/admin/screens/jsp/preview.jsp, referer=http://localhost:8080/admin/screens/jsp/preview.jsp?id=HomeScreen&show_tabindex=false&show_spaces=false&adminMode=false&helpername=screenEditorHelper-HomeScreen-null-1397280311818-false&versionFilter=HeadFilter-permanent&forcereload=1397280986243&accessToken=FE7500DC ]

Could you please answer that how should I resolve the issue?

Please sign in to add a reply