Theming your Neptune UI5 App with SAP Theme Designer

[ole-andr_haugen]

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:

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

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:

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:

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

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

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

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

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

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

Now you can preview your new themed App:

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

Read more about the SAP UI Theme Designer here.