Skip to Content

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 assets

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.

WRR_customFolder.jpg

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.

WRR_activeBrandingVersion.jpg

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’.

WRR_activeTheme.jpg

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

WRR_Branding_structure.jpg

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


To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Jan Thomas Nygaard

    Hi Liran,

    Thanks for a great blog – it really helped me

    unfortunately I can’t get it to take effect which I also ask in a related blog here SAP NetWeaver Portal: Mobile Framework Page Bra… | SCN 😐

    I have changed palette file properties to:

    @main-color: white;

    @secondary-color: black;

    And uploaded into a folder called sap_tradeshow_plus as that is the theme_id of my mobile desktop but no changes when I log in again.

    The less file compiled to empty .css so I didn’t upload any new .css files.

    Do I need to clear any cache or restart server for this to take effect?

    Br Jan

    (0) 
    1. Gitit Sagiv

      Hi Jan,

      The palette less file uses as a template for the other less files. Meaning, any changes done on this file affects the other less files as well.

      You should locate all less files under the same folder and compile them together (by executing the WinLess on the folder level).

      Then, you should upload the updated less files and css files (the ones that are not empty-size 0) to WRR (as part of the customized root folder and all its files).

      Regards,

      Gitit

      (0) 

Leave a Reply