Switching Themes by Topic – A Color Code System for the Portal

Have you ever wanted to change the color palette of the portal according to the current top level topic (i.e. entry point)?  Like on http://portale.web.de , http://www.n-tv.de, or http://www.gmx.de (sorry, all German sites).  Well, with this bit of code you’ll be able to do so.  And the best for frightened aah-no-we-sure-don’t-want-to-modify-the-standard managers: you don’t have to modify anything, you just enhance the standard!</p>

The code

Here is the recipe:

Create a new Portal Application (say: com.company.navigation.themeswitcher) and a new Portal Component (say: com.company.navigation.themeswitcher.default, class name: ThemeSwitcher).

Then place the following Javascript code into the component (either with repeating response.write() statements or by including a JS/JSP):

// contains the ID of the currently displayed theme

var oldTheme = “”;

// the matching table is an associative array (with the exception of the default entry)

// having the match strings as keys and the theme IDs as values

var matchTable = new Array();

matchTable[0] = ‘sap_standard’;

// the default theme

matchTable[‘/super_admin/super_admin_role/’] = ‘sap_chrome’;

matchTable[‘/every_user/general/eu_role/’] = ‘sap_tradeshow’;

/…add more matches here…/

// themeSwitcher function subscribed to the “UpdateTLN” event,

// which is fired before the actual navigation takes place

function themeSwitcher(evt) {

     // get the current NavigationTarget

     var navigationTarget = evt.dataObject;

     // decide on theme by looking at the current NavigationTarget

     var theme = matchTable[0];

     for (var match in matchTable) {

          if(navigationTarget.indexOf(match)>-1) {

               theme = matchTable[match];

               break;

          }

     }

     // do nothing more if the theme has been set already,

     // otherwise save theme in oldTheme (for performance opts)

     if(oldTheme == theme)

          return;

     else

          oldTheme = theme;

     // add – if not already happened – the post parameter (-> form input) “theme” to

     // the form “frmChangeContent” that is posted against the innerpage when navigating;

     // the additional parameter will cause the innerpage to load with the new theme

     var themeInput = document.getElementById(‘themeInput’);

     if(themeInput == null)

          document.getElementById(‘frmChangeContent’).innerHTML += ‘Remember to exchange the match table with your data (here: match strings and resulting themes) as stated in the comment.  The match strings should be substrings of the names of navigation nodes (like ROLES://portal_content<b>/every_user/general/eu_role/</b>com.sap.km.home_ws).  If you rewrite the code a bit you could even switch themes using a “dynamical” match table by including the theme name in the technical name of the role (by using some convention, like com.company.role.acme<b>__theme__topic_one</b> for the theme topic_one) and cutting out the theme name with Javascript.

The theme switch could even be done for (sub)nodes other than entry points – just provide corresponding match strings.

If you just want the inner page to load with the new theme and not the framework page as well, then leave out the last for-loop.

Nota bene:
(1) This code currently works only for themes that are stored in the theme root folder (not “customer” or alike).
(2) And it has been successfully tested for a NW portal (mine is currently SPS 12). It might work for previous SPS’ as well. But I don’t guarantee it for future versions ;-).

Why does that work?

The mystery behind the code is that navigation in the portal is done by calling EPCM.doNavigate().  This in turn will internally raise a portal event (EPCM.raiseEvent(“urn:com.sapportals:navigation”, “Navigate”, navigationTarget)) that is caught by a subscribing function named onNavigate(evt).  That function then raises an update event (EPCM.raiseEvent(“urn:com.sapportals:navigation”, “UpdateTLN”, navigationTarget)) before the actual navigation takes place, i.e. before the new NavigationTarget parameter is posted to the inner page.  Well, this is exactly when we want the theme switch to happen.</p>