Liferay is easy: Creating Tabs Using Web-Content /Journal Article in Liferay

In the previous tutorial we see how to embed a Asset Publisher Portlet in Liferay. Today we use the same concept and create a web content which contain 2 tabs and in each tabs we embedded a Asset Publisher portlet. Before reading this blog you must know how to create Structure and Template for Web Content and how to embedded a portlet in web content.

So Lets start this step by step:-

Step 1:-Learn How to Create Tabs
So first we see how to create tabs using YUI.

	<div id="demo">
	<ul>
	<li><a href="#foo">foo</a></li>
	<li><a href="#bar">bar</a></li>
	<li><a href="#baz">baz</a></li>
	</ul>
	<div>
	<div id="foo">
	<p>foo content</p>
	</div>
	<div id="bar">
	<p>bar content</p>
	</div>
	<div id="baz">
	<p>baz content</p>
	</div>
	</div>
	</div>

	<script type="text/javascript">
	YUI().use('tabview', function(Y) {
	var tabview = new Y.TabView({srcNode:'#demo'});
	tabview.render();
	});
	</script>

view raw Tabs.html hosted with ❤ by GitHub

Explanation:-

Here you can see that href value(foo) and div id(foo) are same.
Number of <li> is equal to number of <div>.
For More details you may refer here.

Step 2:-Create Structure
We already know for embedding a Instanceable portlet we required PortletId and Instanceid . So in our structure we create 3 fields Tab Name, PortletId and InstanceId.

Go to Admin->Content->Manage->Structure->Add.
And provide name as Tabs-Structure and Click on Source and paste this:-


	<root available-locales="en_US" default-locale="en_US">
	<dynamic-element dataType="string" indexType="keyword" name="Tab_Name" readOnly="false" repeatable="true" required="true" showLabel="true" type="text" width="small">
	<dynamic-element dataType="integer" fieldNamespace="ddm" indexType="keyword" name="Portlet_Id" readOnly="false" repeatable="false" required="true" showLabel="true" type="ddm-integer" width="small">
	<meta-data locale="en_US">
	<entry name="label">
	<![CDATA[Portlet Id]]>
	</entry>
	<entry name="predefinedValue">
	<![CDATA[]]>
	</entry>
	<entry name="tip">
	<![CDATA[]]>
	</entry>
	</meta-data>
	</dynamic-element>
	<dynamic-element dataType="string" indexType="keyword" name="Instance_Id" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
	<meta-data locale="en_US">
	<entry name="label">
	<![CDATA[Instance Id]]>
	</entry>
	<entry name="predefinedValue">
	<![CDATA[]]>
	</entry>
	<entry name="tip">
	<![CDATA[]]>
	</entry>
	</meta-data>
	</dynamic-element>
	<meta-data locale="en_US">
	<entry name="label">
	<![CDATA[Tab Name]]>
	</entry>
	<entry name="predefinedValue">
	<![CDATA[]]>
	</entry>
	<entry name="tip">
	<![CDATA[]]>
	</entry>
	</meta-data>
	</dynamic-element>
	</root>

view raw Tab-Structure.xml hosted with ❤ by GitHub

Now Click on view you can see the Structure as:-

Explanation:-

For Tab Name Repeatable is Yes so that we can create multiple tabs.
PortetId and InstanceId fields are inside Tab Name so that each tab has instanceId and PortletId which is useful to embedded different Asset Publisher in different tabs.

Step 3:-Create Tempelate

Go to Admin->Content->Manage->Templates->Add.
And provide name as Tabs-Template .Select structure as Tab-structure which is created in step 2 and from language select velocity. Now paste this:-

	<div id="demo">
	<ul>
	#if (!$Tab_Name.getSiblings().isEmpty())
	#foreach ($cur_Tab_Name in $Tab_Name.getSiblings())
	<li><a href="#$cur_Tab_Name.getData()">$cur_Tab_Name.getData()</a></li>
	#end
	#end
	</ul>
	<div>
	#if (!$Tab_Name.getSiblings().isEmpty())
	#foreach ($cur_Tab_Name in $Tab_Name.getSiblings())
	<div id="$cur_Tab_Name.getData()">
	<runtime-portlet name="$cur_Tab_Name.Portlet_Id.getData()" instance="$cur_Tab_Name.Instance_Id.getData()" queryString=""/>
	</div>
	#end
	#end
	</div>
	</div>

	<script type="text/javascript">
	YUI().use('tabview', function(Y) {
	var tabview = new Y.TabView({srcNode:'#demo'});
	tabview.render();
	});
	</script>

view raw Tab-Template.xml hosted with ❤ by GitHub

Explanation:-

Here we are iterating the tab name as we declare this as Repeatable coz we don't know on run time how tabs are created.
We also give href value and div id same as tab name.
For content inside a div we embedded a portlet by using portletId and instanceId .

Step 4:-Create Web Content using Structure and Tempelate
Go to Admin->Content->Web Content->Add->Tab-Structure.
Provide name as Multiple Mobiles .

Note:-
If you already have Asset Publisher Portlet than use the instance Id .Otherwise fill in the form and Asset Publisher portlet Created with id Sony and Nokia.

Step 5:-Check Output
Now Add this Multiple Mobiles portlet on the page and configure the Asset Publisher portlet in Nokia tab for showing Web Contents that have Nokia Category and Asset Publisher portlet in Sony tab for showing Web Contents that have Sony Category.