Skip to Content
0
Former Member
Jun 07, 2012 at 11:21 PM

WPC Page Layout compatible with Ajax Page Builder

25 Views

Hi

We are creating some new Page Layouts for a Customer. So far we were sucessfull to create Narrow/Wide and FullWidth Types.

Now we would like to create a layout with two rows:

  • First Row - Full width Row ( for a banner)
  • Second Row - Narrow Wide Narrow Collums

The Layout works well on Acessible Area Management and Renders properly aswell but on Ajax Page Builder it doesnt work.

The Ajax PageBuilder display a warning saying the configuration of the Layout was incorrect and that it will use BasicLayout instead.

I know these errors are normally related to XML_STRUCTURE Properties of the Layout but i cant seem to find the error so im pasting the code so hopefully someone can realize whats wrong.

LAYOUT XML TEMPLATE

<?xml version="1.0" encoding="UTF-8"?>          <PageLayout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../xsd/PBlayout.xsd"                                        layoutID="layoutid" pageID="layoutid">          <CustomAttributes>                    <Attribute key="JSP_Template" value="gpar:/com.customer.portal.laf.wpc/NarrowWideNarrowWithBanner"/>          </CustomAttributes>          <TableLayout width="100%" height="100%" cols="3"/>          <ContainersRow>                    <Container containerID="com.sap.portal.reserved.layout.Cont1">                              <TableCellData width="100%" colSpan="3" vAlign="top"/>                    </Container>          </ContainersRow>          <ContainersRow>                    <Container containerID="com.sap.portal.reserved.layout.Cont2">                              <TableCellData width="25%" height="100%" colSpan="1" vAlign="top"/>                    </Container>                    <Container containerID="com.sap.portal.reserved.layout.Cont3">                              <TableCellData width="50%" height="100%" colSpan="1" vAlign="top"/>                    </Container>                    <Container containerID="com.sap.portal.reserved.layout.Cont4">                              <TableCellData width="25%" height="100%" colSpan="1" vAlign="top"/>                    </Container>          </ContainersRow></PageLayout>

When converted to Portalapp.xml:

    <component name="NarrowWideNarrowWithBanner">      <component-config>        <property name="ClassName" value="com.sapportals.portal.pb.layout.PageLayout"/>        <property name="ResourceBundleName" value="pagebuilder_nls"/>        <property name="SafetyLevel" value="no_safety"/>      </component-config>      <component-profile>        <property name="EPCFLevel" value="0"/>        <property name="ComponentType" value="com.sapportals.portal.layout"/>        <property name="com.sap.portal.pcm.Title" value=" X WPC: Two Rows(Full Width | Narrow Wide Narrow)"/>        <property name="com.sap.portal.reserved.layout.TemplateFile" value="NarrowWideNarrowWithBanner.jsp"/>        <property name="LayoutTagLibrary" value="/SERVICE/com.sap.portal.pagebuilder/taglib/layout.tld"/>        <property name="com.sap.portal.reserved.layout.Cont1" value="fullWidthContent">          <property name="title" value="Full Width Content"/>          <property name="orientation" value="vertical"/>        </property>        <property name="com.sap.portal.reserved.layout.Cont2" value="leftContent">          <property name="title" value="Left Content"/>          <property name="orientation" value="vertical"/>        </property>        <property name="com.sap.portal.reserved.layout.Cont3" value="middleContent">          <property name="title" value="Middle Content"/>          <property name="orientation" value="vertical"/>        </property>        <property name="com.sap.portal.reserved.layout.Cont4" value="rightContent">          <property name="title" value="Right Content"/>          <property name="orientation" value="vertical"/>        </property>        <property name="com.sap.portal.layout.BigImage" value="/Ximages/narrow_wide_narrow_with_banner_big.png"/>        <property name="com.sap.portal.layout.SmallImage" value="/X/images/narrow_wide_narrow_with_banner_small.gif"/>        <property name="com.sap.portal.layout.SelectedSmallImage" value="/X/images/sel_narrow_wide_narrow_with_banner_small.gif"/>        <property name="XML_TEMPLATE" value="&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&lt;PageLayout xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation=&quot;../xsd/PBlayout.xsd&quot; layoutID=&quot;X&quot; pageID=&quot;X&quot;&gt;&lt;CustomAttributes&gt;&lt;Attribute key=&quot;JSP_Template&quot; value=&quot;gpar:/XNarrowWideNarrowWithBanner&quot;/&gt;&lt;/CustomAttributes&gt;&lt;TableLayout width=&quot;100%&quot; height=&quot;100%&quot; cols=&quot;3&quot;/&gt;&lt;ContainersRow&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont1&quot;&gt;&lt;TableCellData width=&quot;100%&quot; colSpan=&quot;3&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;/ContainersRow&gt;&lt;ContainersRow&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont2&quot;&gt;&lt;TableCellData width=&quot;25%&quot; height=&quot;100%&quot; colSpan=&quot;1&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont3&quot;&gt;&lt;TableCellData width=&quot;50%&quot; height=&quot;100%&quot; colSpan=&quot;1&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont4&quot;&gt;&lt;TableCellData width=&quot;25%&quot; height=&quot;100%&quot; colSpan=&quot;1&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;/ContainersRow&gt;&lt;/PageLayout&gt;">          <property name="plainDescription" value="Layout XML Template"/>        </property>        <property name="XMLSTRUCTURE" value="&lt;table border=&quot;1&quot; width=&quot;100%&quot; colspan=&quot;99&quot;&gt;&lt;tr&gt;&lt;td width=&quot;100%&quot; colspan=&quot;100&quot;&gt;*&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td width=&quot;25%&quot; colspan=&quot;33&quot;&gt;*&lt;/td&gt;&lt;td width=&quot;50%&quot; colspan=&quot;33&quot;&gt;*&lt;/td&gt;&lt;td width=&quot;25%&quot; colspan=&quot;33&quot;&gt;*&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"/>      </component-profile>    </component>    <component name

THE JSP is like this:

<lyt:template>          <div id="_ctlBanner__pnlBanner">                    <lyt:container id="fullWidthContent" wrappingMethod="none"  />          </div>          <div class="content-columns-wrapper">                    <table id="content_0_tblTwo" class="tbl-three-column" cellspacing="0" cellpadding="0" border="0" style="border-width:0px; border-collapse:collapse;">                              <tbody>                                        <tr>                                                  <td id="content_0__trLeft" class="tbl-three-column-left" style="vertical-align:top;">                                                            <table class="tbl-left-menu menu-margin" cellpadding="0" cellspacing="0" border="0">                                                                      <tbody>                                                                                <tr>                                                                                           <td>                                                                                                    <lyt:container id="leftContent" wrappingMethod="none"  />                                                                                          </td>                                                                                </tr>                                                                      </tbody>                                                            </table>                                                  </td>                                                  <td id="content_0__trCenter" class="tbl-three-column-center" style="vertical-align:top;">                                                            <div id="content_0__pnlCenter1" class="content-center-column">                                                                      <lyt:container id="middleContent" wrappingMethod="none"  />                                                            </div>                                                  </td>                                                  <td id="contencolumn-right" style="vertical-align:top;">                                                                      <lyt:container id="rightContent" wrappingMethod="none"  />                                                  </td>                                        </tr>                              </tbody>                    </table>          </div></lyt:template>

Thanks for any help: