To modify the portal theme SAP gives us the online and offline Theme Editor that both serve the basic needs to adjust the portal to the corporate design. The tool can’t be used to adjust every pixel of the portal, but it serves for an easy and fast branding. You can even use the offline Theme Editor to create an ABAP theme out of the portal theme and import it into the ABAP backend to ensure a coherent look and feel for the portal users.
Still there are two points where theme editor falls short:
- For companies with a demand for showing the corporate design in every product or
- fine tune the theme for a specific browser only the theme editor isn’t offering all the options needed to adjust the SAP Portal to all needs.
There you need a tool to modify several parts of the portal that you cannot do with the tools provided.
In this blog I will focus on point number 1. The solution detailed will make use of a reverse proxy (RP) and the KM Client Cache (KM CC). The reverse proxy used is SAP Web Dispatcher 7.2.
Problem with the general max-age configuration done in VA
The easiest way to increase the cache time of the theme files is to alter the general cache parameter of the HTTP Provider service in the Visual Administrator:
The CacheControl parameter controls the max-age value the NetWeaver AS Java HTTP server will send back in the HTTP header to the browser. You cannot use this parameter to specifically configure the cache time of your theme files as the parameter is valid for all portal applications. For instance, after configuring the parameter, even the logon application will use this new cache value:
Test environment setup
The desktop for the test user will use the theme tobias_blog:
When a user that has the “Theme” desktop assigned logs on to the portal, the tobias_blog theme will be used:
Still, the global max-age parameter of the VA is in use.
How to configure a max-age value for the Portal theme only
The easiest solution is to copy the theme files to the KM and to configure the KM Client Cache (KM CC).
Theme location and files
The portal theme is managed by a portal application. Therefore, the link to the portal theme’s CSS file are stored here:
http://server:port/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/[name of the theme]/[theme paths]
As an example a theme file for the standard theme SAP Tradeshow:
To be able to use the KM CC cache, the theme files need to be located in the KM. This can be done by copy & paste the files to a KM repository. Only storing the CSS files in the KM won’t make the portal faster as the theme consists also of other files. Best way is to copy all the files to a KM folder. The theme files can be found here:
Configure KM CC for the KM Repository
The KM CC allows you to define a custom cache time for each KM folder and mime type. Storing the files in the KM and configuring the KM CC is easy. When you are familiar with a previous blog of mine you know how to configure the KM CC (KM Cache for portal application files).
Configure your Reverse Proxy to do the redirect
I’ll use the SAP Web Dispatcher 7.2 for this, as with this version it is possible to configure to great extent how the Web Dispatcher will handle a browser request (see my blog about HTTP handles (Using Web Dispatcher 7.2 HTTP handlers))
One drawback is the redirect part. Using a 307 redirect the browser will verify every time if the redirect is still valid. Using a permanent (301) redirect should inform the browser to not look up the original file again, but if the browser does so depends on the browser’s implementation.
RegRedirectUrl ^/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/tobias_blog(.*) /irj/go/km/docs/themes/portal/tobias_blog$1 (CODE=permanent)
Accessing the portal /irj/portal using Web Dispatcher:
Direct access to the portal without involving Web Dispatcher
That’s a problem. Yes, the theme files are now loaded from the KM with the new max-age value, but every request to a theme file will result in a 301 answer. Even in this little example the number of requests goes up to 16 and the transmitted KB is already 2 KB higher.
The SAP Web Dispatcher 7.2 features URL rewriting: the modification is transparent to the browser.
RegIRewriteUrl ^/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/tobias_blog(.*) /irj/go/km/docs/themes/portal/tobias_blog$1
Instead of sending a 301 back to the browser, the Web Dispatcher will act as a reverse proxy and resolves the redirect internally. When the portal now is accessed over the Web Dispatcher there won’t be a 301 redirect and the number of requests will be the same as when the portal is accessed directly.
The files will be loaded from the KM and use the new max-age value the was configured earlier for the KM CC:
Now we have a custom specified max-age cache for the theme while using the KM CC, all transparent to the browser. There are still some aspects that have to be consider when “outsourcing” your portal theme files as described above:
- Of course this is not really supported. All the techniques are standard, but you copied the portal theme from the application to the KM. It’s your task to ensure that all files are copied and accessible
- Every change in the portal theme means that you have to copy the whole theme again. Again, this will be your task
- KM setup has to support the new access scheme
An advantage is that you can now control the theme files better:
- ACL of the KM
- Transparency of the theme file location. Instead of copying them to a KM folder you can also copy them to another server
- Complete control over the files and their content