SAP Multichannel Foundation for Utilities and Public Sector: How to Create Custom Theme for Responsive UI Template

[tracy_xian]

SAP Multichannel Foundation for Utilities and Public Sector delivers a UI template application with the theme: umc_bluecrystal, which was based on SAP standard theme: sap_bluecrystal.

You can modify umc_bluecrystal or create your own to adapt the visual appearance of applications using UI theme designer. Since umc_bluecrystal is not SAP standard theme, it is not listed on the start screen in the UI theme designer until you have made it available.

Create theme umc_bluecrystal

     Procedure:

• Start the UI theme designer.

Use transaction /UI5/THEME_DESIGNER in your NW GW system. On the start screen, select sap_bluecrystal from the theme list and click on ‘Open’ button.

• Add Target Pages

Add the link to Application and click on ‘Add’ button.

• Save theme

Click on Menu Theme then Save As… with Theme ID: umc_bluecrystal and Title: UMC Blue Crystal

• Publish theme

Click on Menu Theme then Save & Build.

Export theme

     Procedure:

• Start the Tool for Customer Themes Maintenance using transaction /UI5/THEME_TOOL in your NW GW system.
• Navigate to the umc_bluecrystal theme.

• Select Download and choose .
• Save the zip file on your local hard disk .

Import theme

• Copy UI5 folder from the foundation of our UI template application

Please see How to Set up Template Mobile UI Application for Local Development.

• Replace the UI5 folder in the previous zip file with the copied one from the foundation of our UI template application

• Start the Tool for Customer Themes Maintenance using transaction /UI5/THEME_TOOL in your NW GW system.
• Select Upload and click on Choose icon

• Select the zip file and click Yes for the following screen.

Now umc_bluecrystal is available on the start screen in the UI theme designer. You can start to edit umc_bluecrystal or copy your own theme using the theme designer.

Apply new theme to application

After performing “Save and Build” for the modified theme, you need to apply it to the application.

Procedure:

• Export theme from the theme designer to your local drive as a zip file
• You then have two options.

Option 1:

Upload new theme in a folder which is available in NW GW in public folder (/sap/public/bc/ui2/) and change the path of data-sap-ui-theme-roots in index.html of private application

      Option 2:

• Replace the UI5 folder from our foundation of our UI template application with the UI5 folder in the zip file
• Upload the foundation back to NW GW server