Skip to Content

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.

To report this post you need to login first.

2 Comments

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

  1. 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

    (0) 

Leave a Reply