Show TOC

Background documentationHow to Use the Tag Library Locate this document in the navigation structure

 

This section describes the steps for creating a layout JSP page from scratch.

Note Note

It may be easiest to take an existing layout and modify it. The default layouts are contained in the com.sap.portal.layouts.default application.

End of the note.

Procedure

  1. In the portalapp.xml file:

    1. Add a sharing reference in the <application-config> element, as follows:

      <property name="SharingReference" value="com.sap.portal.pagebuilder"/>

    2. Add a reference to the tag library by adding the following property to the <component-profile> element for the JSP component:

      <property name="LayoutTagLibrary" value="/SERVICE/com.sap.portal.pagebuilder/taglib/layout.tld"/>

  2. In the JSP page, add a taglib directive for the layout tag library. JSP pages for the portal's default layouts use the tag name prefix lyt.

    <%@ taglib uri="LayoutTagLibrary" prefix="lyt" %>

  3. Add a template tag, which indicates the start and end of the layout.

    Syntax Syntax

    1. <lyt:template>
      
      ...
      
      </lyt:template>
      
    End of the code.
  4. In the template tag, add HTML to divide the page into sections.

  5. In the HTML within the template tag, add the container or containerWithTrayDesign tags to indicate where you want to place the iViews.

    For example, the following uses the floating div tags to divide the page into two columns of 30% and 70% width and to add a containers to each column.

    Syntax Syntax

    1. <div class="floatLeftWidth30Percent">
         <lyt:container id="leftNarrowColumn" wrappingMethod="none"/>
      </div>
      <div class="floatRightWidth70Percent">
          <lyt:container id="rightWideColumn" wrappingMethod="none"/>
      </div>
      <div class="clearFloats"></div>
      
    End of the code.

    The container tag creates a container that displays iViews with the default iView tray. The containerWithTrayDesign tag enables you to create a custom tray for the iViews within the container.

  6. For the containerWithTrayDesign tag, add HTML inside the tag's body to create a tray. Within the tray, indicate with the iViewContent tag where to place the iView's contents, and use other layout tags to create links to invoke tray functions.

    For an example of a layout JSP page that creates a simple iView tray, see Sample Layout.

  7. To create different HTML output for runtime and design time, use the IfRunTimeMode and IfDesignTimeMode tags inside the template tag. Within those two tags you can have different HTML outputs that surround your container or containerWithTrayDesign tags.