Applying corporate design guidelines to your SAP Enterprise Portal is about to become much easier.

Are you familiar with the UI Theme Designer tool in SAP Enterprise Portal? If not, I’d like to expose you to an improved theming experience (compared to the Theme Editor you’re probably familiar with).

The UI Theme Designer is a browser-based tool that enables easy theme building by modifying one of the theme templates provided by SAP.

 

ScreenshotAFP_Tradeshow.png

Why Use the UI Theme Designer?

By using the UI Theme Designer in the Portal, you can benefit from the following:

  • Increased theming efficiency (reduced theming effort for customizing portal and integrated applications).
  • Ease of use – simple and intuitive.
  • Reduced theming effort.

We achieve these benefits providing the following capabilities:

  • Graphical web-based WYSIWYG editor for controls as well as applications.
  • Different levels of theming:
    • Quick theming – Used for general theme settings affecting various SAP UI technologies.
    • Expert theming – Used for SAP UI technology-specific theme settings.
    • CSS – Manual theming based on LESS style sheet notations.
  • Built-in preview pages: Application previous and control overview pages.
  • Enabled for SAPUI5 and Unified Rendering.

 

Availability

The UI Theme Designer is available in SAP NetWeaver 7.30 SP10, 7.31 SP9 and 7.40 SP4 onwards.
From NW7.31 SP18 and NW7.40 SP13, the UI Theme Designer is the default theming tool.
In NW7.50 onwards the UI Theme Designer is the only theming tool available.

 

Migrating Themes for Use with The UI Theme Designer

You can import portal themes for use with the UI Theme Designer. Themes customized using the Theme Editor must be exported before the UI Theme Designer is activated. The exported themes should be imported (migrated) after activating UI Theme Designer. The following video contains all you need to know about Theme Migration in less than a minute.

 

Activation of UI Theme Designer

Configuration for activating the UI Theme Designer is also fast and easy. The configuration is illustrated in the following video in less than a minute.

 

 

Examples of Theming Capabilities

After doing the previous steps (Theme Migration (if required) and UI Theme Designer activation), you can now enjoy creating and editing themes in an easy, simple, and intuitive way. Examples of different levels of theming: Quick, Expert and CSS are provided in the following video.

 

 

You can also create one custom theme for multiple framework pages, as shown in the following screenshot:

 

Theme for multiple framework pages.png

 

If you need the support of Right-To-Left (RTL), starting from SAP NetWeaver 7.31 SP13, simply need select the RTL checkbox in the theme properties.

 

RTL.png

 

In case you need to create a theme, which is very similar to an existing one and change only minor things, the feature of “copy” could be very efficient and save you some time. You would also be able to use the “delete” option if you choose to delete themes.

 

Using Themes in Different Systems

After creating your custom theme, you can transport it by exporting and importing it to the test system or production system in order to make the theme available there as well. Import and Export are done in the standard manner, using epa archives.

 

 

Fallback Themes

In some cases, the theme you had created in the UI Theme Designer (e.g. based on blue crystal) may result at runtime in a theme request that cannot be fulfilled, because the requested theme is not valid and cannot be rendered. You can easily overcome this issue by creating a fallback theme using the UI theme designer and assigning it to the custom theme (refer to the screenshot below). This theme will be used whenever a requested theme resource is unavailable.

 

Fallback theme.png

 

Recommendations and Known Limitations

  • The UI Theme Designer, Theming engine and UI5 content are located in the UI5.SCA. In order to upgrade them you need to deploy the latest patch of this SCA, as indicated in note 2083857
  • Note 1890375
  • Note 1895989 – UI5 iView stylesheet rendering issues.
  • Note 1959708

 

Further Information

 

 

Enjoy – We’d appreciate your feedback 🙂

To report this post you need to login first.

4 Comments

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

  1. Tobias Hamdorf

    Hello Orit,

    sorry but this tool is so far away from being easy to use. Most of the time you can only use the expert mode an there are like 10k of properties und you can only try to guess which is the correct one since the names are everything but straight forward. I could not find any guide or documentation of SAP for the parameters… I had a thread about that in the old scn but i can’t find my old content because it does not seem to be linked with my migrated profile (which is quite sad), so i can’t give you a link to it.

    BR
    Tobias

    (0) 
  2. Devisha Bhavik

    Hi,

     

    Thanks for the nice blog!

    One quick question. If we turn on UI Theme designer in DEV Portal and develop the theme there then we can export it using epa file to other portal systems. Now, do we need to activate UI theme designer on all the Portal systems in order to use imported theme??

     

    In our case, we have developed Fiori Launchpad theme using UI theme designer on DEV Portal. Now, we wants to use this theme for the Fiori Launchpad which is planned to be used only for mobile devices. For desktop/laptop, we would continue to use the existing AJAX framework and existing themes.

     

    Does it possible or do we need to activate UI theme designer on all Portal systems even we are not planning to build or modify developed themes there?

     

    Thanks,

    Bhavik

    (0) 
    1. Orit Harel Post author

      Hi Bhavik

      For SAP NetWeaver 7.30 SP10-SP17, 7.31 SP9-SP12 and 7.40 SP4-SP12, you need to activate the UI Theme Designer in all portal systems in order to use the imported themes. From NW7.31 SP18 and NW7.40 SP13, the UI Theme Designer is the default theming tool so activation is not required and of course not in NW7.50, where the UI Theme Designer is the only theming tool.

      In order to use the existing AJAX framework pages for desktop/laptop you need to follow the instructions, which are detailed in the section “Migrating Themes for Use with The UI Theme Designer”. You can see in that section that activation is required as well even if you’re not planning to build or modify them.

      Regards, Orit

      (0) 

Leave a Reply