Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Using UI Theme Designer in SAP Enterprise Portal

Former Member
‎09-11-2014 10:09 AM


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.

 



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:


 



 


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.

 



 

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.

 



 

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 :smile:


5 Comments
Labels in this area
Popular Blog Posts