Skip to Content
This is one in a series of weblogs on External Facing Portal, a new feature in SAP NetWeaver Portal SP14.


No doubt, those iView trays that come with the portal are beautiful and functional. But did you think of creating your own?


Perhaps you want to put in graphics or gradient fills. Or create custom buttons for standard tray functions, or determine which tray functions the user gets?


One of the new External Facing Portal features is an expanded Layout Tag Library for creating page layouts, which now includes tags for creating custom iView trays.


Why the change? The standard iView tray uses both EPCM and HTMLB, both resource-heavy features. With the new Layout Tag Library, you can create iView trays that do not use EPCM or HTMLB and that use far fewer resources — perfect for an External Facing Portal.


But the feature can be used within any type of portal to create custom iView trays.

First, a quick review …


All pages in the portal are assigned at least one page layout, which determines how the page is divided up and where on the page iViews can be placed. Each area on the page where iViews can be placed is called a container.


A container can hold many iViews, with the iViews placed one on top of the other. Each iView is displayed within an iView tray (unless the administrator decides to hide it for a particular iView).


The standard iView tray is shown below:

image


The iView tray includes the bar at the top, which displays the name of the iView and a dropdown menu of tray functions — such as, Refresh and Personalize. The side and bottom border are part of the tray.


image


A layout is defined by a JSP page that includes tags from the Layout Tag Library. The page is composed of all the markup in the JSP page, with the self-closed tag indicating where to create containers for iViews.

New Tag Library


The new tag library creates the alternative tag , which also creates a container but the iView tray for iViews in this container is defined in the body of the tag.


Here’s an example of an iView tray based on a page layout created with the expanded tag layout:


image


The page layout for this page is defined in 2 files. First, the basic layout is defined in the following JSP page:


tag, except the iView tray for iViews in the container is defined in the body of the tag.


In this case, the tray for each of the containers is defined in the tray.jsp file, as follows:


tag, which specifies where to place the contents of the iView within the iView tray.


Most of the other tags create links to invoke tray functions, such as Refresh or Open in New Window. Each of these tags has a conditional tag that enables you to include the link for each iView only if the administrator has enabled the link for the iView. For example, put the tag, so that the Refresh link is displayed for each iView only if the Refresh button is enabled for that iView.


You do not need an include file, but it is helpful. The iView tray must be defined for each container within a custom tray — you cannot define a single tray to be used by all containers in the layout. So you can define the layout in an include file and then reference this in all the containers of the page layout.


For more information, see Layout Tag Library in the Portal Developer Guide on the Help Portal.


The following are the weblogs in the series on External Facing Portal:


To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Jürgen Bechtle
    Dear Daniel,

    great blog, i managed to create a NWDS project, and defining a page-layout, the defines usage of my custom tray.jsp. But now I’m stuck agein, as I want to reuse the code of the standard iView implementation and don’t want to start “from scratch”.

    Is there a way to look up the source code of the standard ?

    best regards,

    Juergen.

    (0) 
    1. Itzik Hav
      Hi Juergen

      Can you please elaborate what exactly do you mean by “standard iView implementation”? is it a specific iView? an iView template?

      thanks
      Itzik

      (0) 
      1. Jürgen Bechtle

        Dear Itzik,<br/>I managed to create a solution by enhancing the DOM using Javascript. My intention was to use <lyt:container/> which renders a standard htmlb Tray rather than <lyt:containerWithTrayDesign>, which leaves the design of the Tray menu to the developer.<br/><br/>I made a blog ’bout my way of dealing with the issue  – http://weblogs.sdn.sap.com/pub/wlg/2441. [original link is broken] [original link is broken]<br/><br/>best regards,<br/>Juergen.<br/>

        (0) 

Leave a Reply