Skip to Content

In my last Tag  Libraries: Creating a Hover Menu in SAP NetWeaver Portal, I covered how to create a custom navigation iView using the navigation tag library. This time we’ll explore how to create a custom layout using tag libraries – in case the SAP delivered light framework page doesn’t meet your needs. This tutorial only uses the basic layout tags – there’s a whole set of custom tray tags that let you control the iView tray’s look & feel. I will skip setting up the project in SAP NetWeaver Developer Studio since it was covered previously. Detailed online information about the layout and custom tray tag library is available here .

Create a new JSP page called ‘framework.jsp’ under the ‘JSP’ folder  as well as a ‘framework.css’ file under the ‘CSS’ folder. Copy the contents of the respective textareas in this blog into the files. Looking at the ‘framework.jsp’ file, we observe the same pattern that we saw in the navigation iView – we need to declare the tag library with the ‘tablib uri’ directive. Again, it’s important to note that the URI name must match the name used under the ‘component-profile’ in the portalapp.xml file (Figure 1.1). In addition, you need to add ‘com.sap.portal.pagebuilder’ as a SharingReference in the portalapp.xml file.

!https://weblogs.sdn.sap.com/weblogs/images/1767/frameworkjsp1.jpg|height=321|alt=image|width=404|src=https://weblogs.sdn.sap.com/weblogs/images/1767/frameworkjsp1.jpg|border=0!

!https://weblogs.sdn.sap.com/weblogs/images/1767/frameworkjsp3.jpg|height=225|alt=image|width=412|src=https://weblogs.sdn.sap.com/weblogs/images/1767/frameworkjsp3.jpg|border=0!

Figure 1: Page layout.

When creating a new layout, we need to provide two layout definitions: one for the run-time and one for the design-time when working with the layout in portal content administration. In order to distinguish between the two we query one of the page variables in the outer IF statement. Notice two things when we are in runtime mode: (1) the CSS file is loaded and (2) the extensive use of div tags to built our custom layout. Without getting into a detailed discussion of table based versus CSS based web page layout, let’s just say it’s considered good design and coding practice to use CSS. When in design mode, you notice that we have to use the table tag to construct our layout. This example uses a simple three container layout, but you can define as many containers and arrange them as you see fit. It’s critical that for each container, the ‘container id’ strings you use matches the consecutively numbered ‘com.sap.portal.reserved.layout.Cont[X]’ entries in the portalapp.xml file (Figure 1.1).

image

!https://weblogs.sdn.sap.com/weblogs/images/1767/lightcontent2.jpg|height=70|alt=image|width=153|src=https://weblogs.sdn.sap.com/weblogs/images/1767/lightcontent2.jpg|border=1!

#body

#leftnav

}

#content {

     text-align: justify;

     margin-left: 21%;

}

#box

ul.treenav {

     list-style: none;

     padding: 0px 20px 0px 20px;

  

}

ul.treenav a

ul.treenav a:hover {

     background-color: white;

}

ul.treenav ul {

     list-style: none;

     margin-left: 14px;

   

}

ul.treenav li

ul.treenav a.path {

     font-weight: bold;

}

ul.treenav a.current

ul.treenav a.folder {

     background-image: url(<%=mimeUrl%>/images/black_bullet_big.gif);

     background-repeat: no-repeat;

}

ul.treenav a.leaf {

     background-image: url(<%=mimeUrl%>/images/black_bullet.gif);

     background-repeat: no-repeat;

}

</style>

</textarea>

</p>

To report this post you need to login first.

6 Comments

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

  1. Daniel Wroblewski
    Hi Oliver,

    Nice blog. You just didn;t add a picture of how the whole thing will look after being developed and deployed.

    One question: Is a framework page just the same as any other page — just with your custom layout? Is there any special functionality provided by the standard and light framework pages?

    Thanks.

    Daniel

    (0) 
  2. Anonymous
    Hi,

    Is there a way to set the with of the framework pages to a value and for consecuense set the width of the entire portal. For example using the script

    document.body.clientwidth=value;

    Regards,

    Orlando Covault

    (0) 
    1. Oliver Mayer Post author
      Hi Orlando,

        Good question. Unfortunately, I no longer have the environment set up where I could test this, so I cannot say one way or the other whether this would work … or not.

      Oliver

      (0) 
  3. Aanchal Shukla
    I found ur blog really useful.
    I have a similar requirement which i request you to check on link:
    /message/4612203#4612203 [original link is broken]

    Please help in this regard as this is very urgent from my client

    Regards
    Aanchal

    (0) 
  4. Kai Unewisse
    Hi Oliver,

    is there a way of reading iview Properties within a custom page layout ?

    I have e.g. a custom RSS Feed URL i want to show.
    Since there is no such thing in the default methods, i can not add this to the menu.
    Or this here some documentation somewhere ?

    Regards,
    Kai

    (0) 
    1. Oliver Mayer Post author
      Hi Kai,

        That was a long time ago. I haven’t worked with the portal since 2007. Sorry, but I don’t have an answer for you.

      O.

      (0) 

Leave a Reply