UI5 Theme Exercises

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

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

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

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

12. Click .

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

12

CD167 to enter it.

Exercise_1_Getting_Started to ent
er it.

13

17. Double click .

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

20. Enter false in the Background
Image Repeat box.
Enter key.

14


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.

1. Click .

2. Click .

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

16

6. Click .

17

EXERCISE 2: SAPUI5 THEMING


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



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.

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

19

Adding a preview application
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
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

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

22

Add Company Logo
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

CD167 to enter it.

Exercise_2_SAPUI5 to enter it.

24

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

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

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

28

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

Selec the tab CSS.

(share) to select it.

CD167 to enter it.

29

Exercise_2_SAPUI5 to enter it.

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

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



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.

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.
1. Enter Exercise 3: cross-theming
in the theme name box.
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

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

11. Click UX3Controls.

12. Click .

13. Click in the NWBC
Application Previews row.

36

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

2. Click in the Background
Image row.

3. Click .

38

4. Click Desktop to show files of
Desktop.
(share) to enter it.

CD167 to enter it.

39

Exercise_3_Cross_Theming to
enter it.

LargeBG.jpg to
open it.

40

9. Click to select
it.
10. Click .

11. Click .

12. Click in the Company Logo
row.

41

13. Click .

agrimuyaLogo.png
to open it.

15. Click to
select it.
16. Click .

42


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


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.
1. Select target page Applications >
Search Products
2. Enter #ffd039 in the Brand
Color box.
Enter key.
3. Enter #e6b000 in the Highlight
Color box to make it a bit darker
than the previously entered Brand
Color.
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.
Enter key.

45

4. Enterf rgba(73, 162, 191, 0.4) in
the Base Color box in order to have
40% transparency.
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.
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.
Enter key.

Results of this exercise step

46


47


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

2. Click .

3. Click Button to select it.

49

4. Enter
desaturate(@sapBrandColor,
40%) in
the sapButton_Background box.
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.
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.
Enter key.

50


Results of this exercise step

51


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

2. Click CSS to open the CSS
editor.

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

53

(share) to select it.

CD167 to enter it.

Exercise_3_Cross_Theming
to enter it.

54

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

2. Click .

56

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

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

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

2. Click .

3. Enter selection_bg.gif in
the filter box.
Enter key.

60

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

5. Enter exp.gif in the filter box.
Enter key.

uploading and selecting exp_new.gif
selecting the previously uploaded
exp_new.gif.

61

Publish Theme
In this step you will save the newly created theme on the server.
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.


63


64

EXERCISE 4A: SPECIFY A THEME USING URL PARAMETERS (OPTIONAL)

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


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.
1. Enter /n/UI5/THEME_TOOL in the
OKCODE box.
Enter key.

2. Double-click on .

Please press ctrl y.

3. Select by dragging the mouse

.

66


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

68

EXERCISE 4B: CONFIGURE A THEME FOR NETWEAVER BUSINESS
CLIENT (OPTIONAL)

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


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.
1. Enter /npfcg in the OKCODE box.
Enter key.

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

4. Enter Z_CD167_XX in the
box.
Enter key.

70

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

2. Click Display -> Change .

3. Click New Entries .

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

71

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.
1. Enter /n/ui2/nwbc in the box.
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.

UI5 Theme Exercises

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

UI5 Theme Exercises

Încărcat de

Drepturi de autor:

Formate disponibile

NEW USER INTERFACE THEME DESIGNER

S-ar putea să vă placă și