Product Lifecycle Management Blogs by Members
Get insider knowledge about product lifecycle management software from SAP. Tap into insights and real-world experiences with community member blog posts.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member
0 Kudos


Ever thought, "hey wouldn't it be easy to have Page Layouts that are configurable via the PCD properties editor?" Well here is your answer... It's possible, proven in action (in a 50K user Portal) and available for you in this blog.

First thing to do is to read/study the basics of how to change/create a custom Page Layout.

this can be found here:

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/42/efbac120711a71e10000000a422035/frameset.htm

Now you know the basics we can continue with the topic where this Blog is all about... creating "on-the-fly" editable Portal Page Layouts.

I will use an example of a 3 column Page Layout to step trough all the points...

1. The JSP file:
</p><p>The following JSP file contains 3 configurable columns. These Columns aren't set by a hardcoded value but instead variables are used.</p><p>Because the gridlayout (GridLayout1) is configured with a width of 100% it's containing columns can be set separately.</p><p>This "construction" also allows you to leave one columnvariable unset (empty) with the result that this column is rendered as a dynamic column (stretch-to-fit).</p><table border="1" width="100%"><tbody><tr><td><p><%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibHtmlb" prefix="hbj" %></p><p><%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibLayout" prefix="lyt" %></p><p>

<%@ page import = "com.sapportals.portal.prt.session." %></p><p><%</p><p>IPortalComponentContext componentContext = componentRequest.getComponentContext();</p><p>IPortalComponentProfile profile = componentContext.getProfile();</p><p> </p><p>String sColumn1WidthVal = profile.getProperty("col1_widthval");</p><p>String sColumn2WidthVal = profile.getProperty("col2_widthval");</p><p>String sColumn3WidthVal = profile.getProperty("col3_widthval");</p><p>%></p><p><lyt:template></p><p>       <hbj:content id="myContext" ></p><p>             <hbj:page title="Portal Page"></p><p>                    <hbj:gridLayout id="GridLayout1"  width="100%" cellSpacing="0"></p><p>                           <hbj:gridLayoutCell rowIndex="1" columnIndex="1" width="<%=sColumn1WidthVal%>" verticalAlignment="top"></p><p>                                  <lyt:container id="column1" /></p><p>                           </hbj:gridLayoutCell></p><p>                           <hbj:gridLayoutCell rowIndex="1" columnIndex="2" width="<%=sColumn2WidthVal%>" verticalAlignment="top"></p><p>                                  <lyt:container id="column2" /></p><p>                           </hbj:gridLayoutCell></p><p>                           <hbj:gridLayoutCell rowIndex="1" columnIndex="3" width="<%=sColumn3WidthVal%>" verticalAlignment="top"></p><p>                                  <lyt:container id="column3" /></p><p>                           </hbj:gridLayoutCell></p><p>                    </hbj:gridLayout></p><p>             </hbj:page></p><p>       </hbj:content></p><p></lyt:template></p></td></tr></tbody></table><p>2. The portalapp.xml file:</p><p>Now that the variables are set we need to pre set the variables in the portalapp.xml file so that the Portal PCD Property editor knows how to cope with them:</p><table border="1" width="100%"><tbody><tr><td>  <p><?xml version="1.0" encoding="utf-8"?></p><p><application></p><p>  <application-config></p><p>    <property name="Vendor" value="benjaminhouttuin.com"/></p><p>    <property name="SecurityArea" value="NetWeaver.Portal"/></p><p>    <property name="SharingReference" value="com.sap.portal.htmlb,com.sap.portal.useragent,com.sap.portal.pagebuilder"/></p><p>  </application-config></p><p>  <components></p><p>   </p><p>    <component name="My3ColumnDynamicLayout"></p><p>      <component-config></p><p>        <property name="ClassName" value="com.sapportals.portal.pb.layout.PageLayout"/></p><p>        <property name="ResourceBundleName" value="pagebuilder_nls"/></p><p>        <property name="SafetyLevel" value="no_safety"/></p><p>      </component-config></p><p>      <component-profile></p><p>        <property name="ComponentType" value="com.sapportals.portal.layout"/></p><p>        <property name="com.sap.portal.pcm.Title" value="My 3 Columns Dynamic Layout"/></p><p>        <property name="com.sap.portal.pcm.Description" value="My 3 columns Dynamic Page Layout"/></p><p>        <property name="com.sap.portal.reserved.layout.TagLibLayout" value="/SERVICE/com.sap.portal.pagebuilder/taglib/layout.tld"/></p><p>        <property name="com.sap.portal.reserved.layout.TagLibHtmlb" value="/SERVICE/com.sap.portal.htmlb/taglib/htmlb.tld "/></p><p>        <property name="com.sap.portal.reserved.layout.TemplateFile" value="my_dynamic_3_column.jsp"></p><p>             <property name="administration" value="NONE"/></p><p>        </property></p><p>        <property name="AuthScheme" value="anonymous"/></p><p>        <property name="com.sap.portal.reserved.layout.Cont1" value="column1"></p><p>          <property name="administration" value="NONE"/></p><p>          <property name="title" value="Column 1"/></p><p>          <property name="orientation" value="vertical"/></p><p>          <property name="designClass" value="prtlPageConL"/></p><p>        </property></p><p>        <property name="com.sap.portal.reserved.layout.Cont2" value="column2"></p><p>        <property name="administration" value="NONE"/></p><p>          <property name="title" value="Column 2"/></p><p>          <property name="orientation" value="vertical"/></p><p>          <property name="designClass" value="prtlPageConM"/></p><p>        </property></p><p>        <property name="com.sap.portal.reserved.layout.Cont3" value="column3"></p><p>        <property name="administration" value="NONE"/></p><p>          <property name="title" value="Column 3"/></p><p>          <property name="orientation" value="vertical"/></p><p>          <property name="designClass" value="prtlPageConR"/></p><p>        </property></p><p>       <property name="com_sap_webdynpro_mandatory_app_namespace" value="sap.com/pb_lyt"></p><p>                <property name="administration" value="NONE"/></p><p>        </property></p><p>        <property name="com_sap_webdynpro_mandatory_app_id" value="com.sap.portal.pb.layout.widenarrow.WideNarrowLayout"></p><p>                <property name="administration" value="NONE"/></p><p>        </property></p><p>       </p><p>             </p><p>              </p><p>             </p><p>             </p><p>       </property></p><p>       </p><p>             </p><p>              </p><p>             </p><p>             </p><p>       </property></p><p>       </p><p>             </p><p>              </p><p>             </p><p>             </p><p>       </property></p><p>      </component-profile></p><p>    </component></p><p> </p><p>  </components></p><p>  <services/></p><p></application></p></td></tr></tbody></table><p>3. Save your custom layouts ".par" file and deploy it on your development Portal</p><p>See:  help.sap.com articles</p><p>4. Create the page layout object from the just deployed ".par" file</p><p>See: help.sap.com articles</p><p> </p><p>5. Configure your just created page layout object*

Now that the Page Layout is available we can configure it using the Portal PCD Property editor.

a. open the object for editing

b. switch to the view "show all"

c. configure the 3 Column variables (see screenshot)

- 1st column set to 210px,

- 2nd column set to "empty" (this means treat as Dynamic, stretch-to-fit column)

- 3rd column set to 480px

Dynamic Page Layout

This will result in a Page Layout Preview that looks like this:

!https://weblogs.sdn.sap.com/weblogs/images/251966557/page_layout_preview.PNG|height=114|alt=Page Layout Preview|width=399|src=https://weblogs.sdn.sap.com/weblogs/images/251966557/page_layout_preview.PNG|border=1!</body>

6 Comments