Adjusting Custom Layouts to Ajax Page Builder

To ensure that your layout is correctly displayed in Ajax Page Builder (APB), add the following properties to the portalapp.xml:

Property

Description/Value

XML_Template

mandatory

Includes a nested property plainDescription

Defines the XML schema of the layout used by APB. For example:

Syntax Syntax

<?xml version="1.0" encoding="UTF-8"?>
<PageLayout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../xsd/PBlayout.xsd" layoutID="com.sapportals.portal.layout.tEqualWidth" pageID="tEqualWidth">
	<CustomAttributes>
		<Attribute key="JSP_Template" value="gpar:/com.sap.portal.layouts.default/tEqualWidth"/>
	</CustomAttributes>
	<TableLayout width="100%" height="100%" cols="2"/>
	<ContainersRow>
		<Container containerID="com.sap.portal.reserved.layout.Cont1">
			<TableCellData width="100%" colSpan="2" vAlign="top"/>
			<ContainerBehaviors allowedDropTags="wpc_webbanner"/>
		</Container>
	</ContainersRow>
	<ContainersRow>
		<Container containerID="com.sap.portal.reserved.layout.Cont2">
			<TableCellData width="50%" height="100%" colSpan="1" vAlign="top"/>
		</Container>
		<Container containerID="com.sap.portal.reserved.layout.Cont3">
			<TableCellData width="50%" height="100%" colSpan="1" vAlign="top"/>
			<ContainerBehaviors allowedDropTags="iview,wpc_weblinklist"/>
		</Container>
	</ContainersRow>
</PageLayout>
<property name="plainDescription" value="Layout XML Template"/>

End of the code.

Note Note

In the portalapp.xml, define this property as a single line of text rather than as structured XML, not including the nested property:
<property name= “XML_Template" value = “<?xml version="1.0" encoding="UTF-8"?><PageLayout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"...> ..."/>
The ContainerBehaviors tag is optional; use it when you want to add restrictions for the container.
The allowedDropTags attribute defines which content types can be added to this container. This attribute can be a multivalue comma-separated list.

For more information, see Defining Container Restrictions.

End of the note.

com.sap.portal.layout.BigImage

optional

A large image that represents the layout in the page authoring tool.

For example:/com.sap.portal.pcc.pageutils/images/big_layout_T.png

com.sap.portal.layout.SmallImage

optional

A small image that represents the layout in the page layouts section.

For example: /com.sap.portal.pcc.pageutils/images/small_layout_T.gif

com.sap.portal.layout.SelectedSmallImage

optional

A small image that represents the selected layout in the page content panel.

For example: /com.sap.portal.pcc.pageutils/images/small_layout_T_x.gif

Note Note

The recommended image file types and sizes are as follows:

Big image: PNG, 96x70 pixels
Small image: GIF, 54x41 pixels

If you use different sizes, the images may be distorted in the layouts bar.

End of the note.