Easy Branding Using SAP NetWeaver Portal Web Resource Repository (WRR)

[Former Member]

Introduction:  

You are probably familiar with the Web Resource Repository (WRR) – which is the new way to manage your application styling assets (established in 7.30 SP8). If you aren’t familiar with it, you can first read the following blog: SAP NetWeaver Portal Web Resource Repository (WRR) - Your new way to manage your application styling...

The Portal mobile framework page (MFPs) resources are stored in the WRR. This allows you easily modify or use these resources to brand your portal for mobile devices. For more information on MFP, see: Implementing Portal on Device

In this blog I will demonstrate how a Content Administrator can easily brand mobile portal without any need for deployment or restarting services.

How to brand your Mobile Portal in few steps?

1. Open the Web Resource Repository
2. Expand the Web Resources/Application Branding/~com.sap.portal.navigation.mfp.resources folder.
3. Expand the Active Version Folder.
   Tip: In SP8 the folder with the highest number – is the active version folder.
   For more details see the section below: ApplicationBranding Resources – Version Mechanism.
4. Select the 'default' folder.
5. Download the 'default' folder.
6. Extract the zip file.à A 'default' root folder should be created with all resources under it.
7. On your local file system - customize the files.
8. Change the root folder name to be the same as the Portal Theme ID you are using in your mobile portal desktop (in my example: 'custom'). If you overwrite the 'default' folder, it will affect all portal themes by default. For more details see the section below: ApplicationBranding Resources – Structure Mechanism.
9. Add the customized root folder and all its files to a compressed (.zip) file.
10. Back to WRR – Select the Active Version Folder.
11. Start the Upload Resources Wizard.
12. Browse to your zip file and upload it.

As a result: Under the Active Version Folder you should find your new folder with your structured resources beneath it. Now, with no deployment or need to restart services, when an end user logs into the matching mobile portal desktop or just refreshes it – those resources should be included in its portal framework responses.

Tip: If you would like to restore the baseline of ~com.sap.portal.navigation.mfp.resources, you should:

1. Delete the folder ~com.sap.portal.navigation.mfp.resources
2. Restart the application com.sap.portal.navigation.mfp.resources

Application Branding Resources

Resources imported to the WRR using Branding Service (com.sap.portal.resource.repository.branding), are created under the Web Resources/Branding Application folder according to a specific structure and version mechanism.

com.sap.portal.navigation.mfp.resources uses this Branding service therefore its resources are delivered in a specific structure (…theme/default/…resources…) and created with a matching structure under the relevant version folder.

Version Mechanism

If any difference between resources (data or metadata) from one version to another was found during the restart of the application (e.g. com.sap.portal.navigation.mfp.resources) – a new version folder will be created, and the new version folder will become the "Active Version Folder" (meaning that any changes you make in the WRR are not overwritten).

Active Version Folder – Resources under this folder are the ones which are included in the response and affect application branding (at runtime).

How to find out which folder under a specific application is the Active Version Folder? – Select the Web Resources/Application Branding/<application> folder à right-click à Properties à find the property name: Active Branding Version. The property value is the version number and the name of the Active Version Folder you are looking for.

Structure Mechanism

There is a relationship between the name of the folder under the Active Version Folder and the resources that at runtime are included in the response.

At runtime the application runs in a specific Portal Desktop which has a default theme.

In this example you can see that the default theme ID for Smartphone Portal Desktop is 'custom', so the root folder name for all custom resources should be 'custom'.

The flow that determines which resources will be included at runtime is described in this diagram:

More details about portal themes: Working with Portal Themes

Conclusion & Outlook:

In this blog we've seen the WRR’s powerful enhancement to the branding process and learned how to use the WRR in the branding process.

There is a complementary blog that should help you further with the branding process: Mobile Framework Page Branding Using the Palette File