Skip to Content
Technical Articles
Author's profile photo Former Member

Creating “on-the-fly” editable Portal Page Layouts

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:

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="" prefix="hbj" %></p><p><%@ taglib uri="" 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=””/></p><p>    <property name=”SecurityArea” value=”NetWeaver.Portal”/></p><p>    <property name=”SharingReference” value=”,,”/></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=”” value=”My 3 Columns Dynamic Layout”/></p><p>        <property name=”” value=”My 3 columns Dynamic Page Layout”/></p><p>        <property name=”” value=”/SERVICE/”/></p><p>        <property name=”” value=”/SERVICE/ “/></p><p>        <property name=”” 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=”″ 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=”″ 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=”″ 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=””></p><p>                <property name=”administration” value=”NONE”/></p><p>        </property></p><p>        <property name=”com_sap_webdynpro_mandatory_app_id” value=””></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: articles</p><p>4. Create the page layout object from the just deployed “.par” file</p><p>See: 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:

!|height=114|alt=Page Layout Preview|width=399|src=|border=1!</body>

Assigned tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin van het Hof
      Robin van het Hof
      ...the main drawback is this is a 'layout-wide' customization, i.e. you can't specify different layout properties for different pages.

      If only there's a way to promote those layout properties to page properties, that would be really flexible 🙂

      Author's profile photo Former Member
      Former Member
      Hi Robin,

      Thanks for your comment...
      Actually this is possible with the above mentioned scenario, but it's for 'advanced' users only as you need to use the "PCD Inspector".

      What you do is the following:
      1. create a page layout as mentioned in the blog.
      2. add this to a page where you need it.
      3. goto System Administration > Support > Support Desk > Portal Content Directory > PCD Inspector.
      4. once there browse to the page as mentioned by bullet 2.
      5. on that page object select the action "Browse Into"
      6. now you will see all objects beloning to that page (so iviews and sub-pages) but also the Page Layout.
      7. on that Page Layout select the action "AllProps"
      8. now you are able to edit all Page Layout Properties of the Layout that is hooked to your page insteaf of the template...


      Benajmin Houttuin

      Author's profile photo Robin van het Hof
      Robin van het Hof
      Hi Benjamin,

      Thanks for the hint, I was not aware the PCD Inspector could be of use for this.


      Author's profile photo Former Member
      Former Member

      Do you know if it is possible or even easy to implement a page layout where columns could be variable based on a profile property, and mainly, each column will be a TAB?

      Nice blog.

      Thanks & Regards,

      Author's profile photo Former Member
      Former Member
      Hi John,


      I never tried it but I think it is very good possible to get a tabbed layout working.

      In my example I used the HTMLB tags but instead you could also use plain HTML inside the Layout JSP. When I'm thinking of Tabs I think of layers and when I think of layer in the web I directly think of DIV Layers in combination with CSS.

      Take a look here:

      It might give you a jumpstart in creating a tabbed page layout.

      Regarding the variables based on a profile property... I'don't know.. "offcourse" everything is possible in custom development. If there are tags, api's or webservices that can be called to provide the data at runtime to the Page Layout then it must be possible. I don't have any "hands-on" on that query.



      Author's profile photo Former Member
      Former Member
      Hi Benjamin,

      I'll try it, and if succeed, i'll post a blog about that.