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


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


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

16. Double click on the entry Exercise_1_Getting_Started to enter it.

13


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


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


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


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



6. Double click on the entry 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 .

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.

2. Double click on the entry Student

(share) to select it.


29


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


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


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


6. Enter /sap/bc/webdynpro/sap/s_epm_fpm_pd?FPM_INITIAL_PAGE_PROC_MODE=L&FPM_EDIT_MODE=R&FPM_NAVI_SOURCE_KEY_ATTR_PRODUCT_ID=HT-1010&FPM_EVENT_PARAM_RAISING_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. 5. Double click on the entry Student (share) to enter it.


39


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


9. Click to select it.

10. Click .

11. Click .

12. Click in the Company Logo row.

41


13. Click .

14. Double click on the entry 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. 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


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


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. 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(@sapBrandColor,3%),30%) in the sapList_HeaderBackground box. Confirm your entry by pressing the 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


3. Double click on the entry Student

(share) to select it.


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

54


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.


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


1. Click .

2. Click .

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

60


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.


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)

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.


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


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://wdflbmt0789.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.


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.


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


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

UI5 Theme exercises

Documents

Transcript of UI5 Theme exercises