Professional Documents
Culture Documents
Copyright 2013 SAP AG. All rights reserved. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company.
SAP How-to Guides are intended to simplify the product implementation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting. Any software coding and/or code lines / strings (Code) included in t his documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent. Disclaimer Some components of this product are based on Java. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components. Any Java Source Code delivered with this product is only to be used by SAPs Support Services and may not be modified or altered in any way.
Document History
Document Version 1.0 Description First release version
Typographic Conventions
Type Style Example Text Description Words or characters quoted from the screen. These include field names, screen titles, pushbutton labels, menu names, menu paths, and menu options. Cross-references to other documentation Example text Emphasized words or phrases in body text, graphic titles, and table titles File and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools. User entry texts. These are words or characters that you enter in the system exactly as they appear in the documentation. Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system. Keys on the keyboard, for example, F2 or ENTER.
Icons
Icon Description Caution Note or Important Example Recommendation or Tip
Example text
Example text
<Example text>
EXAMPLE TEXT
Table of Contents
1. Getting started .......................................................................................................................1 1.1 1.2 2. Prerequisites ...................................................................................................................... 1 Setting up your environment ........................................................................................... 1
Creating a Theme on ABAP .................................................................................................. 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 Start the Theme Designer ............................................................................................... 2 Select a SAP delivered theme to start from .................................................................. 2 Get familiar with the Theme Designer ............................................................................ 3 Change colors using Quick theming ............................................................................... 4 Change colors using Expert theming ............................................................................. 6 Change the background image ....................................................................................... 6 Change the Toggle Item with CSS .................................................................................. 7 Different Preview Options ............................................................................................... 8 2.8.1 2.8.2 2.8.3 2.8.4 Vertical Preview ................................................................................................... 8 Tablet Preview (Full Screen Modus) ............................................................... 10 Desktop Preview ............................................................................................... 10 Original View ....................................................................................................... 11
3.
1.
Getting started
This document demonstrates how you can change a theme of an SAP Fiori App using the UI Theme Designer.
1.1
Prerequisites
This demonstration guide assumes you have successfully completed the Developer Guide for UI Theme Designer (http://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devgu ide_10.pdf).
1.2
In the Developer Guide for UI Theme Designer you can find the information about how set up the UI Theme Designer (page 9): http://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.p df
May 2013
2.
2.1
2.2
When creating a new theme it needs to be based on an existing SAP theme. You should select a theme which is similar to the used theme. For the Fiori App we recommend to use sap_bluecrystal.
Task: 3.
May 2013
Task: 4.
Add an application which can be displayed as preview. Enter application URL (e.g. Approve Purchase Order) Enter title for application Press Add
2.3
At first you can see that a preview application is loaded which is displayed in the main area on Figure 3. 1. Original: You can switch to the original view of your application
May 2013
2. Preview: at this view, you can see your theme changes 3. Full Page: the left and the right panel will be closed, the application preview use now the complete screen 4. Vertical View: the vertical view of your device 5. Horizontal View: you can switch your device to the horizontal view 6. Device: you can choose between Desktop, Tablet and Phone On the left panel you can switch between your different apps. On the right side you can switch between three different views for editing: 7. Quick Theming: Theming parameters that apply to all included UI technologies (e.g. WDA, UI5) 8. Expert Theming: Theming parameters specific to UI technologies. This offers advanced options for theming. 9. CSS: Add CSS rules
2.4
With quick theming the color scheme can be changed with just few clicks.
Task: 5. 6. 7.
Click on the color square in the line of Highlight Color. Change the color according to your needs. (The preview is updated automatically). Press OK
May 2013
May 2013
2.5
Task: 8. 9.
2.6
You can also change the image with the Quick Theming. Then you have to choose the Background Image.
May 2013
Set the Background Image Repeat to false, then the image will fit to screen (independent to the device) Set the Background Image Opacity to 0.5 on the scale
2.7
May 2013
.sapUIMeTabContainerBtnInfo, .sapUIMeTabContainerBtnNotes, .sapUIMeTabContainerBtnAttachments, .sapUIMeTabContainerBtnPeople { background-color: #999 !important; } .sapUIMeTabContainerBtnInfo.sapUiIconActive, .sapUIMeTabContainerBtnNotes.sapUiIconActive, .sapUIMeTabContainerBtnAttachments.sapUiIconActive, .sapUIMeTabContainerBtnPeople.sapUiIconActive { border: 0.250rem solid #3782CA !important; } Border color when clicked Background color
2.8
2.8.1
May 2013
May 2013
2.8.2
2.8.3
Desktop Preview
May 2013
10
2.8.4
Original View
May 2013
11
3.
21. Enter the vendor who owns the theme. (Must not start with SAP) 22. Press Publish
May 2013
12
After a while the success dialog comes up. Close it by pressing OK.
To run an application using the new theme you need to enter the URL for the application and specify the theme using the sap-theme URL parameter. It contains the id of the theme and the URL of the theme repository.
May 2013
13
Example:
Figure 17: run the application in the browser with the new theme
May 2013
14
www.sap.com/contactsap www.sdn.sap.com/irj/sdn/howtoguides