How to Preview an App in SAP Web IDE with Custom Theme

Have you ever wondered how you can preview your app in SAP Web IDE with your custom theme created in the UI Theme Designer?

In this blog I’ll explain how to test a theme that was created using the UI Theme Designer with an app developed in SAP Web IDE.

Prerequisites:

You have created a theme using the UI Theme Designer.

Step 1: Exporting the theme and importing it to SAP Cloud Platform.

1. In the UI Theme Designer, open your theme.
2. From the Theme menu, select Export.
   A ZIP file will be downloaded to your computer.Notice that the option Save & Publish from the UI Theme Designer doesn’t do the same. This option deploys “.less” files, while using the export option we get “.css” files.
3. Go to SAP Cloud Platform cockpit > Applications > HTML5 Applications and import the ZIP file:Your theme is now an HTML5 application in the SAP Cloud Platform cockpit. You only need to activate it before you can continue.
4. Click on the application name in the HTML5 application list.
5. In the left panel, navigate to Versioning. Under History, select Versions and under Actions, activate the current version of the application as shown in the image below:

Step 2: Adjust your app to use the newly created theme.

In SAP Web IDE, select your project and make the following changes:

1. Add the following route to the neo-app.json file as the first route:

   {
         "path": "/mythemepath",
         "target": {
           "type": "application",
           "name": "mytheme"
         },
         "description": "My new theme"
   },
   ​

   Property	Value
   path	Can be any string. We will use it later.
   type	application (since our theme is deployed as an HTML5 application in the SAP Cloud Platform cockpit)
   name	The name of the application as defined in the previous step, when you imported the app to the SAP Cloud Platform cockpit

2. Adjust your app to use the theme. There are 2 ways to do this:
   

   2.1. Using the URL parameters:

   1. Open the Run Configurations dialog by right-clicking on the project and selecting
      Run > Run Configurations.
   2. Select the configuration you are using and go to the URL Components
   3. Add a URL parameter with the following values:

      Name	sap-theme
      Value	<your Theme ID as defined in UI Theme Designer>@/<the path as defined in the neo-app route>

      For example:

      

      You can find the Theme ID in the UI Theme Designer’s home page:
      

      2.2. Updating the HTML file:

      1. Open the HTML file you are using to preview your application.
      2. In the sap-ui-bootstrap tag, do the following:
         1. Edit the value of data-sap-ui-theme to your Theme ID as defined in UI Theme Designer
         2. Add the data-sap-ui-theme-roots property where the value is

            ‘{“<Theme ID>”: “/<the path as was defined in the neo-app route>/UI5”}’

             

            

             

3. Click Run.
   The application will be displayed using the cool new theme.
   

More information about Setting Themes for SAPUI5 Applications can be found in the documentation.

Stay tuned to learn more tips and tricks for working with SAP Web IDE.