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.


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:-


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:-


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.



Hope this will Help....

Related Post:-