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.
- In the UI Theme Designer, open your theme.
- 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.
- 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.
- Click on the application name in the HTML5 application list.
- 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:
- 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 - Adjust your app to use the theme. There are 2 ways to do this:
2.1. Using the URL parameters:
- Open the Run Configurations dialog by right-clicking on the project and selecting
Run > Run Configurations. - Select the configuration you are using and go to the URL Components
- 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:
- Open the HTML file you are using to preview your application.
- In the sap-ui-bootstrap tag, do the following:
- Edit the value of data-sap-ui-theme to your Theme ID as defined in UI Theme Designer
- 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”}’
- Open the Run Configurations dialog by right-clicking on the project and selecting
- 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.
Thanks Elina, I just tried this out, worked first time. Good start to the day!
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
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
Hi Elina,
How we can apply the custom theme to Fiori Launchpad in Cloud ?
Regards,
Sambhav
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.