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.

Mani
  • 283
  • 3
  • 21

3 Answers3

1
  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.

Community
  • 1
  • 1
Prakash K
  • 11,669
  • 6
  • 51
  • 109
  • Thanks for reply.1.For panel page it looks like you can only display one page at a time in the right content page.I have requirement where all the portlets will reside on same page.Clicking on links in the left navigation would just move the page up and down giving the focus to clicked portlet. – Mani May 19 '14 at 11:38
  • So correct me if I am wrong, you want to have 1) a page with all the portlets (like blogs,wiki,DL etc) stacked one after another. 2) Also you want that if the person scrolls down he would continue to see different portlets. 3) You want to have a left navigation with different portlet names-link, onclick of which you would focus on that particular portlet. – Prakash K May 20 '14 at 07:46
  • yes.that is correct.It would have links to individual portlets on the left navigation menu.On the right content pane it would be portlets placed one after another.Once you click through left navigation it would move control to specific portlet on right. – Mani May 20 '14 at 08:37
  • thanks for detailed answer.Suggestion 1 looks more helpful to me.Could you please let me know how do i go about implementing it? When we say "Use 30-70 layout." is it something I need to achieve by coding hooks/portlets? I do not need liferay left navigation in my app.Is there any way I can keep it expanded all the times and have my custom menu items in it?Currently liferay left navigation menu is only shown when we click on add/edit etc on liferay page.In some way I can make it fixed and add my custom menu items inside.Do you suggest something like this? – Mani May 21 '14 at 04:42
  • Oh boy! The liferay's custom menu is for adding portlets, adding a page and doing administration stuff, this is not for normal users. They won't even see the option to open it. But you can design your 30-side of the layout like that. 30-70 layout is nothing but a liferay layout which you can apply to a page, no coding is required. Please go through the Liferay User guide's section `Creating Sites and managing pages` to understand all about navigations and layouts. – Prakash K May 21 '14 at 04:59
  • ohh ok. Got that. I will go through the details on this page and try to do.I have one confusion here,as we are not coding anything ,if we create everything from UI how would we move it to the production.For hooks and other things we can deploy the war to production server.Do I need to redo everything on production ? Also if I have JS and CSS scripts of my old application can I use them here in liferay.Thanks for help! – Mani May 21 '14 at 05:39
  • 1
    you can use [Staging concept](https://www.liferay.com/documentation/liferay-portal/6.2/user-guide/-/ai/staging-page-publication-liferay-portal-6-2-user-guide-03-en) or you can use [LAR concept](https://www.liferay.com/documentation/liferay-portal/6.2/user-guide/-/ai/export-import-liferay-portal-6-2-user-guide-04-en) which would import your pages and data to the new environment. – Prakash K May 21 '14 at 05:46
  • Thank you for all answers ,I will try these all suggestions. – Mani May 22 '14 at 12:02
  • hi ,After doing some more research it looks like we can create a new theme based on classic theme and modify its navigation.vm to customize left side navigation. Can you please help me understand why would somebody would go for theme customization instead of creating a page with 30-70 layout and customizing it ? Thanks. – Mani May 30 '14 at 05:11
  • you are confusing page-navigation (`navigation.vm`) with one page having all the portlets as you confirmed to my first few comments. In the navigation.vm you can move the horizontal page list to be vertically style. This is the black-bar which appears with the pages "Welcome" etc after the site logo – Prakash K May 30 '14 at 06:41
  • If I understand this correctly by using navigation.vm I will only be able to move the Liferay horizontal black bar as vertical ? This is not something I need.I need to have vertical bar with links to portlets residing on the same page.I have achived that right now bu putting webcontent display portlet on the left side having all the links and all other portlets on right side.I have also created anchors to this by putting apporoate anchor id.But I am confused of whether I should be creating a theme because I have some custom CSS to use which are there in my existing non liferay portal. – Mani Jun 03 '14 at 11:44
  • Themes are used to style (read custom CSS :-)) the portal pages. Themes can also be used to change the whole layout of the page. So for custom CSS theme is the way to go. Your particular requirement can also be done through theme (the same suggestion that I gave by using Layout, with some tweak). The web-content solutions requires minimum coding, but theme or layout would require a little more complex coding. There are advantages in both the approaches, and it is good to know that you have achieved it with web-content. Nice. – Prakash K Jun 04 '14 at 05:22
1

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.

Haris
  • 1,131
  • 7
  • 20
  • Thanks for reply.This would help me move focus between portlets using their id.Could you please throw some light on how can I create left navigation menu? I have extended classic theme and created my own theme. However I am not ale to understand how do I modify it to have fixed sidebar.Thanks. – Mani May 20 '14 at 04:51
  • One approach that I see is use two column layout (like 30-70), first column can be used to place web content and second column to place your portlets one below other in the order to match your requirement. – Haris May 20 '14 at 09:09
  • You may embed menu as web content. See if this link helps to embed web content. http://www.e-kon.be/blog/item/two-ways-to-embed-web-content-in-liferay-themes – Haris May 20 '14 at 09:11
0

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

Sravan Kumar
  • 253
  • 1
  • 2
  • 8