You are on page 1of 73

NEW USER INTERFACE THEME DESIGNER

CD167




Frederic Berg, Bertram Ganz, Thomas Hensel, Andreas Hirche,
Uwe Klinger, SAP AG












2

TABLE OF CONTENTS

Exercise 1: Getting started ........................................................................................................................ 5
Start UI Theme Designer ......................................................................................................................... 6
Adding a preview application ................................................................................................................... 8
Changing the theme ................................................................................................................................ 9
Saving the theme ..................................................................................................................................... 15
Exercise 2: SAPUI5 Theming .................................................................................................................... 17
Start the UI Theme Designer ................................................................................................................... 18
Adding a preview application ................................................................................................................... 19
Quick Theming ......................................................................................................................................... 20
Add Company Logo ................................................................................................................................. 22
Expert Theming ....................................................................................................................................... 26
Add Custom CSS ..................................................................................................................................... 28
Saving the theme ..................................................................................................................................... 30
Exercise 3: Cross-theming ........................................................................................................................ 31
Start UI Theme Designer ......................................................................................................................... 32
Load preview pages................................................................................................................................. 33
Load background image and logo ........................................................................................................... 37
Quick Theming ......................................................................................................................................... 44
Base Parameters ..................................................................................................................................... 48
Add CSS for SAPUI5 ............................................................................................................................... 52
Tweak NWBC .......................................................................................................................................... 55
Tweak UR ................................................................................................................................................ 59
Publish Theme ......................................................................................................................................... 61
Result ....................................................................................................................................................... 62
Exercise 4a: Specify a theme using URL parameters (optional) ............................................................... 64
Determine URL parameters ..................................................................................................................... 65
Use sap-theme URL parameter for a Web Dynpro application ............................................................... 67

3

Exercise 4b: Configure a theme for NetWeaver Business Client (optional) .............................................. 68
Preqrequiste: Copy a role ........................................................................................................................ 69
Change NWBC customizing .................................................................................................................... 70
Start NWBC with your role ....................................................................................................................... 72




4

ABSTRACT

Modern enterprises want their user interfaces to reflect the company’s products, philosophy, and strategy.
The newly introduced UI Theme Designer is the tool for theming and branding that enables SAP customers
to harmonize and spice up their Web applications which are based on Floorplan Manager, Web Dynpro for
ABAP, and SAPUI5 (including SAP Fiori applications). Recognition value and companies identities will be
strengthened to help enterprises be even more successful, internally and externally.


OVERVIEW

In the hands-on session CD167 you will learn how to work with the new UI theme designer.

Exercise 1: Getting started (20min)

In this exercise you will use the UI theme designer to customize the look of Fiori applications. By this you will
learn the usage and basic functions of the UI theme designer.

Exercise 2: SAPUI5 Theming (20min)

This exercise is about theming of SAPUI5 applications. It also introduces you to the possibility to add custom
CSS.

Exercise 3: Cross-Theming (30min)

How to create one theme supporting different technologies is explained in this exercise.

Exercise 4a: Specify a theme using URL parameters (10min, optional)

This optional exercise shows how to use URL parameters to apply a theme to an application.

Exercise 4b: Configure a theme for NetWeaver Business Client (15min, optional)

This optional exercise explains how to configure a theme for use with the NWBC.


BEFORE YOU START

For all exercises please use Google Chrome browser.

5

EXERCISE 1: GETTING STARTED
Estimated time: 20 Minutes


Objective


In this exercise you will use the UI theme designer to customize the look of Fiori applications. By this you will
learn the usage and basic functions of the UI theme designer.

What you will learn

 How to start the UI Theme Designer
 How to select a SAP standard theme as template
 How to add preview applications and control previews
 How to change colors and images
 How to save a custom theme

Exercise description

The whole exercise is divided into 4 steps.



6

Start UI Theme Designer
In this step you start the UI Theme Designer from the ABAP system.

Explanation Screenshot
1. Select the entry M54
(TechEd'13) by double clicking it.


2. Enter "CD167-" plus your group
number (e.g. 07) into the User field.
3. Enter "welcome" in the Password
field and press enter



7

Explanation Screenshot
4. Double-click on UI Theme
Designer to launch the UI theme
designer in a browser window.


5. Enter CD167-XX in the
box. Replace XX with your group
number.
Confirm your entry by pressing the
Tab key.
6. Enter welcome in the
box.
7. Click .





8

Adding a preview application
In this step you will add a preview application to work with in the UI Theme Designer.
Explanation Screenshot
1. Click SAP Blue Crystal.
2. Click Edit .


3. Enter the URL for the Fioro
preview application in the Link to
Application box: /sap/public/bc/ui5
_ui5/demokit/test-
resources/sap/m/demokit/inbox/in
dex.html .
4. Enter in the box.
5. Click Add to add the
application to the target pages.


You can copy'n'paste the value for
the Link to Application field from
file ApplicationLinks.txt in
Desktop\Student
(share)\CD167\Exercise_1_Cross_
Theming






9

Changing the theme
In this step you change the theme, you learn how to:
 Change colors
 Upload images

Explanation Screenshot
1. Click on the color swatch for
Highlight Color to open the color
picker.


2. Select a green color.
3. Click .


4. Click for Brand Color .


5. Select a red color.
6. Click .




10

Explanation Screenshot
7. Click for Image Background
Color.


8. Select a green color.


9. Pick a light green color.
10. Click .


11. Click for Background
Image.



11

Explanation Screenshot
12. Click .


13. Click Desktop to display the files
on Desktop.
14. Double click on the entry
Student (share) to enter it.




12

Explanation Screenshot
15. Double click on the entry
CD167 to enter it.


16. Double click on the entry
Exercise_1_Getting_Started to ent
er it.



13

Explanation Screenshot
17. Double click .


18. Select image.
19. Confirm the image change by
clicking .


20. Enter false in the Background
Image Repeat box.
Confirm your entry by pressing the
Enter key.




14

Explanation Screenshot


Result of this step.




15

Saving the theme
In this step the new theme is saved ("published") to the theme repository in the ABAP system.

Use both for theme name and theme Id "cd167_XX_1" where you need to replace XX with your group
number.


Explanation Screenshot
1. Click .


2. Click .


3. Enter cd167_XX_1 in the
box (replace XX with your group
number).
Confirm your entry by pressing the
Tab key.
4. Enter cd167_XX_1 in
the (replace XX with
your group number) box.
5. Click .




16

Explanation Screenshot
6. Click .






17

EXERCISE 2: SAPUI5 THEMING

Estimated time: 20 Minutes


Objective


In this exercise you will use the UI theme designer to customize the look of SAPUI5 applications. By this you
will learn the usage and basic functions of the UI theme designer.

What you will learn

 How the change of colors and images affect SAPUI5 applications
 How to add custom CSS
 How to save a custom theme

Exercise description

The whole exercise is divided into 7 steps.


18

Start the UI Theme Designer

Log into UI theme designer as explained in Exercise 1: Getting Started. If the UI theme designer is still
open you can restart the it via pressing the browser reload button or create a new instance using the menu
Theme > New.

Explanation Screenshot
1. Select the theme SAP Gold
Reflection.
2. Click .




19

Adding a preview application
Explanation Screenshot
1. Test Suites are collections of
preview pages which can be used for
theming.
Click on UI5 Control Previews.


2.
The test suites contain groups of
preview pages. For SAPUI5, this
grouping follows the structure of the
official documentation.

Select the control set UX3.


3. Select the control preview page
Shell


4. Select the target page Shell





20

Quick Theming
Explanation Screenshot
1. Change the Background Color to
white. Then press enter.


2. Change the Brand Color to
#00bb00. Then press enter.


3. Change the Highlight Color to
#00bb00. Then press enter.


4. Change the Shell Header Color
to #1C4A21. Then press enter.



21

Explanation Screenshot
5. Change the Link Color to
#068A06. Then press enter.





22

Add Company Logo
Explanation Screenshot
1. Click on the value help for the
parameter Company Logo.


2. You can add files by a drag and
drop operation or by clicking on the
plus symbol.

Click on the plus symbol.


3. Select Desktop to display the files
on Desktop.
4. Double click on the entry Student
(share) to enter it.



23

Explanation Screenshot
5. Double click on the entry
CD167 to enter it.


6. Double click on the entry
Exercise_2_SAPUI5 to enter it.




24

Explanation Screenshot
7. The
entry agrimuyaLogo.png

is selected by double clicking on it.


8. Click on the newly added image to
select it .



9. Click .



25




26

Expert Theming
Explanation Screenshot
1. Click Expert to switch to Expert
Theming.


2. Theming parameters are
tagged and can be selected via
these tags. Click to open the
tag filter.


3. In order to change the appearance
of all buttons in the application we
switch to a page where a button is
displayed. Click .


4. Click on the Button tag to filter for
parameters relevant for buttons.



27

Explanation Screenshot
5. Change sapButton_Background
to #DCF7E0. Then press enter.


6. Change sapButton_BorderColor
to #96CC8F. Then press enter.





28

Add Custom CSS
Explanation Screenshot
1. In addition to Quick and Expert
theming, you can add your own
custom CSS to the theme.

Selec the tab CSS.


2. Double click on the entry Student
(share) to select it.


3. Double click on the entry
CD167 to enter it.



29

Explanation Screenshot
4. Double click on the entry
Exercise_2_SAPUI5 to enter it.


5. Double click on the entry
custom.css.txt to open it.




Please press CTRL+A to select the
prepared CSS text. Next, press
CTRL+C to copy this text to the
clipboard.


Switch back to UI theme designer
now.





Position your cursor in the empty
textarea on the CSS tab.

Please press CTRL+V to paste the
prepared CSS text from clipboard.






30

Saving the theme
Explanation Screenshot
1. Click .
2. Click .


3. Enter cd167_XX_UI5_Desktop in
the Name field (replace XX with
your group number).
4. Enter cd167_XX_UI5_Desktop in
the Theme ID field (replace XX with
your group number).
5. Click .




31

EXERCISE 3: CROSS-THEMING
Estimated time: 30 Minutes


Objective
In the following exercise you will learn how to create a theme that can be applied for multiple UI technologies
("cross-theming").

What you will learn

 How cross-technology parameters apply for different technologies
 How to use the base parameter set of expert theming
 How to find parameters using the search functionality

Exercise description

The whole exercise is divided into 8 steps.


32

Start UI Theme Designer
In this step you will start the UI theme designer.


Log into UI theme designer as explained in Exercise 1: Getting Started. If the UI theme designer is still
open you can restart the it via pressing the browser reload button or create a new instance using the menu
Theme > New.

Explanation Screenshot
1. Click .
2. Click .




The UI theme designer is now
launched to create a custom theme
based on SAP Gold Reflection




33

Load preview pages
In this step you will load applications and control preview pages.
Explanation Screenshot
1. Enter Exercise 3: cross-theming
in the theme name box.
Confirm your entry by pressing the
Enter key.


2. Enter
/sap/bc/webdynpro/sap/s_epm_fp
m_pd in the
box.
3. Enter in the box.
4. Click .


You can copy'n'paste the values for
the Link to Application field from
file ApplicationLinks.txt in
Desktop\Student
(share)\CD167\Exercise_3_Cross_
Theming


5. Click to add another preview
page.




34

Explanation Screenshot
6. Enter
/sap/bc/webdynpro/sap/s_epm_fp
m_pd?FPM_INITIAL_PAGE_PROC
_MODE=L&FPM_EDIT_MODE=R&
FPM_NAVI_SOURCE_KEY_ATTR_
PRODUCT_ID=HT-
1010&FPM_EVENT_PARAM_RAISI
NG_COMPONENT=ID_00010006&
FPM_GUIBB_LIST_INDEX_OLD=2-
&FPM_GUIBB_LIST_INDEX=2- in
the Link To Application box.

7. Enter Product Details in
the Name of Application box.
8. Click .


9. Click in the UI5 Control
Previews row to add SAPUI5 control
previews.


10. Click to open the Control
Set drop down box.



35

Explanation Screenshot
11. Click UX3Controls.


12. Click .


13. Click in the NWBC
Application Previews row.




36

Explanation Screenshot
14. Click .
15. Click .
16. Click .




You have added now 6 pages that
you can use to preview your theme
for different applications and
technologies.




37

Load background image and logo
In this step you will change the background image and the logo and see how it applies to different
technologies.
Explanation Screenshot
1. Click .


2. Click in the Background
Image row.


3. Click .




38

Explanation Screenshot
4. Click Desktop to show files of
Desktop.
5. Double click on the entry Student
(share) to enter it.


6. Double click on the entry
CD167 to enter it.



39

Explanation Screenshot
7. Double click on the entry
Exercise_3_Cross_Theming to
enter it.


8. Double click on the entry
LargeBG.jpg to
open it.




40

Explanation Screenshot
9. Click to select
it.
10. Click .


11. Click .


12. Click in the Company Logo
row.



41

Explanation Screenshot
13. Click .


14. Double click on the entry
agrimuyaLogo.png
to open it.


15. Click to
select it.
16. Click .




42

Explanation Screenshot


In SAPUI5 applications the
background image is only applied in
the shell header and the logo is
applied in the left top corner of the
header.




In Unified Rendering based
applications such as Web Dynpro
ABAP and the Floorplan Manager
the background image is applied to
the page. The logo is not used at all.





43

Explanation Screenshot


In the NetWeaver Business Client
the background image is applied to
the page. The logo is displayed in
the top right corner of the page - as
long as no logo is specified in the
customizing.









44

Quick Theming
In this step you will apply color changes that apply to all UI technologies.
Explanation Screenshot
1. Select target page Applications >
Search Products
2. Enter #ffd039 in the Brand
Color box.
Confirm your entry by pressing the
Enter key.
3. Enter #e6b000 in the Highlight
Color box to make it a bit darker
than the previously entered Brand
Color.
Confirm your entry by pressing the
Enter key.




The effect of changing the highlight
color can for example be observed in
drop down boxes or when hovering
over a button


3. Enter #49A2BF in the Base
Color box.
Confirm your entry by pressing the
Enter key.



45

Explanation Screenshot
4. Enterf rgba(73, 162, 191, 0.4) in
the Base Color box in order to have
40% transparency.
Confirm your entry by pressing the
Enter key. Alternatively you can use
the formula fade(#49A2BF,40%) to
enter the RGB code with 40%
transparency and get the same
value.


5. Enter #6c5200 in the Link
Color box to choose a color that is
40% darker than the Brand Color.
Confirm your entry by pressing the
Enter key. Alternatively you can
derive the Link color from the brand
color using
darken(@sapBrandColor,40%).
6. Enter #040300 in the Text
Color box.
Confirm your entry by pressing the
Enter key.




Results of this exercise step






46

Explanation Screenshot







47

Explanation Screenshot





48

Base Parameters
In this step you will change additional colors using the base parameters in expert theming. These parameters
apply to SAPUI5 and Unified Rendering but not to other UI technologies.
Explanation Screenshot
1. Click .


2. Click .


3. Click Button to select it.



49

Explanation Screenshot
4. Enter
desaturate(@sapBrandColor,
40%) in
the sapButton_Background box.
Confirm your entry by pressing the
Enter key.


5. Click Button to deselect it.
6. Click Field to select it.


7. Enter
fade(lighten(@sapBrandColor,38
%),90%) in
the sapField_Background box.
Confirm your entry by pressing the
Enter key.


8. Click Field to deselect it.
9. Click List to select it.


10. Enter
lighten(desaturate(@sapBrandCol
or,3%),30%) in
the sapList_HeaderBackground
box.
Confirm your entry by pressing the
Enter key.




50

Explanation Screenshot


Results of this exercise step







51

Explanation Screenshot







52

Add CSS for SAPUI5
In this step you add custom CSS to SAPUI5 in order to make the background image shine through the page.
Explanation Screenshot
1. Click .


2. Click CSS to open the CSS
editor.

Switch to desktop now, e.g. by
pressing Windows+D




53

Explanation Screenshot
3. Double click on the entry Student
(share) to select it.


4. Double click on the entry
CD167 to enter it.


5. Double click on the entry
Exercise_3_Cross_Theming
to enter it.




54

Explanation Screenshot
6. Double click on the entry
custom.css.txt to open it.




Press Ctrl+A to select all CSS text


Press Ctrl+C to copy all CSS text to
the clipboard.


Switch back to UI theme designer
now.



7. Click CSS text box.

Press Ctrl+V to paste the prepared
CSS text from clipboard.





Background image is now displayed
in the UX3 shell.




55

Tweak NWBC
In this step you will find and change a parameter to make the NetWeaver Business Client pages look
better.
Explanation Screenshot
1. Click .


2. Click .




56

Explanation Screenshot
3. Click the Chrome Menu to
open it.


4. Click the Tools menu item to open
the sub menu.
5. Click the Developer tools menu
item to open the developer tools
pane.



57

Explanation Screenshot
6. Click to select an element.


7. Click to display
details to the element in the
developer tools pane.


8. Click .

Please press ctrl c to copy the color
code #ffcd37 into the clipboard.



9. Click to close the developer
tools.




58

Explanation Screenshot
10. Click the filter box.

Please press ctrl v.


Please press enter to filter for
parameters that have the entered
color code.



11. Clear the
sapContent_DisabledTextColor
field.
12. Enter
desaturate(lighten(@sapTextColor
,60%),30%) in
the sapContent_DisabledTextColo
r box.
Confirm your entry by pressing the
Enter key.




The links in the NWBC pages have
now more contrast to the
background for better readability.




59

Tweak UR
In this step you will change the image for the underline of the Unified Rendering Panel control to better
match the theme and the images for the expand and collapse icons.
Explanation Screenshot
1. Click .


2. Click .


3. Enter selection_bg.gif in
the filter box.
Confirm your entry by pressing the
Enter key.




60

Explanation Screenshot
4. Click and proceed with
uploading and selecting
"selection_bg_new.gif"


5. Enter exp.gif in the filter box.
Confirm your entry by pressing the
Enter key.


6. Click and proceed with
uploading and selecting exp_new.gif
7. Click and proceed with
selecting the previously uploaded
exp_new.gif.




61

Publish Theme
In this step you will save the newly created theme on the server.
Explanation Screenshot
1. Click .
2. Click .


3. Enter cd167_XX_3 in the Theme
Id box. Where XX needs to
be replaced with your group
number.
4. Click .


5. Click .





62

Result

These are the results of the exercise.

Explanation Screenshot







63

Explanation Screenshot







64

EXERCISE 4A: SPECIFY A THEME USING URL PARAMETERS (OPTIONAL)
Estimated time: 10 Minutes


Objective
In the following exercise you will learn how to apply custom themes to SAP applications

What you will learn

 How to use URL parameters to run an application with a specific theme

Exercise description

First you will find out how to determine the URL parameters and their values. Then you will start a Web
Dynpro application and add the required URL parameter.

65

Determine URL parameters
Determine the URL parameters and their values.
Explanation Screenshot
1. Enter /n/UI5/THEME_TOOL in the
OKCODE box.
Confirm your entry by pressing the
Enter key.


2. Double-click on .



Please press ctrl y.

3. Select by dragging the mouse

.




66

Explanation Screenshot


Please press ctrl c to copy the URL
parameter and its value to the
clipboard.





67

Use sap-theme URL parameter for a Web Dynpro application
Start a Web Dynpro application and add the required URL parameter.
Explanation Screenshot
1. Click
behind
.

2. Enter ?sap-
theme=TechEd2013@http://wdflbmt
0789.wdf.sap.corp:51180/sap/public/
bc/themes/~client-001# in the
URL box the # sign if it exists.
Confirm your entry by pressing the
Enter key.





68

EXERCISE 4B: CONFIGURE A THEME FOR NETWEAVER BUSINESS
CLIENT (OPTIONAL)
Estimated time: 15 Minutes


Objective
In the following exercise you will learn how to apply custom themes to SAP applications

What you will learn

 How to change the theme in the NetWeaver Business Client (NWBC) configuration

Exercise description

First you will copy a role for your exercise. Afterwards you will change the NWBC customizing to use the new
role with a custom theme. Finally you can try it out by starting the NWBC for HTML and Windows.

69

Preqrequiste: Copy a role
In this step you will copy a role for your hands-on user in order to use this role with the NWBC.
Explanation Screenshot
1. Enter /npfcg in the OKCODE box.
Confirm your entry by pressing the
Enter key.


2. Enter CD167MPLATE in the
box.
3. Click Copy role .


4. Enter Z_CD167_XX in the
box.
Confirm your entry by pressing the
Enter key.





70

Change NWBC customizing
In this step you will assign a theme to your NWBC role.
Explanation Screenshot
1. Enter /n/ui2/nwbc_cfg_cust in
the OKCODE box.
Confirm your entry by pressing the
Enter key.


2. Click Display -> Change .


3. Click New Entries .


4. Enter CD167_XX in the
field (Replace XX with your group
number).
Confirm your entry by pressing the
Tab key.
5. Enter THEME in
the box.
Confirm your entry by pressing the
Enter key.



71

Explanation Screenshot
6. Enter cd167_XX_3 in the
box (Replace XX with your group
number).


7. Click .







72

Start NWBC with your role
In this step you will assign a theme to your NWBC role.
Explanation Screenshot
1. Enter /n/ui2/nwbc in the box.
Confirm your entry by pressing the
Enter key.


2. Click to start NWBC for
Windows.
3. Click to start NWBC for HTML.




73

© 2013 by SAP AG. All rights reserved.
SAP and the SAP logo are registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo are
trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and the Sybase logo are registered
trademarks of Sybase Inc. Sybase is an SAP company. Crossgate is a registered trademark of Crossgate AG in Germany and other countries. Crossgate is
an SAP company.