CODEWITHSUNDEEP
javaliferayliferay-6liferay-themeliferay-aui
Mani
Mani

Reputation: 293

Left Navigation Menu :Liferay 6.2

I am in the process of migrating my current web application to liferay.I have requirement to customize left navigation bar according to my app. For e.g. I have left side vertical navigation menu with items as below

Home
Company Info
Revenue Details

When clicked on each of the menu items separate portlet would be opened in the right content pane. For instance,company information should go to to the custom company portlet I have created .

Could you please help me understand how can I acheive this in Liferay 6.2? Thank you.

Upvotes: 2

Views: 4846

Answers (3)

Sravan Kumar
Sravan Kumar

Reputation: 253

If you want the Left Navigation then use 30-70 Layout and use SiteMap portlet on left side

Upvotes: 0

Prakash K
Prakash K

Reputation: 11698

  1. If you want to display portlets deployed on a page using left navigation bar then you can use Panel Pages. Search for "Panel Pages" section on this page.
  2. If you want to have the liferay page navigation itself as a vertical bar instead of horizontal then you can create Theme to style the navigation. navigation.vm is the file you are looking for.

As per the comment below, here are my suggestions:

Suggestion I

  1. Use 30-70 layout.
  2. On the 70-side (right-hand) you can put all your portlets one after another.
  3. On the 30-side (left-hand) you can put a web-content display portlet.
  4. So in the web-content display portlet, in the editor you can use Source tab to include javascript/css/html for the clickable links to portlet.
  5. There are various javascript libraries available for giving scrolling effect on click of the link.

Suggestion II

  1. This is also similar suggestion, atleast the concept is the same.
  2. the only difference is that you can have a custom layout with web-content already embedded in the layout and also have the libraries and javascript written in the layout.

Suggestion III

  1. if you want automated left navigation pane i.e. when the page loads it has the portlet-name and links to the portlets on the right side without manual intervention.
  2. This would require a lot of coding inside layout.
  3. You can utilize the different variables available in the layout to find the portlets on the page and create the links.
  4. Have a left section in layout and populate the links found in (3) and the right side would be as usual.

You can utilize the portlet-Ids or css classes for scrolling to them when a particular link in web-content is clicked from the Look & Feel tab from Configuration tab as follows:

enter image description here

Hope this helps.

Upvotes: 1

Haris
Haris

Reputation: 1141

Liferay wraps portlet content that get displayed inside a div tag having unique portlet instance id. In portlet header, Look and Feel -> Advanced Styling, it displays that portlet id for example Portlet ID: #p_p_id_73_INSTANCE_xZVK6VFSqAzJ_

This ID may be used to hash tag in anchor to move focus to that portlet section.

Note: If the portlets on the page are instanceable, then removing an instance and adding instance again get new instance id. So, previous hash tag link doesn't work.

Upvotes: 1

Related Questions