The ability to add brand colors and other simple design features to an app can be very important for SAP customers. Let’s face it, employees are normally more loyal to their employer than their software vendor.

So even if the BlueCrystal theme from the SAP is great, it would be nice to have a simple way to change basic branding features.

Last time I was in Waldorf I met with Andreas Kunz and Frederic Berg and they showed me the new SAP on-demand Theme Designer and that was exactly what we were looking for.

At Neptune Software we have embraced the new UI5 framework from SAP so obviously we decided to integrate this feature into our designer.

This feature was released in our support package 2 of the 2.20 release of the Neptune Application Designer. To be able to use this feature with the Neptune Application Designer please update the Neptune Developer Role as well.

There is a new folder in the Role called Theme and it includes both a link to the Theme Designer from SAP and import function for Neptune:


Capture.PNG

The UI5 Theme Designer link will take you to the SAP site (You need to have an S-User here):

Capture.PNG


There are some different ways to use this tool. One way that works well is to test out one of the standard applications included as examples and see how your design will look and feel using the preview function:


Capture.PNG


You can now start changing the Theme. Use the Help link for information about the usage and test out the Quick, Expert and CSS options. Here is an example of a Neptune branded UI5 App:


Capture.PNG



When you are done designing, choose the Theme dropdown menu and select export:


Capture.PNG


Choose name id and vendor for your package and save it to local disk:


Capture.PNG


Unzip the downloaded file to a directory and go to the import transaction in the Neptune UI5 Theme Import:


Capture.PNG


After running the import you will be prompted for a transport request:


Capture.PNG


If the theme already exists you will be asked if you wish to update:


Capture.PNG


You will now be able to choose the new theme in the Neptune Application Designer theme tab:


Capture.PNG


Now you can preview your new themed App:


Capture.PNG


Design and theme away with your Neptune apps, it has never been simpler!


Read more about the SAP UI Theme Designer here.

To report this post you need to login first.

6 Comments

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

    1. Njål Stabell

      No, it will only work with SAP UI5 applications. Neptune Application Designer runs in the SAPGUI but the applications that are themed will only work on browsers or as Hybrid Apps.

      Njål

      (0) 
  1. Fabio Di Micco

    Great new feature in this SP2!!! this feature is very helpful, especially when customers don’t like the BlueCrystal theme 😉

    Thanks for sharing

    Fabio

    (0) 
  2. Morten Prom

    Hi.

    The creation of a simple theme in the Theme Designer is easy and the import into Neptune works very well. But I want to go a little bit deeper and manipulate the base LESS attributes like @sapUiText or @sapUiButtonBackground.

    But I can’t get that to work. First I’m missing a list of LESS attributes, if I look in the library.less source code on github, I find a lot of attributes. But how can I manipulate them in the CSS tab in the Theme Designer?

    I want to be able to do something like this:

    @sapUiButtonBackground: #FF55EE;

    (0) 

Leave a Reply