How to apply the custom look and feel on embedded portlet in liferay popup?

[8年前 に Vishal Shah によって更新されました。]

My aim is to apply the custom look and feel on embedded portlets which are shown in liferay popup.

popup.jsp

<%
StringBundler sb = new StringBundler();
sb.append("<portlet-preferences><preference><name>portletSetupShowBorders</name><value>true</value></preference></portlet-preferences>");
StringBundler bundler = new StringBundler();
bundler.append("<portlet-preferences><preference><name>portletSetupShowBorders</name><value>true</value></preference></portlet-preferences>");
%&gt;
<aui:row>
	<aui:col width="30">
		<liferay-portlet:runtime portletName="58" defaultPreferences="<%=sb.toString() %>" />
	</aui:col>
	<aui:col width="70">
		<liferay-portlet:runtime portletName="<%=ApplicationConstants.CREATEUSER_PORTLET %>" defaultPreferences="<%=bundler.toString() %>" />
	</aui:col>
</aui:row>

view.jsp

<liferay-portlet:renderurl var="popUpURL" windowstate="<%=LiferayWindowState.POP_UP.toString()%>">
					<liferay-portlet:param name="jspPage" value="/jsp/popup.jsp" />
				</liferay-portlet:renderurl>
<aui:script>
				 AUI().use('aui-base','liferay-util-window','aui-io-plugin-deprecated',function(A){
				  
				    A.one('#<portlet:namespace />login-popup').on('click', function(event){
				    var login_popup= Liferay.Util.Window.getWindow({
				                dialog: {
				                    centered: true,
				                    constrain2view: true,
				                    modal: true,
				                    resizable: false,
				                    draggable : false,
				                    width: 1000
				                }
				            }).plug(A.Plugin.DialogIframe,
				                 {
				                 autoLoad: true,
				                 iframeCssClass: 'dialog-iframe',
				                 uri:'&lt;%=popUpURL.toString()%&gt;'
				                 }).render();
				         		 login_popup.show();
				                 login_popup.titleNode.html("Login Or Register");
				     });
				 });
				 </aui:script>

My default theme has look-and-feel, all portlets are border less. but specifically I want to show borders in these embedded portlets in liferay popup page.
Popup working properly, portlet visible properly but I can't apply custom portlet configuration of look-and-feel.

[7年前 に Andrew Jardine によって更新されました。]

Hi Vishal,

Can you have a look at your Layout table, filtering by portletId 58 to see whether or not there are already any preferences set? Looking at the RuntimeTag.java class I can see this code --

if ((PortletPreferencesLocalServiceUtil.getPortletPreferencesCount(
					PortletKeys.PREFS_OWNER_TYPE_LAYOUT, themeDisplay.getPlid(),
					portletId) < 1) ||
				layout.isTypeControlPanel() ||
				layout.isTypePanel()) {

				PortletPreferencesFactoryUtil.getPortletSetup(
					request, portletId, defaultPreferences);

				PortletLayoutListener portletLayoutListener =
					portlet.getPortletLayoutListenerInstance();

				if (portletLayoutListener != null) {
					portletLayoutListener.onAddToLayout(
						portletId, themeDisplay.getPlid());
				}

				jsonObject = JSONFactoryUtil.createJSONObject();

				PortletJSONUtil.populatePortletJSONObject(
					request, StringPool.BLANK, portlet, jsonObject);
			}

.. you can see in this block of code that the default preferences appear to be ignored if there are already preferences set on the portlet. Is it possible that this is part of your issue?

[7年前 に Alex Müller によって更新されました。]

Is there a way to workaround this restriction? There are many use-cases I can think of that require a specific embedded portlet to have different preferences (e.g. layout) than the same portlet that is added to a page in a regular way. If I read the code of RuntimeTag correctly there is no such way?

[7年前 に Andrew Jardine によって更新されました。]

Hey Alex,

No, I don't think that is the case. In the case referenced in the thread, we were referencing the login portlet (58). The Login portlet is not instanceable so technically you can only add it once to the page. In fact if you have a look at the out of the box you will see that on the main landing page (when you are not signed in) you see the login portlet (with login fields) and then a "sign in" link in the upper right corner. When you click the signin link is shows the login portlet in a modal. There is actually some JS trickery to accomplish this -- I was looking at it with a co worker a few weeks back, can't remember exactly what it was but I want to say it takes the HTML from the "portlet" on the page and shoves it into the modal or something like that.

Anyway, the point is that if the portlet preferences are stored by an instance on a page, and you have a non instanceable portlet, then it means that first time you embed that portlet on a page you create the record and those are the preferences you are stuck with. But, your question means multiple portlets on the same page with different preferences (I think?) which you can achieve by making the portlet instanceable and setting the preferences for each of the portlets. In that case, the portletId referenced in the layout will be portletName_WAR_servletcontext_XXXXX where the XXXXX would be the instance id. This should create multiple portlets, all with enough uniqueness to have their own preferences.

[7年前 に Alex Müller によって更新されました。]

Hi Andrew,

I'm specifically referring to the language selector portlet (which is also not instanceable).

We have a custom site template that is assigned to a specific page (and the subpages), but not to the whole site. In this site template, we want to render the language selector embedded into the site template with a different layout than on the other pages of the same site (which are not part of the given page tree with our custom template).

Example:
The landing page uses icon display for the language selector, the subpage(s) use dropdown layout for the language selector.

If I got it right, we can only set the defaultPreferences when embedding the language selector in the template, but there is no way to override specific preferences, especially the ddmTemplate.

Is there an elegant way to implement our use case?

[7年前 に Andrew Jardine によって更新されました。]

Hi Alex,

I see. In that case I would say you can just leverage the portlets action without using the "portlet" view at all. This way you can just use your own markup to show the languages (available) and the toggle feature however you like. I did this recently for something similar -- my client had a specific design that they wanted but I didn't want to have to hook the language portlet because another application might not want the same "alternate" view. So what we did was used the markup from the template and then wired the actionURL to toggle the language. So in our theme we added this to the init_custom.ftl --

<#-- Locale -->
<#assign languageUrl = portletURLFactory.create(request, "82", layout.getPlid(), "ACTION_PHASE") />
${languageUrl.setParameter( "struts_action", "/language/view" )}
${languageUrl.setParameter( "redirect", theme_display.getURLCurrent() )}
${languageUrl.setPortletMode( "view" )}
${languageUrl.setWindowState( "normal" )}

<#if language?lower_case == "en">
	<#assign lang_label = "fr" />
	${languageUrl.setParameter( "languageId", "fr_CA" )}
<#else>
	<#assign lang_label = "en" />
	${languageUrl.setParameter( "languageId", "en_US" )}
<!--#if-->

.. and then in the view we can just use an <a href=""/> or an onClick or whatever we want to perform the toggle.

Would that solve your problem?