Restricting movability of portlet by width

In Setting width of portlet column in WebSphere Portal entry i did explain how to set width of vertical container, Now the next question is how do i make sure that if my portlet requires say 600px to display markup, user does not drag it into container which is only 300 px in size. In other words how do i restrict where user is able to drag the portlet.

By default the WPS wont check width of portlet before either adding or moving portlet to container so you will have to follow these steps to enable that support

First go the Configure Mode in the Edit layout portlet and check "Check portlets width before adding or moving portlets to a column" Check box like this


Then go the WebSphere Application Server Admin Console for WebSphere Portal server and go to Resource Environment Provider -> WP_ConfigService and add a Custom Property like this



Property Name -> PortletPlacementFilterImpl
Property Value -> com.ibm.wps.model.filters.portletplacement.impl.WidthFilterImpl

Save your changes and restart the WebSphere Portal Server


Follow the steps described in the Setting width of portlet column in WebSphere Portal entry to set width for the vertical column.

Last step would be to set what is the width of portlet or putting restrictions on the portlet, that you can do by setting a MAX_WIDTH preference like this



Now if you try, you wont be able to drag or add this portlet which has MAX_WIDTH set to 500px to any container with width less than 500 px. If you try that the portlet wont get dragged to the smaller container but no error is displayed to user, but if you look inside the SystemOut.log you will see this error

Setting width of portlet column in WebSphere Portal

WebSphere Portal allows you to set width of a vertical column on portal page. Ex. I did create a page which has 2 columns and width of the left column is 300px and width of right hand column is 600px, now if i add two portlets on a page and the portlets dont have any width restriction then my screen looks like this



If you dont set width of vertical container explicitly then IBM skin wont set any width and the portlets will have width based on the markup they are generating, sometimes this might generate unpredictable or unexpected output

You will have to follow these steps for setting width of vertical container, first go to the Manage pages portlet and find the page where you want to set width. Then click on the Edit Layout button, Check if you get a Show layout tools link on the top like this



If not then you might not have enabled the Show layout tools option, you can enable it by going to configure mode of the Edit Layout portlet like this



Now select the "Show toggle link for Show layout tools/hide layout tools" select box, save your changes and come back to the view mode. Now you will see the Show layout tools link at the top, click on the button and you will get a UI where you will be able to set width of vertical container by clicking on width



After setting Width and setting changes go back to the page and you should see your changes

Important Note : The way this feature is implemented is that, WebSphere Portal maintains Layout Metrics for every page. When you set width either through Admin UI or using Controller SPI the width gets stored in db. Then your UnlayeredContainer-H.jsp in your Skin will have to implement logic to read the width set in Layout Metrics and set it while generating vertical column. This is the code in IBM skin

<%
hasChildren=true;
String columnWidth=(String)currentLayoutNode.getMetrics().getValue(CompositionMetrics.WIDTH);
%> 
<td valign="top" <% if (columnWidth != null)
{
out.print ("width=\"");
out.print (columnWidth);
out.print ("\"");
} %>>

Configure Page Layout

If you want to add more portlets to a page or change default layout of the page by going to Manage Pages Portlet, selecting the page that you want to Edit and clicking on its Edit Page Layout button like this


It will open Edit Layout page like this. On this page Portal provides 6 different options to choose from, that you can choose to define what layout of the page you want


If you have advanced requirements that cannot be fulfilled by one of the default layouts then click on Show Layout Tools Link, if you dont get that link Go to Configure mod of the Edit Layout portlet and check 'Show toggle link for "Show layout tools/hide layout tools"' check box


Now when you come back to the Edit Layout page, you should get this link, click on the Show Layout Tools button and you will get a more flexible layout like this, now you can click on the add column container or add row container buttons to create a page with say 4 columns.