Siva R Vaka: Page Builder - Creating Custom Page Layouts WP7

Lotus wiki article (Click Here) didn’t provide the complete details on how the custom layout works in page builder theme. Following article tries to explain the internal details on how the custom layouts works in page builder theme .

Create custom layout (1Row3ColumnEqualFooter) using HTML DIV tags that looks like below

Step 1: Connect to webDAV http://localhost:10039/wps/mycontenthandler/dav/fs-type1/

Step 2: copy the out of the box “customLayout” folder from the “layout-templates” to you local drive

Step 3: Rename the folder copied in above step to “1Row3ColumnEqualFooter”and also update the following files in it i.e. update the icon.gif with new icon.gif (looks like above) and also update the localized_en.properties file with title as (1Row3ColumnEqualFooter).

Step 4: Copy “1Row3ColumnEqualFooter” folder back to the http://localhost:10039/wps/mycontenthandler/dav/fs-type1/layout-templates

Step 5: Now you can see this custom layout on portal(may need to re login if doesn’t work) , ActionsàEditPageà CustomizeàChangeLayout . Now you should able to see the layout

Above steps explained in the wiki article also , but this isn’t yet solved the entire problem.

How to change the layout.html that re-presents the layout in above icon.

Step 1: Need to edit the layout.html and layout.css under the “1Row3ColumnEqual Footer” folder in webDAV

Step 2: Copy the following lines into the layout.hml (replace existing content)

</div>

Step 3: Copy the following lines to layout.css

.ibmClearRow { clear:both; }

.hiddenWidgetsContainer{ display:none; margin-bottom:10px; }

.ibm3Col { float:left; width:32.5%; margin:0 .8% 2px 0; overflow:hidden; position:relative; }

.ibm_rtl .ibm3Col { margin:0 0 5px .8%; }

.ibmRow { width:100%; overflow:hidden; margin-bottom:10px; }

.ibmRightCol { margin-right:0px; margin-right:0%; }

Step 4: Update these files on the webDAV “1Row3ColumnEqualFooter” folder

Step 5: To see the changes , create a portal page and apply the page builder theme.

Step 6: To apply the custom layout for that page, access portal pageà actionsà edit page à customize àchange layout à choose “1Row3ColumnEqual” and click save.

Step 7: Go back to administration and click “edit” icon for the page now it look like below and add portlets to containers and click “done”.

Step 8: Access the page to see the layout

Relation or Mapping between the <DIV> tags in layout.html and layout containers

It looks so simple to add the new layout but the page builder theme does following things to indetify what portlets need display under what <DIV> tag.

Once we select the layout in the page customization and click on it to save , then it actually update or adds lot of metadata to page. XML for the above page as follows

<?xml version="1.0" encoding="UTF-8"?>

<content-node action="update" active="true"

allportletsallowed="true" content-parentref="Z6_000000000000000000000000A0"

create-type="explicit" domain="rel" objectid="Z6_S11VAVH4089E00IPA0S69O20I1"

ordinal="5800" themeref="ZJ_CGAH47L000CS30IAH1044E1KJ5" type="staticpage"

uniquename="TestCustomLayout">

<title>TestCustomLayout</title>

</localedata>

<parameter name="com.ibm.portal.layout.template.ref" type="string" update="set"><![CDATA[dav:fs-type1/layout-templates/1Row3ColumnEqualFooter]]></parameter>

<access-control externalized="false" owner="uid=wpsadmin,o=defaultWIMFileBasedRealm" private="false" />

</component>

<parameter name="com.ibm.portal.layoutnode.localname" type="string" update="set"><![CDATA[ibmMainContainer]]></parameter>

<parameter name="css-classes" type="string" update="set"><![CDATA[ibmDndRow ibmRow]]></parameter>

</component>

<parameter name="com.ibm.portal.layoutnode.localname" type="string" update="set"><![CDATA[left]]></parameter>

<parameter name="css-classes" type="string" update="set"><![CDATA[ibm3Col ibmDndColumn]]></parameter>

</component>

</component>

<parameter name="com.ibm.portal.layoutnode.localname" type="string" update="set"><![CDATA[middle]]></parameter>

<parameter name="css-classes" type="string" update="set"><![CDATA[ibm3Col ibmDndColumn]]></parameter>

</component>

<parameter name="com.ibm.portal.layoutnode.localname" type="string" update="set"><![CDATA[right]]></parameter>

<parameter name="css-classes" type="string" update="set"><![CDATA[ibm3Col ibmRightCol ibmDndColumn]]></parameter>

</component>

</component>

<parameter name="com.ibm.portal.layoutnode.localname" type="string" update="set"><![CDATA[footer]]></parameter>

<parameter name="css-classes" type="string" update="set"><![CDATA[ibmDndRow ibmRow]]></parameter>

</component>

</content-node>

Names of DIV tags in layout.html are added in container component node level parameters.
CSS classes of DIV tags in layout.html, are also added at container component node level parameters to arrange the containers positions or alignment

FAQ’s

What is the main purpose of the page builder theme custom page layouts ?

Ans: Page builder theme helps to separate the page layout design with page administration by separting the “layout” from the portal page by keeing it webDAV.

Why there is nothing called custom layouts in the standard portal theme ?

Ans: As standard portlet theme uses the out the box layout tools , Page “Editors/Admins” can modify the layout directly in page “edit layout”. It has flexibility to arrange the containers in any layout.

Difference between PageBuilder Theme custom page layout vs Portal Theme out of box page layout?

Ans: In starndard portal theme page layout gets generated by using the HTML table cell structure . Layout containers uses the table structure to arrange the portlets on the page. But page bulder theme uses the Div layouts to generate the page structure.

Can we create the DIV layout structure using the standard portal theme?

Ans: Yes, but need to use the custom CSS styles to move the portlets to arrange the layout.

3 comments:

NeelimaNovember 7, 2011 at 8:45 AM
Hi, the load time of the Page Builder theme is much. The out of the box Pge builder theme takes 2.75 secs with out cache cleared and 6.95 secs with cache cleared. Is anything being done for the performance of the Page Builder theme?
Travel with Khalid HabibApril 1, 2014 at 5:43 AM
Hi
I have wcm 8.0 where I find layout.css