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.

Migrating from an old theme version to the new UI Theme Designer is new for me. Previously I had the chance to start from scratch and build a new theme from the sapgoldreflection. Now my customer has a current theme and I need to migrate it from an 7.30 SP08 to SP10 version.

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”: {

Buy Set International Dresser Td-7 Series E Td-7E Dozer Service Repair Shop Manuals: Spare & Replacement Parts - Amazon.com FREE DELIVERY possible on eligible purchases. HJ3933 Service Manual. This Service Manual (AKA Shop Manual or Repair Manual) Tells you how to take the Machine apart, fix it, and put it back together. It is Written in the Language of a Mechanic and may Include Valuable Detailed Information such as Specifications, Torques, Ranges, etc. International Harvester TD7E Crawler Manuals Our manuals have Free Shipping and Guaranteed Lowest Prices. Parts, Owners and Service Manuals are typically available for your International Harvester TD7E Crawler. Please see availability below. Which Manual Do I Need? This International Harvester model TD7E Diesel Crawler Service Manual (Chassis Only) is a digitally enhanced reproduction of the original manufacturer-issued Shop Manual. This manual covers SN# 0-9500. It has 400 pages of the best technical information and instruction for your Crawler. Komatsu Dresser Dozer TD7C, TD7E. TD8C and TD8E Service Manual – 412 Pages. This Dresser Dozer TD7C, TD7E. TD8C and TD8E manual acts an aid to improve the quality of repairs by giving the serviceman an accurate understanding of the product and by showing him the correct way to perform repairs and make judgements. Make sure you understand the. Td7e dresser dozer.

“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

Sumber materi Soal UTS Kelas 6 Semester 2 Kurikulum 2013 Revisi ini mengacu pada Kurikulum Tingkat Satuan Pendidikan (KTSP) atau kurikulum 2006 dan 2013 (kurtilas) serta pada buku paket tahun ajaran terbaru yang digunakan pada setiap satuan Sekolah Dasar (SD). Soal UTS Kelas 6 Semester 2 Kurikulum 2013, B. Bacalah penggalan teks berikut ini! Selalu menjaga dan memelihara nama baik bangsa merupakan bentuk tanggung jawab warga negara di mata dunia internasional sebagai bangsa dan negara yang merdeka, berdaulat, beradab dan bermartabat. Soal uts kelas 6 semester 2 kurikulum 2013 revisi 2017.

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>

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.