change the theme of a fiori app with the theme designer
DESCRIPTION
Theme of a Fiori AppTRANSCRIPT
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
SAPMobility
SAP Project Fiori Program
A Branded Service provided by SAP Rapid Innovation Group
Applicable Releases:
SAP Project Fiori Program
Version 1.0
May 2013
Change the Theme of a Fiori App with the ThemeDesigner
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
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 theirrespective 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 thosefeatures and procedures are the only approach in solving a specific
business problem using SAP NetWeaver. Should you wish to receiveadditional information, clarification or support, please refer to SAP
Consulting.
Any software coding and/or code lines / strings (Code) included in t hisdocumentation are only examples and are not intended to be used in aproductive system environment. The Code is only intended better explainand 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 cau sed 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 malfunctionsand is therefore expressively prohibited, as is any decompilation of these
components.
Any Java Source Code delivered with this product i s only to be used by
SAPs SupportServices and may not be modified or altered in any way.
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Document History
Document Version Description
1.0 First release version
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Typographic Conventions
Type Style Description
Example Text Words or characters quoted
from the screen. Theseinclude field names, screentitles, pushbutton labels,menu names, menu paths,and menu options.
Cross-references to otherdocumentation
Example text Emphasized words orphrases in body text, graphictitles, and table titles
Example text File and directory names and
their paths, messages,names of variables andparameters, source text, andnames of installation,upgrade and database tools.
Example text User entry texts. These arewords or characters that youenter in the system exactlyas they appear in thedocumentation.
Variable user entry. Angle
brackets indicate that youreplace these words andcharacters with appropriateentries to make entries in thesystem.
EXAMPLE TEXT Keys on the keyboard, for
example, F2or ENTER.
Icons
Icon Description
Caution
Note or Important
Example
Recommendation or Tip
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Table of Contents
1. Getting started .......................................................................................................................1
1.1 Prerequisites ...................................................................................................................... 1
1.2
Setting up your environment ........................................................................................... 1
2. Creating a Theme on ABAP .................................................................................................. 2
2.1
Start the Theme Designer ............................................................................................... 2
2.2 Select a SAP delivered theme to start from .................................................................. 2
2.3 Get familiar with the Theme Designer ............................................................................ 3
2.4 Change colors using Quick theming ............................................................................... 4
2.5
Change colors using Expert theming ............................................................................. 6
2.6 Change the background image ....................................................................................... 6
2.7
Change the Toggle Item with CSS .................................................................................. 7
2.8
Different Preview Options ............................................................................................... 82.8.1 Vertical Preview ................................................................................................... 8
2.8.2
Tablet Preview (Full Screen Modus) ............................................................... 10
2.8.3 Desktop Preview ............................................................................................... 10
2.8.4 Original View ....................................................................................................... 11
3. Publish the theme to the Server ......................................................................................... 12
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 1
1. Getting started
This document demonstrates how you can change a theme of an SAP Fiori App using the UI ThemeDesigner.
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
Setting up your environmentIn the Developer Guide for UI Theme Designer you can find the information about how set up the UITheme Designer (page 9):
http://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdf
http://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdfhttp://service.sap.com/~sapidb/011000358700000368952013E/themedesigner_devguide_10.pdf -
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 2
2. Creating a Theme on ABAP
2.1
Start the Theme Designer
Task: 1. Log into your gateway system.
2. Start the transaction /UI5/THEME_DESIGNER
2.2 Select a SAP delivered theme to start from
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. Select the SAP Blue Crystal Themeand press Edit.
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 3
Figure 1: Select a Theme
Task: 4.
Add an application which can be displayed as preview. Enter application URL (e.g. Approve Purchase Order)
Enter title for application
PressAdd
Figure 2: Add an Application
2.3 Get familiar with the Theme Designer
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
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 4
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 device5. 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
Figure 3: Overview Theme Designer
2.4 Change colors using Quick theming
With quick theming the color scheme can be changed with just few clicks.
Task: 5. Click on the color square in the line of Highlight Color.
6. Change the color according to your needs. (The preview is updatedautomatically).
7. Press OK
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 5
Figure 4: Change colour with Quick Theming
Figure 5: Colour of the list item when clicked
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 6
2.5 Change colors using Expert theming
With expert theming individual aspects of controls can be changed.
Task: 8. Press Expert
9. Change the color of automatically).of UIBrand
Figure 6: Change colour with Expert Theming
2.6 Change the background image
Task: 10. Press Expert
11. C Click on sapUIGlobalBackgroundImage
12. Upload an image
13. Press OK
You can also change the image with the Quick Theming. Then you have to choose the BackgroundImage.
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 7
Figure 7: Change the background image
To adjust the background image:
Task: 14. Set the Background Image Repeatto false, then the image will fit to screen(independent to the device)
15. Set the Background Image Opacity to 0.5 on the scale
Figure 8: Adjust the Background image
2.7 Change the Toggle Item with CSS
Task: 16. Press CSS
17. Enter the following lines inSnippet 1
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 8
Figure 9: Change the color of the toggle icon
2.8 Different Preview Options
2.8.1 Vertical Preview
.sapUIMeTabContainerBtnInfo,
.sapUIMeTabContainerBtnNotes,
.sapUIMeTabContainerBtnAttachments,
.sapUIMeTabContainerBtnPeople {
background-color: #999 !important;
}
.sapUIMeTabContainerBtnInfo.sapUiIconActive,
.sapUIMeTabContainerBtnNotes.sapUiIconActive,
.sapUIMeTabContainerBtnAttachments.sapUiIconActive,
.sapUIMeTabContainerBtnPeople.sapUiIconActive {
border: 0.250rem solid #3782CA !important;
}
Snippet 1: Change the color of the toggle item
Background color
Border color
when clicked
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 9
Figure 10: vertical View
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 10
2.8.2 Tablet Preview (Full Screen Modus)
Figure 11: Tablet in the Full Screen Modus
2.8.3 Desktop Preview
Figure 12: Desktop preview
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 11
2.8.4 Original View
Figure 13: Original View
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 12
3. Publish the theme to the Server
Task: 18.
Open the ThemeMenu and press Publish19. Enter the theme name (you can use any characters)
20. Enter the theme id under which it is stored on the server (you can use only a-z,A-Z, "_" for the first character, for subsequent characters also digits are
allowed)
21. Enter the vendor who owns the theme. (Must not start with SAP)
22. Press Publish
Figure 14: Publish the theme
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 13
Figure 15: Enter the new Theme ID
After a while the success dialog comes up. Close it by pressing OK.
Figure 16: Confirmation
To run an application using the new theme you need to enter the URL for the application andspecify the theme using the sap-theme URL parameter. It contains the id of the theme and the URLof the theme repository.
?sap-theme=@
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
Change the Theme of an Fiori App with the Theme Designer
May 2013 14
Example:
http://:/sap/bc/ui5_ui5/sap/ui5_mm_po_apv/index.html?sap-client=100&sap-theme=greenorangetheme@http://:/sap/public/bc/themes/~client-100
Figure 17: run the application in the browser with the new theme
-
5/20/2018 Change the Theme of a Fiori App With the Theme Designer
www.sap.com/contactsap
www.sdn.sap.com/irj/sdn/howtoguides