Portal Branding - Go beyond portal themes

[Former Member]

The look of the portal is defined by an initial framework page and a portal theme. Framework page usually consists of a master header containing user name, company logo and standard links - usually personalize and logoff. Next element is the "tool bar" which can contain collaboration link and search form in standard environment. Next is the top level navigation - a menu generated from user roles, and finally the desktop internal area which displays the content - pages and iViews. Portal theme defines selected properties of those standard elements. Changing the portal theme is the first thing one does when doing the portal branding.

Technically to brand portal your way, you have to define a framework page(s) and theme(s), add them to a portal desktop, and add this portal desktop to portal display rules. More than one theme and/or framework page are available to be selected by portal user in portal personalization. There is a tutorial covering those basic steps located at SDN. Click here for the tutorial

The tutorial solution does not cover all possibilities of portal branding in SAP Enterprise Portal 6.0. Portal is very flexible and allows us to build our framework page in any way we want. After making a copy of default framework page, we can do any changes to that copy. The most basic thing that can be done is to add one more iView - for example URL iView with content captured from your existing company website.

In my example i choose to create a new portal page with 2 column layout containing an URL iView which i used to capture company logo on the left (source URL is http://www.bcc.com.pl/)and standard portal master header on the right (not visible on the screen shot), and added this page to the default framework page and switched original master header visibility off. This is a fairy simple example. One should consider his company branding rules before constructing his own portal layout.

Before:

After:

Another possibility is to build your own portal master header based on the existing one. (Simple HTML & Java knowledge is required.) First we have to get the original master header from our portal installation. To do so, go to System Administration -> Support -> Portal Runtime -> Browse Deployment -> WEB-INF (browse) -> deployment (browse) -> temp (browse) -> com.sap.portal.navigation.masthead.par.bak (download). Save the .zip file onto your hard drive. Unzip the file you've downloaded. You will get an com.sap.portal.navigation.masthead.par.bak file containing the original portal deployment of master header. Change the file extension from .bak to .zip and unzip the file. You will get two folders - META-INF and PORTAL-INF - which contain the original portal master header.

Now the hard part. Go to PORTAL-INF/jsp folder. You will find there HeaderiView.jsp. This file contains the HTML and some Java code mixed together, which build up the master header as we know it. In this example we will get rid of the surname from the header and add an exclamation mark after the first name.

If you have some Java knowledge, you will find out that GetWelcomeMsg method is responsible for returning the text for "Welcome FirstName LastName" text on the master header. You can now change this method's code to reflect your needs. I include new version of this method here below, with the functionality changed. If you are unsure what "method" is replace the code from the lines 53 to 79 with the following one.

private String GetWelcomeMsg(IPortalComponentRequest request, String welcomeClause){    IUserContext userContext = request.getUser();    if (userContext != null)    {  String firstName = userContext.getFirstName();  String lastName = userContext.getLastName();  String salutation = userContext.getSalutation();  if ((firstName != null) && (lastName != null))  {      if(salutation != null)   {    return java.text.MessageFormat.format(welcomeClause, new Object[] {firstName + "!", " ", " "}).toString();   }   else   {    return java.text.MessageFormat.format(welcomeClause, new Object[] {firstName + "!", " ", " "}).toString();   }  }  else  {   return java.text.MessageFormat.format(welcomeClause, new Object[] {userContext.getUniqueName()," ", " "}).toString();    } }    return "";}

After changing the file compress the folders WEB-INF and PORTAL-INF with any ZIP format compatible tool into a file with a name following standard Java package names for your company; e.g. com.yourcompany.masthead.zip and then change the extension from .zip to .par. In portal, go to System Administration -> Support -> Portal Runtime -> Administration Console. Click Browse, look for your .par file, choose it, click Upload. Go to Content Administration -> Portal Content and create in convenient folder a new iView based on the .par file you've uploaded. Right click the folder, choose "New From PAR", find the name of your .par on the list, click Next, select default, click Next, click Finish. Then use this iView in your default framework page and hide the original master header. Remember that besides adding iView to the framework page, you have to update the page layout. After these changes my portal page looks like that:

One can do much more advanced things with the portal layout - the only limit are the Java knowledge and imagination 🙂 Have fun with your portal and always remember to consult your company's branding guidelines when changing the branding of the portal.