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/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
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 enter 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_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
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(@sapBrandColor,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_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.
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://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.
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.