Creates a container and enables you to create a custom tray for all iViews displayed in the container.
Note
If you want to use the same tray for all iViews in all containers in the layout, place the code that defines the tray (the body of the containerWithTrayDesign tag) in an include file, and then include the file in all your containers.
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:
Note If you define a designClass meta property for the container in the portalapp.xml, the table or div tag carries an extra class attribute with the designClass value. The value may be either one of the container CSS classes defined in a portal theme (prtlHeaderCon, prtlPageConF, prtlPageConL, prtlPageConM, prtlPageConR), or any other custom CSS class, defined in a custom CSS file included in the response. End of the note. |
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.
Syntax
<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>