How to change the look and feel of embedded portlet?

RE: How to change the look and feel of embedded portlet?

2019-11-22T08:44:13Z

Hi Fabio, sorry for the delay, I was at DEVCON earlier this week. How about this (Velocity/tpl) approach?

<div class="my-liferay-layout" id="main-content" role="main">
&nbsp;&nbsp; &nbsp;<div class="portlet-layout row">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div class="col-md-12 portlet-column portlet-column-only" id="column-1">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$velocityPortletPreferences.setValue("portletSetupPortletDecoratorId", "barebone")
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$theme.runtime("com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet", "",
            $velocityPortletPreferences.toString())
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$velocityPortletPreferences.reset()
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>
&nbsp;&nbsp; &nbsp;</div>
</div>

RE: How to change the look and feel of embedded portlet?

2019-11-21T16:21:13Z

Ok. So I could not find any solution for my problem and I went back to velocity (tpl). I also found out that you can add breadcrumbs with:

$theme.breadcrumb("", false, false, true, true)

I can't find any documentation for this. I suppose that the params are the same as the configuration options that the default Breadcrumb portlet have, but I am unsure about the first param (the String one).

RE: How to change the look and feel of embedded portlet?

2019-11-18T13:26:16Z

Hi Alfonso,

I could add the portlet with your solution, but I could not change the preferences this way. So I tried to change from tpl to ftl format and I could do something like this:

<div class="my-breadcrumb-css">
&nbsp; &nbsp; &lt;#assign preferences = freeMarkerPortletPreferences.getPreferences("portletSetupPortletDecoratorId", "barebone") /&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; &lt;@liferay_portlet["runtime"]
&nbsp; &nbsp;     defaultPreferences="${preferences}"
&nbsp; &nbsp; &nbsp; &nbsp; portletName="com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet" /&gt;
</div>
<div class="my-column-css">
&nbsp; &nbsp; ${processor.processColumn("column-1", "portlet-column-content")}
</div>

The problem is that "liferay_portlet" is null or missing:


FreeMarker template error:
The following has evaluated to null or missing:
==&gt; liferay_portlet &nbsp;[in template "my_theme_CUSTOM_layout_simple" at line 5, column 27]----
Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use &lt;#if myOptionalVar??&gt;when-present&lt;#else&gt;when-missing<!--#if-->. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
--------
FTL stack trace ("~" means nesting-related):
&nbsp;&nbsp; &nbsp;- Failed at: @liferay_portlet["runtime"] defaultPr... &nbsp;[in template "my_theme_CUSTOM_layout_simple" at line 5, column 25]
----

Am I missing some include? How could this be missing?

RE: How to change the look and feel of embedded portlet?

2019-11-15T18:45:09Z

Hi Ricardo,
No problem. Again, without testing myself, something like this might help:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $theme.runtime("mytest_INSTANCE_1234", "", "")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #set($VOID = $velocityPortletPreferences.reset())
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #set($VOID = $velocityPortletPreferences.setValue('portletSetupPortletDecoratorId', 'barebone'))
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $theme.runtime("mytest_INSTANCE_1234", "", $velocityPortletPreferences.toString())
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #set($VOID = $velocityPortletPreferences.reset())
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $processor.processColumn("column-1", "portlet-column-content portlet-column-content-last")

Also, just as info, as of https://issues.liferay.com/browse/LPS-75190, layout templates can also be .ftl (Freemarker) instead of .tpl. You can change the file extension of file e.g. docroot/test.tpl to .ftl and the template-path to .ftl in the file docroot/WEB-INF/liferay-layout-templates.xml.

RE: How to change the look and feel of embedded portlet?

2019-11-15T15:06:21Z

Hi Alfonso,

Thanks for the answer. This code you quote works indeed in the ftl file format. But what I was looking for was for the tpl file. I know that I asked for ftl, but it was a mistake typing. I will edit the post.

RE: How to change the look and feel of embedded portlet?

2019-11-15T14:16:51Z

In Liferay 7, It should be possible in a way similar to this (I did not test yet):

&lt;#assign preferences = freeMarkerPortletPreferences.getPreferences({"portletSetupPortletDecoratorId" : "barebone"}) /&gt;
&lt;@liferay_portlet["runtime"]
defaultPreferences="${preferences}"
portletName="com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet"
/&gt;

Docs: https://portal.liferay.dev/docs/7-0/tutorials/-/knowledge_base/t/applying-portlet-decorators-to-embedded-portlets

How to change the look and feel of embedded portlet?

2019-11-15T12:28:03Z

Hi,

I have a custom-layout.tpl in my theme, and right now I am trying to add a BreadCrumb Portlet to my layout. To add it, I am doing like this:

<div class="my-css-class">
&nbsp; &nbsp; $processor.processPortlet("com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet")
</div>

This is adding my portlet just like I want, but I would love to add it as Barebone. Is there any way to pass this value in my tpl file?