Liferay 7 where is the source for the navigation portlet

[6年前 に William Gosse によって更新されました。]

I downloaded the source for Liferay 7 GA4 and look high and low for the source for the navigation portlet. I guess I'm really interested in the templates that it uses. I'm assuming that it uses a freemarker template to build a bootstrap nav bar. This kind of stuff used to be in the themes but now in 7 the navigation.ftl only seems to load the navigation portlet into the theme header section.

<div aria-expanded="false" class="collapse navbar-collapse" id="navigationCollapse">
	&lt;#if has_navigation &amp;&amp; is_setup_complete&gt;
		<nav class="${nav_css_class} site-navigation" id="navigation" role="navigation">
			<div class="navbar-form navbar-right" role="search">
				&lt;@liferay.search default_preferences="${freeMarkerPortletPreferences}" /&gt;
			</div>
		
			<div class="navbar-left">
				&lt;@liferay.navigation_menu default_preferences="${freeMarkerPortletPreferences}" /&gt;
			</div>
		</nav>
	<!--#if-->
</div>

This is good but I want to try a make a nav bar with more then 2 levels.

[6年前 に David H Nebinger によって更新されました。]

I think it is actually backed by an ADT now, Bill.










Come meet me at Devcon 2017 or 2017 LSNA!

[6年前 に William Gosse によって更新されました。]

ADT what's that mean?

[6年前 に Russell Bohl によって更新されました。]

See https://dev.liferay.com/discover/portal/-/knowledge_base/7-0/styling-apps-with-application-display-templates

and https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/application-display-templates

[6年前 に David H Nebinger によって更新されました。]

Yeah, sorry for throwing the acronym at you, but Russell found it for you...

Liferay's moving a lot more towards using ADTs for supporting most of the OOTB portlet displays to reduce need on JSP fragment bundles.










Come meet me at Devcon 2017 or 2017 LSNA!

[6年前 に William Gosse によって更新されました。]

Right I see that in the Control Panel that a custom ADT can be loaded. Are these ADTs located in the source tree somewhere? I'm assuming they can be copied and modified and then uploaded.

[6年前 に David H Nebinger によって更新されました。]

William Gosse:

Right I see that in the Control Panel that a custom ADT can be loaded. Are these ADTs located in the source tree somewhere? I'm assuming they can be copied and modified and then uploaded.

Not really. I mean, when you create a new instance the database is populated with them, so I'm sure they originate somewhere in the source, but I don't know if they are in a form that you can just copy from code and paste into ADT editor. Most of the time I just go to the ADTs and pull them up there, then you can use those to copy...








Come meet me at Devcon 2017 or 2017 LSNA!

[6年前 に Christoph Rabel によって更新されました。]

Application Display Template
https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/application-display-templates

[6年前 に William Gosse によって更新されました。]

Thanks all for this info. It clears a lot up for me.

Again I'm looking to customize the navigation portlet or more specifically one of its existing ADTs. Where can I find the existing ADTs for the navigation portlet in the Liferay source tree. It looks like these are just freemaker templates which is great. I assume these templates are part of the source tree.

[6年前 に William Gosse によって更新されました。]

I found where the navigation portlet ADTs were in the source tree:
liferay-ce-portal-src-7.0-ga4\modules\apps\web-experience\site-navigation\site-navigation-menu-web\src\main\resources\com\liferay\site\navigation\menu\web\portlet\template\dependencies>C:\Dev4\liferay-ce-portal-src-7.0-ga4\modules\apps\web-experience\site-navigation\site-navigation-menu-web\src\main\resources\com\liferay\site\navigation\menu\web\portlet\template\dependencies

This folder contains the following files:
06/13/2017 05:53 PM 4,675 portlet-display-templates.xml
06/13/2017 05:53 PM 680 portlet_display_template_list_menu.ftl
06/13/2017 05:53 PM 3,398 portlet_display_template_navbar_blank.ftl
06/13/2017 05:53 PM 3,308 portlet_display_template_navbar_blank_justified.ftl
06/13/2017 05:53 PM 3,307 portlet_display_template_navbar_default.ftl
06/13/2017 05:53 PM 1,389 portlet_display_template_navigation_menu_macro.ftl
06/13/2017 05:53 PM 3,275 portlet_display_template_nav_pills.ftl
06/13/2017 05:53 PM 3,290 portlet_display_template_nav_pills_justified.ftl
06/13/2017 05:53 PM 3,288 portlet_display_template_nav_pills_stacked.ftl
06/13/2017 05:53 PM 3,275 portlet_display_template_nav_tabs.ftl
06/13/2017 05:53 PM 3,294 portlet_display_template_nav_tabs_justified.ftl
06/13/2017 05:53 PM 2,715 portlet_display_template_split_button_dropdowns.ftl

I copied and modified the portlet_display_template_nav_pills.ftl file and then uploaded it using the Manage Display Templates link/editor in the navigation portlet's configuration dialog. This gave me a new display template that can go down 3 levels deep now.

I've attached the ftl, css and image of what it looks like in action if anyone is interested. Thanks again for the ADT tip.

[6年前 に William Gosse によって更新されました。]

I updated my attachments with some refinements which include going down to 3 levels deep and dealing with page sets, which are not browseable nav items.

[6年前 に William Gosse によって更新されました。]

Also some more styling and non browseable nav items, page sets, are no longer selectable.

[6年前 に William Gosse によって更新されました。]

RE: Liferay 7 where is the source for the navigation portlet

[6年前 に gnp present によって更新されました。]

Hi...wooow..very nice....but how can you done this collapsible for mobile view?....


thanks

[6年前 に William Gosse によって更新されました。]

Yes multi-level menus not really great for mobile. I'm still working on how it can work in mobile. I was thinking of incorporating a simple list display. Definitely open to suggestion on that.

[6年前 に gnp present によって更新されました。]

Hi..thank you for fast response...as a suggestion, for mobile you can simply use exactly like level 1 from default liferay navigation..just simple collapse...

[6年前 に William Gosse によって更新されました。]

I can control that through css to not display levels 2 and 3 for certain media sizes.

[6年前 に gnp present によって更新されました。]

thx..pls can i ask you something in privat? my email is [e-mail]

thank you

[6年前 に William Gosse によって更新されました。]

The following updates may help with being more responsive and includes a small bug I corrected.

[5年前 に Omkar Khandare によって更新されました。]

In my Web site I want to have navigation with upto 10 levels,

Can you tell me how can i achieve this multiple levels hierarchy in Navigation Portlet.

So it will show simple dropdown flow on hover from Parent to deepest page.

 

[5年前 に David H Nebinger によって更新されました。]

10 levels?

That's rediculous.  Get yourself a UX expert and they can explain why.

[5年前 に William Gosse によって更新されました。]

I have to agree David. One place where I worked they had ridicoulous multi-level stuff like this and they wanted to be exactly ported into Liferay that way.  We proposed a redesign to make more usable but they insisted it had to be exactly like the legacy system. Sometimes you just can't win. In those cases a change scenario maybe the right answer.