containerWithTrayDesign

Use

Creates a container and enables you to create a custom tray for all iViews displayed in the container.

Attributes

Name

Mandatory

Description

id

Yes

The ID of the container.

In the portalapp.xml for the PAR that includes the layout, this ID must be specified in a profile property called com.sap.portal.reserved.layout.Cont<X> . For more information, see How to Create a Custom Layout .

wrappingMethod

No

The wrapping method for single iViews within the container:

  • table: the container is rendered as a table with one column and multiple rows, with an iView in each cell. This is the default value, if the attribute is not specified.

  • div: each iView is wrapped in a div tag. There is no further surrounding HTML tag for the whole container.

  • • none: no extra HTML output for the container and for the single iViews. The iView output is inserted into the overall output as is.

Coordinating Tags

The tag must be nested in the following tag:

template

Example

The following creates a container with a custom tray that displays at the top an iView header consisting of the iView's title and a button that displays a set of links for invoking built-in tray functions. The iView's content is displayed after the links.

<lyt:containerWithTrayDesign 
  id="middleColumn" 
  wrappingMethod="none" 
  currentIViewID="myIvuId"       
  currentPageIViewID="myPageIvuId">
<%
IPortalComponentContext ivuContext = componentRequest.getComponentContext(myIvuId);
IPortalComponentProfile ivuProfile = ivuContext.getProfile();
String ivuCustomHeightProperty = ivuProfile.getProperty("custom.prop.height");
if (ivuCustomHeightProperty != null) {
  %>
<script type="text/javascript">
// run when DOM is ready
addDocumentReadyEventHandler(function(){
  pageSupport.ivuAdjustHeight('<%=myPageIvuId%>',<%=ivuCustomHeightProperty%>, false);
});
</script>
  <%
}
%>
  <lyt:IfShowTray>
    <div class="ivuHeader">
      <lyt:IfIViewTitleAvailable>
        <h3 class="ivuTitle">
          <lyt:IViewTitle/>
        </h3>
      </lyt:IfIViewTitleAvailable>
      <button onclick="toggleOptions('<%=myIvuId%>')">
        Options
      </button>
    </div>
    <ul class="ivuOptions" id="<%=myIvuId%>">
      <lyt:IfIViewToggleAvailable>
        <li>
          <lyt:IViewToggleOpen anchorAttributes="class='ivuToggleOpen'">
            Open iView
          </lyt:IViewToggleOpen>
          <lyt:IViewToggleClose anchorAttributes="class='ivuToggleClose'">
            Close iView
          </lyt:IViewToggleClose>
        </li>
      </lyt:IfIViewToggleAvailable>
      <lyt:IViewExpandAvailable>
        <li>
          <lyt:IViewExpand anchorAttributes="class='ivuExpand'">
            <lyt:IViewExpandTitle/>
          </lyt:IViewExpand>
        </li>
      </lyt:IViewExpandAvailable>
      <lyt:IViewRefreshAvailable>
        <li>
          <lyt:IViewRefresh anchorAttributes="class='ivuRefresh'">
            <lyt:IViewRefreshTitle/>
          </lyt:IViewRefresh>
        </li>
      </lyt:IViewRefreshAvailable>
      <lyt:IViewPersonalizeAvailable>
        <li>
          <lyt:IViewPersonalize anchorAttributes="class='ivuPersonalize'">
            <lyt:IViewPersonalizeTitle/>
          </lyt:IViewPersonalize>
        </li>
      </lyt:IViewPersonalizeAvailable>
      <lyt:IViewRemoveAvailable>
        <li>
          <lyt:IViewRemove anchorAttributes="class='ivuRemove'">
            <lyt:IViewRemoveTitle/>
          </lyt:IViewRemove>
        </li>
      </lyt:IViewRemoveAvailable>
      <lyt:IViewHelpAvailable>
        <li>
          <lyt:IViewHelp anchorAttributes="class='ivuHelp'">
            <lyt:IViewHelpTitle/>
          </lyt:IViewHelp>
        </li>
      </lyt:IViewAboutAvailable>
      <lyt:IViewAboutAvailable>
        <li>
          <lyt:IViewAbout anchorAttributes="class='ivuAbout'">
            <lyt:IViewAboutTitle/>
          </lyt:IViewAbout>
        </li>
      </lyt:IViewAboutAvailable>
    </ul>
    <div class="ivuContent">
      <lyt:IViewContent/>
    </div>
  </lyt:IfShowTray>
  
  <lyt:IfNotShowTray>
    <lyt:IViewContent/>
  </lyt:IfNotShowTray>
</lyt:containerWithTrayDesign>

More Information

container