Show children pages as TABs of Parent page

RE: Show children pages as TABs of Parent page

2009-06-19T08:44:52Z

Just another note, click on friends and then via instant messaging I'll give you username and password into demo collaboration portal, which is probably very similar to what you are doing right now. So you can browse around and see how tabbed navigation is organized.

RE: Show children pages as TABs of Parent page

2009-06-19T08:28:05Z

You have to create 'TAB' article on every page you point to. For example:

PAGE 1 will have 2 portlets, one below another:
portlet 1, TAB-1 article will have the following html content:

<ul>
<li class="current"><a href="#">Calendar</a></li>
<li> <a href="/link-to-page-2">Wiki</a></li>
</ul>

portlet 2, standard Calendar portlet

PAGE 2 will have 2 portlets, one below another:
portlet 1, TAB-2 article will have the following html content:

<ul>
<li><a href="/link-to-page-1">Calendar</a></li>
<li class="current"> <a href="#">Wiki</a></li>
</ul>

portlet 2, standard Wiki portlet

Click on each tab on my examples, grab the html source, and see how content of <ul> ... </ul> changes from page to page.
If problems, you are welcome to ask again.

NOTE: you have to have TWO TAB ARTICLES!

RE: Show children pages as TABs of Parent page

2009-06-19T07:59:04Z

Hi Victor,

We tried in this way but when click on tabs, its navigating to the portlets but i need to show the portlet and under the selected tab.

Thanks,
Ram.

RE: Show children pages as TABs of Parent page

2009-06-03T09:17:49Z

Li, if you need this setup once, you may well use a trick with Journal (Web) content portlet.
Place article at the top of the page where you need those navigation tabs, and insert html code, like:

<ul class="ui-tabs">
<li class="current"> <a href="/url/tab1">Tab 1</a></li>
<li> <a href="/url/tab2">Tab 2</a></li>
</ul>

On another (reciprocal) page you put another Journal (Web) Content portlet, and insert similar code, like:

<ul class="ui-tabs">
<li> <a href="/url/tab1">Tab 1</a></li>
<li class="current"> <a href="/url/tab2">Tab 2</a></li>
</ul>

You can see the only difference between those two articles is where class="current" is located.

If you have to do it in many places, you may try to adjust your theme to build those tabs dynamically, or develop own navigation portlet.
In our case we do it so often, especially in collaboration setups, that we had to develop own group-wise tab navigator. I have some information published on public internet, you may follow similar approach, it is at
http://www.myoffice24x7.com/web/manual/portlets/navigation/my-tabs.
Fairly simple stuff, but feel free to ask if something is not so obvious.

Show children pages as TABs of Parent page

2009-06-02T18:20:59Z

I'm looking for a solution that can show a groups of TABs in a page, and each TAB can have its own portlets.

I thought Children pages can serve the purpose, but could not find any clue on how to make it work. Shall I write my own theme to deal with it?

If children pages is not a solution, then is there any other way to implement what I'm looking?

Here's a bit more details about what I'm trying to do. I need a page to show performance info of a server. It's a new page whcih user can access from the navigation TABs.
In this page, I would like to show two views of the info. One is a chart, another is a grid. I already have two portlets that can do a chart and a grid respectively. Now I would like to use two TABs in the same page, each TAB will show one portlet.

Thank you in advance!

Li