Skip to Content

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

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

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

 

 

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

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

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

To report this post you need to login first.

11 Comments

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

  1. Former Member

    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 ?

    (0) 
      1. Raghav Rathor

        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

        (0) 
        1. 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

          (0) 
  2. Alexey Myakinkii

    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.

    (0) 
      1. Raghav Rathor

        HI Alexey,

         

        Hope you are doing good !!!

        If possible could you please add a screenshot of your steps in new comment.

         

        Regards,

        Raghav Rathor

        (0) 
        1. Alex Myakinkii

          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.

          (0) 

Leave a Reply