Show TOC

How to Create a Custom LayoutLocate this document in the navigation structure

Use

A layout consists of a layout JSP page and a portalapp.xml file. The files are packaged in a portal application archive file (EAR) and deployed to the portal.

You can define several layouts in a EAR by providing for each layout a JSP page and a <component> element in the portalapp.xml file.

Procedure
  1. With the help of the layout tag library, create a JSP page that defines the following:

    • One or more containers on the page in which iViews can be placed.

    • The iView tray, or frame, in which each iView is placed. If you do not specify a tray, the portal displays the default tray, which provides links to standard tray functions, such as hiding, refreshing or personalizing the iView.

      You can specify one tray for each container. The tray is displayed for all iViews in the container.

    • Additional HTML that appears on each page.

    For more information on creating a layout JSP page, see Layout Tag Library .

  2. Create a <component> element in a portalapp.xml file for the EAR and set the name attribute. Create one <component> element for each layout defined in the EAR.

    In the <component> element's <component-config> element, create the following <property> elements:

    Property

    Mandatory

    Description/Value

    ClassName

    Yes

    com.sapportals.portal.pb.layout.PageLayout

    ResourceBundleName

    Yes

    pagebuilder_nls

    In the <component> element's <component-profile> element, create the following <property> elements:

    Property

    Mandatory

    Description/Value

    ComponentType

    Yes

    com.sapportals.portal.layout

    com.sap.portal.pcm.Title

    No

    The display name of the layout

    com.sap.portal.pcm.Description

    No

    A layout description

    com.sap.portal.reserved.layout.TemplateFile

    Yes

    The name of the JSP page that defines the layout (relative to the PORTAL-INF\jsp directory)

    com.sap.portal.reserved.layout.Cont1, com.sap.portal.reserved.layout.Cont2,

    and so on

    Yes

    Each container defined in the JSP must have a property in the portalapp.xm l.

    The names of these properties should end in ContX , where X is a sequence number starting at 1 .

    The value is a name for the container.

    LayoutTagLibrary

    Yes

    /SERVICE/com.sap.portal .pagebuilder/taglib/layout.tld

    For each container profile property described above, you can include the following meta-properties:

    Property

    Mandatory

    Description

    plainDescription

    Yes

    The display name of the container

    orientation

    Yes

    Container orientation, which must be set to vertical

    designClass

    No

    A CSS class for wrapping the HTML tag created by the container:

    • If the container's wrapping method attribute wrappingMethod="table" , the class is added to the table tag ( <table class="..."> )

    • If wrappingMethod="div" , the class is added to each div tag that wraps an iView (<div class="..."> )

    • If wrappingMethod="none" , this setting is ignored

    For more information about wrappingMethod, see container and containerWithTrayDesign .

  3. Place the JSP pages in the PORTAL-INF/jsp directory, and create an EAR file with your JSP pages and deployment descriptor.

  4. Deploy the EAR file.

  5. In the portal, navigate to Start of the navigation path Content Administration Next navigation step Portal Content Management  Next navigation step Portal Content End of the navigation path.

  6. In the Portal Catalog, choose Portal Applications .

  7. Locate and expand the application that contains your custom layout.

  8. From the context menu of the object representing the layout, choose Copy .

  9. Navigate to a folder of your choice, such as a folder where all custom layouts are stored. From the context menu of the folder, choose Paste as PCD Object .

  10. Set the basic properties of the object, and choose Finish .

  11. From the context menu of the object, choose Start of the navigation path Open Next navigation step Properties End of the navigation path, and then choose All .

  12. Make sure that the Object is a Template property is selected, and choose Close .

  13. From the Portal Catalog, open any page, and choose Add/Remove Layouts . Verify that your layout appears in the Available Layouts list.

More Information

  • Optionally, you can limit the content types that can be dropped on a container for layouts used in Web Page Composer (WPC).

    For details, see Defining Container Restrictions .

  • To ensure that your layout is correctly displayed in Ajax Page Builder (APB), you need to make some adjustments in portalapp.xml.

    For detailed instructions, see Adjusting Custom Layouts to Ajax Page Builder .