1. Home
  2. Development
  3. RE: How to change the look and feel of embedded portlet?

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

Fabio Carvalho, modified 5 Years ago.
How to change the look and feel of embedded portlet?
Junior Member Posts: 81 Join Date: 6/25/19 Recent Posts
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?
thumbnail
Alfonso Crisci, modified 5 Years ago.
RE: How to change the look and feel of embedded portlet?
Regular Member Posts: 136 Join Date: 4/2/14 Recent Posts
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
Fabio Carvalho, modified 5 Years ago.
RE: How to change the look and feel of embedded portlet?
Junior Member Posts: 81 Join Date: 6/25/19 Recent Posts
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.
thumbnail
Alfonso Crisci, modified 5 Years ago.
RE: How to change the look and feel of embedded portlet?
Regular Member Posts: 136 Join Date: 4/2/14 Recent Posts
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.
Fabio Carvalho, modified 5 Years ago.
RE: How to change the look and feel of embedded portlet?
Junior Member Posts: 81 Join Date: 6/25/19 Recent Posts
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?
Fabio Carvalho, modified 5 Years ago.
RE: How to change the look and feel of embedded portlet?
Junior Member Posts: 81 Join Date: 6/25/19 Recent Posts
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).
thumbnail
Alfonso Crisci, modified 5 Years ago.
RE: How to change the look and feel of embedded portlet?
Regular Member Posts: 136 Join Date: 4/2/14 Recent Posts
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>