“So what Do I see if I click on ‘Home’?” You’re presenting a slide show to major stakeholders of your SAP Enterprise Portal project. You want to explain the new navigation structure. The real system is not yet up and running – your hardware supplier did send a wrong connector and the correct part is on backlog since a month. When we faced a situation like this in our project, we first created a Flash demo of the Portal navigation. It looked pretty slick, but needed the Macromedia development environment to be modified. Adding hyperlinks to the slides of a presentation was another option, but not a very scalable or maintainable one. After playing with the thought of writing a full blown WYSIWIG role and work set editor – “Visual Portal Content Studio”, so to say – in Visual Basic over the weekend, I decided to keep it simple and to use a little bit of XML and client side scripting instead. It’s a little rough around the edges; it does not fully mimic the behavior of TLN and DTN, but worked quite well for the intended purpose. And this is how it looks: 
To see the same, download portalnav.zip (227 kB, supplied as is, without warranty, not for resale), unpack it into an empty directory, open index.htm in your browser and navigate to the Home - Documents entry point. Of course, an enormous amount of cheating is required. The masthead is a bitmap. The content area is a bitmap. Only the top level navigation (TLN) and the detailed navigation are generated by code and will react to mouse clicks. To change the navigation structure, you need to modify the XML file navigation.xml. It comes with a W3C Schema file, so if you have a Schema aware XML editor, you’ll get full syntax support. Let me show you the XML required for creating just the Portal page shown above: 
The XML document root must be called “Portal” and has to have the properties “currentEntry” and “navLevels”. The “currentEntry” designates the initial item to display. The navLevels attribute defines how many levels the TLN will have – one or two. Under the “Portal” root you can add 1 to many “NavEntry” elements. A “NavEntry” does not have content. In the DTN it is shown with a little triangle to the left, indicating that it can be expanded to show the items underneath. Here we see just one entry on the root level, called “Home”. “NavEntry” elements can contain more “NavEntry” elements. Here, “Home” contains “Documents”. At some point, however, you will want to add a Page element. Pages help you to fill the navigation mockup with “content”. Here the “pic” element is used; it contains the location of a bitmap to show in the content area. You can also use “url” to point to an existing web site or use “description” to just explain the content of the page in prose. You’ve probably also noticed the “NaviView” elements under Portal and under the Overview page. They describe content to be placed in the detailed navigation column and make the overall look and feel even more realistic. All elements must have a unique “id” attribute and a “title”. An XML editor with XML Schema support will enforce the uniqueness of the id. Be careful to change the “id” if you cut and paste elements inside the navigation file. And sorry, a number is not a valid ID according to the XML Schema standard, so make sure you start every id with a character. The solution presented here is not perfect. It does not exactly behave like the Portal. First of all, it’s much, much faster. Be careful not to raise expectations about Portal performance to the same level. The color codes and font sizes are a bit off. This is part intention, part laziness. Feel free to tune all numbers and measurements to your needs. Under some conditions, the navigation logic is also a bit off. Expanded trees in the DTN are not reset if one moves to another top-level navigation entry. The code is quite messy. Some colors are hard coded inside the code. The logic is not easy to follow. Still, it proved to be of value to us in our Portal design and migration efforts.
To see the same, download portalnav.zip (227 kB, supplied as is, without warranty, not for resale), unpack it into an empty directory, open index.htm in your browser and navigate to the Home - Documents entry point. Of course, an enormous amount of cheating is required. The masthead is a bitmap. The content area is a bitmap. Only the top level navigation (TLN) and the detailed navigation are generated by code and will react to mouse clicks. To change the navigation structure, you need to modify the XML file navigation.xml. It comes with a W3C Schema file, so if you have a Schema aware XML editor, you’ll get full syntax support. Let me show you the XML required for creating just the Portal page shown above: The XML document root must be called “Portal” and has to have the properties “currentEntry” and “navLevels”. The “currentEntry” designates the initial item to display. The navLevels attribute defines how many levels the TLN will have – one or two. Under the “Portal” root you can add 1 to many “NavEntry” elements. A “NavEntry” does not have content. In the DTN it is shown with a little triangle to the left, indicating that it can be expanded to show the items underneath. Here we see just one entry on the root level, called “Home”. “NavEntry” elements can contain more “NavEntry” elements. Here, “Home” contains “Documents”. At some point, however, you will want to add a Page element. Pages help you to fill the navigation mockup with “content”. Here the “pic” element is used; it contains the location of a bitmap to show in the content area. You can also use “url” to point to an existing web site or use “description” to just explain the content of the page in prose. You’ve probably also noticed the “NaviView” elements under Portal and under the Overview page. They describe content to be placed in the detailed navigation column and make the overall look and feel even more realistic. All elements must have a unique “id” attribute and a “title”. An XML editor with XML Schema support will enforce the uniqueness of the id. Be careful to change the “id” if you cut and paste elements inside the navigation file. And sorry, a number is not a valid ID according to the XML Schema standard, so make sure you start every id with a character. The solution presented here is not perfect. It does not exactly behave like the Portal. First of all, it’s much, much faster. Be careful not to raise expectations about Portal performance to the same level. The color codes and font sizes are a bit off. This is part intention, part laziness. Feel free to tune all numbers and measurements to your needs. Under some conditions, the navigation logic is also a bit off. Expanded trees in the DTN are not reset if one moves to another top-level navigation entry. The code is quite messy. Some colors are hard coded inside the code. The logic is not easy to follow. Still, it proved to be of value to us in our Portal design and migration efforts.
2 Comments
