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

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

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

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

3. 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:

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.

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

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