Skip to Content
Author's profile photo Elina Visoki

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.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo DJ Adams
      DJ Adams

      Thanks Elina, I just tried this out, worked first time. Good start to the day!

      Author's profile photo Gregor Wolf
      Gregor Wolf

       

      Hi Elina,

      thank you for this post. It's just what I was looking for. But unfortunately I wasn't able to make it work. We've created a custom theme that is already applied on the SCP Portal. There the requested path for i.e. the library-parameters.json is:

      /api/theming/UI5/sap/fiori/themes/mytheme/library-parameters.json?version=1.54.5&sap-ui-dist-version=1.54.5

      when I apply the settings you've described above the path requested is:

      /mytheme/sap/m/themes/mytheme/library-parameters.json

      As our theme was published as an HTML5 application using the Publish button in the Theme designer I've also tried the Export as ZIP and import as HTML5 applicaiton. But also this lead to the same result. Hope for your help.

      Best regards
      Gregor

      Author's profile photo Miroslaw Karaskiewicz
      Miroslaw Karaskiewicz

      Hi Gregor,

      you must export theme from Theme Designer with full option (check last checkbox) – Source Files + CSS Resources + Base Theme Resources. 

      Ensure that you have file library-parameters.json in exported theme zip file.

      It works fine on my apps. No deploy of apps to FLP and Clud is required, as I see.

      Theme should see any app starting from Cloud.

      Nice testing.

       

      BR,

      Miro

       

      Author's profile photo Sambhav Dublish
      Sambhav Dublish

      Hi Elina,

      How we can apply the custom theme to Fiori Launchpad in Cloud ?

      Regards,

      Sambhav

      Author's profile photo Viktor Hildebrandt
      Viktor Hildebrandt

      Hi Elina,

       

      Thanks for the helpful post.

      One comment.

      In your example how to adjust the app to use the theme (2.1) the value should

      mytheme@/mythemepath because in your neo-app.json you defined the path as mythemepath.

      Thanks again that helps a lot.