888-685-3101, ext. 2

Enhancing customizable pages in Liferay Portal

by | Nov 19, 2012 | Blog, Databases

Liferay v6.1 introduced a new end-user customization capability wherein we can create a customizable page in a site that allows an end-user to add or remove portlets on the page or drag and drop portlets in different places on the page. In order to enable customization for a page, just go to Control Panel -> Site pages -> Select the page -> Customization Settings (or navigate to the page in question and select Manage Page in the dockar and choose Customization Settings), check the sections on the page that can be customized, and save the changes. Here’s a screenshot of the Customization Settings screen:
pic1-11-19

Now login as a regular site member (non-admin), open this page, and you will see a new line on the top of the page:

pic2-11-19

This enables the user to add/remove portlets or drag and drop the portlets to different places on the page like this:

pic3-11-19

But at the same time, we probably don’t want to allow the end-user to perform certain changes:

  1. Re-configure the portlets on the page using the portlet configuration mode; note that by default, once you enable end-user customizations, Liferay does not enforce the portlet “configuration” permission and allows the end-user to configure all portlets in the customizable area even though the end-user should not be allowed to.
  2. Edit the portlet title for any portlet on the page

pic4-11-19

To disable the portlet configuration option for common users, we can add two lines of code in the “portlet.vm” file in the theme and update the theme:

            #if ($portlet_display.isShowBackIcon())
<a class="portlet-icon-back" href="$portlet_back_url">#language("return-to-full-page")</a>
#else
   #if ( ($permissionChecker.isCompanyAdmin() ) )
$theme.iconOptions()
#end
$theme.iconMinimize()
$theme.iconMaximize()
$theme.iconClose()
#end

To make portlet titles non-editable to the common users, login as administrator, go to Control Panel -> Site pages -> Select the page -> JavaScript, add the following javascript code on that page:

AUI().ready("aui-base", "event", "liferay-layout", "aui-node", "liferay-service",function(A) {
Liferay.Service.Portal.Role.hasUserRole(
{
userId: themeDisplay.getUserId(),
companyId:themeDisplay.getCompanyId(),
name: "Administrator",
inherited: false
},
function(message) {
var exception = message.exception;
if (!exception) {
if (message != true) {
var portlets = Liferay.Layout.getPortlets();
for(var i = 0; i < portlets.size(); i++) {
var portlet = portlets.item(i);
var portletNode = A.one('#p_p_id_' + portlet.portletId + "_");
var title = portletNode.one('.portlet-title-text');
title.swallowEvent('focus');
title.swallowEvent('hover');
title.swallowEvent('click');
}
} else return;
}
else return;
});
});

Now the site member is not able to re-configure the portlets and change the portlet titles on a customizable page unless he/she is a site admin. If you want more granular control on who can edit portlet titles and configure portlets (and not just admins), it is doable but requires a little more work.