Step-by-Step Styling using Theme Designer in SAP Cloud Platform
Step-by-Step Styling using Theme Designer in SAP Cloud Platform
Introduction
- In this Blog we will see how to create a custom theme for an application in SAP cloud platform
- We will also see an overview of the theme designer and how to style using it for a custom SAPUI5 application.
Step-1 : Register for Theme Designer in WebIDE and Deploy an Application to SCP
1.Register for Theme Designer in WebIDE. In cockpit->Subscriptions->New Subscription.
- Provider Subaccount->themedesigner (it will come by default)
- Application->themedesigner
- Subscription->themedesigner
Save. It will appear as a new HTML Application
- Create a new project in webIDE and add the following code in neo-app.json
Inside routes add the following
Path for theme designer
{
“path”: “/themedesigner”,
“target”: {
“type”: “application”,
“name”: “themedesigner”
},
“description”: “Route for theme designer”
},
Path to application
{
“path”: “/theme1”, //Theme path in WebIDE
“target”: {
“type”: “application”,
“name”: “theme1” //Name of Theme
},
“description”: “Route for theme”
}
Deploy the application to Hana Cloud Platform. Need not register on launchpad
Step-2 Creating a new Theme in Theme Designer
- Create a New Theme in themedesigner
Go to Cockpit->HTML5 applications ->Get the URL of your app and append “themedesigner” to it
https://ztheme-p1941088635trial.dispatcher.hanatrial.ondemand.com/themedesigner.
- Cloud will be selected by default.Click on “Create a new Theme” and add the URL of your app in the “Link to Application field”
Link to Application:
(Take URL of your application from Cockpit->HTML5 applications->Click on your application):
https://ztheme-p1941088635trial.dispatcher.hanatrial.ondemand.com
Name of the Application: Give a name to your application and click on add
- Choose base theme which you want to edit( say, SAP Belize), Give an ID to your theme (Note: You will be using the same name you have given in WebIDE neo-app.json file.
Apart from this, you can choose to edit a standard SAPUI5 application , SAP Fiori Launchpad,SAPUI5 controls from Explored (Click on SAPUI5 application Preview)
UR Control previews and UR application Previews are for WEBDynpro Applications
Step-3: Styling with Theme Designer
There are 4 stages of styling
- Quick Theming- For majority of changes
- Expert theming-Fine tuning
- Palette- Define your organizations color palette which can be reused
- CSS- add custom CSS( not recommended since version upgrades require manual editing)
1.Quick Theming
You can choose colors from the panel in the right for major controls.
It consists of
Main colors( used throughout the app),Shell(launchpad),Group(panels,tables,etc.),Tile(Launchpad tiles),Application Background,Object header,List,Text attributes,Icon Attributes,Button,Semantic Colors(Positive,Negative,Critical,Informative),Scrollbar,toolbar and field that can be customized).
2.Expert Theming
It consists of Detailed styling of elements. Say, we consider a button , following are the few editable classes:
sapButton_Accept_Background | ||
sapButton_Background | ||
sapButton_BorderColor | ||
sapButton_BorderCornerRadius | ||
sapButton_BorderWidth | ||
sapButton_Emphasized_Background | ||
sapButton_Emphasized_BorderColor | ||
3.Palette
Here you can define a palette of colors that is specific to your organization’s theming and give a name for each color. Add a New Name in the empty text box and click on ‘+’. Choose the color from the palette
You can reuse these colors by referring to the names that you have given here.
Step-4 : Applying the theme to SCP Application
1.Once you are done with styling, click on Theme->Save and Publish.
2.Once the theme is saved, Click on Theme ->Test Build. You can save the theme locally by choosing Theme->Export
3.Now go Back to your SCP cockpit and click on HTML5 applications. You can See your theme here with the name you had specified in Step-2 Creating a new Theme in Theme Designer.
4.Import this application in WebIDE.
Note: Application Name will same as the name mentioned in neo-app.json file in Step-1 : Register for Theme Designer in WebIDE and Deploy an Application to SCP.
5.Theme should have the below structure
Check for library-parameters.json file in this path- theme1->UI5->ui->layout->themes->theme1->library-parameters.json.
If you don’t find this file, do a test build again from themedesigner.
- In the Custom app’s index.html, add these two parameters in the script tag.
In data-sap-ui-theme : add your theme ID and in data-sap-ui-theme-roots : add your theme applications root path
{“<themeId>” : “/<applicationPath>/<themeName>/UI5/”}
-
<themeID>: The ID you have provided when you exported your theme from the UI theme designer to your local hard disk.
-
<path>: The application path you used for your mapping in the application descriptor file of the application to which your custom theme should be applied . See Accessing Custom Themes from an SAPUI5 Application.
-
<theme name>: The name of the application carrying your theming files.
- Run the app. You can see your new theme applied to the app.
Thanks for reading!. In my next Blog I would be detailing on how creating and deploying custom theme in SAP system and managing theme with version upgrades.
I tried published and build my custom theme many times but still there is no library-parameters.json file. Can you tell me what could be the issue?
Experiencing same problem...
Hey Akshaya, Thanks for this post.It's a very good read indeed.
But I'm facing issues while applying a theme that I created.
After saving and publishing , I checked the folder structure , and there's no
library-parameters.json file . Instead, there's a library.less file. Can you provide a fix ?
DId you try to proceed with the .less file?
Hi Akshaya,
Thanks for the blog !!!
I am facing the same issue, library-parameters.json file is not generating, proceeding with the .less file, output is not coming up.
Could you please provide your input on this.
Regards,
Raghav Rathor
Hi Akshaya,
After re-generating the theme again, i am able to see the the library-parameters.json and run the app, but output is not coming as expected.
I have added the background image and some text color, but the app alignment and layout is completely different , in preview mode of the theme it was showing the result correctly, after importing the theme everything got changed.
Regards,
Raghav Rathor
At first would like to thank the author for that helpful article.
I also faced issue with building and publishing the theme.
Found simple workaround that worked for me: export theme locally and then manually create an html5 app with theme content.
Basically after you create an empty html5 app in scp you just need to press "edit application using sap webide" button and then import the theme from zip file you just exported.
Hope this helps until sap fixes the building stuff.
Regards, Alex.
could not edit my comment for some reason to add a pic (
HI Alexey,
Hope you are doing good !!!
If possible could you please add a screenshot of your steps in new comment.
Regards,
Raghav Rathor
Hi Raghav.
Please try performing following steps:
1 in theme designer just do Theme -> Export so you get the zip file with your theme
2 in html5 apps create a new one and then press the edit in webide button as can be seen in screenshot above
3 press the "Clone" button in the dialog after the webide is opened, it will create a project for you
4 import zip file into project with File -> Import -> From file system (make sure you unzip files into root directory of your project so that it looks like the screenshot from the step-4.5 of original manual)
5 deploy it to scp and then proceed to step-4.6 of original manual
Hope this helps,
Regards, Alex.
Anyone knows how to apply the theme to an application which is running as component inside the Fiori Launchpad?