SAP Mobility

SAP Project Fiori Program

Change the Theme of a Fiori App with the Theme

Designer
A Branded Service provided by SAP Rapid Innovation Group

Applicable Releases:
SAP Project Fiori Program

Version 1.0
May 2013

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

Description

1.0

First release version

Typographic Conventions

Icons

Type Style

Description

Icon

Example Text

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

Example text

File and directory names and

their paths, messages,
names of variables and
parameters, source text, and
names of installation,
upgrade and database tools.

Example text

User entry texts. These are

words or characters that you
enter in the system exactly
as they appear in the
documentation.

<Example
text>

Variable user entry. Angle

brackets indicate that you
replace these words and
characters with appropriate
entries to make entries in the
system.

EXAMPLE TEXT

Keys on the keyboard, for

example, F2 or ENTER.

Description
Caution
Note or Important
Example
Recommendation or Tip

Table of Contents
1.

2.

3.

Getting started .......................................................................................................................1

1.1

Prerequisites ...................................................................................................................... 1

1.2

Setting up your environment ........................................................................................... 1

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

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

Publish the theme to the Server ......................................................................................... 12

Change the Theme of an Fiori App with the Theme Designer

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

Setting up your environment

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

Change the Theme of an Fiori App with the Theme Designer

2.

Creating a Theme on ABAP

2.1

Start the Theme Designer

Task: 1.
2.

2.2

Log into your gateway system.

Start the transaction /UI5/THEME_DESIGNER

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.

May 2013

Select the SAP Blue Crystal Theme and press Edit.

Change the Theme of an Fiori App with the Theme Designer

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

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

May 2013

Change the Theme of an Fiori App with the Theme Designer

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

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

May 2013

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

Change the Theme of an Fiori App with the Theme Designer

Figure 4: Change colour with Quick Theming

Figure 5: Colour of the list item when clicked

May 2013

Change the Theme of an Fiori App with the Theme Designer

2.5

Change colors using Expert theming

With expert theming individual aspects of controls can be changed.

Task: 8.
9.

Press Expert
Change the color of automatically).of UIBrand

Figure 6: Change colour with Expert Theming

2.6

Change the background image

Task: 10.
11.
12.
13.

Press Expert
C Click on sapUIGlobalBackgroundImage
Upload an image
Press OK

You can also change the image with the Quick Theming. Then you have to choose the Background
Image.

May 2013

Change the Theme of an Fiori App with the Theme Designer

Figure 7: Change the background image

To adjust the background image:

Task: 14.
15.

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

Figure 8: Adjust the Background image

2.7

Change the Toggle Item with CSS

Task: 16.
17.

May 2013

Press CSS
Enter the following lines in Snippet 1

Change the Theme of an Fiori App with the Theme Designer

.sapUIMeTabContainerBtnInfo,
.sapUIMeTabContainerBtnNotes,
.sapUIMeTabContainerBtnAttachments,
.sapUIMeTabContainerBtnPeople {
background-color: #999 !important;

Background color

}
.sapUIMeTabContainerBtnInfo.sapUiIconActive,
.sapUIMeTabContainerBtnNotes.sapUiIconActive,
.sapUIMeTabContainerBtnAttachments.sapUiIconActive,
.sapUIMeTabContainerBtnPeople.sapUiIconActive {
border: 0.250rem solid #3782CA !important;

Border color
when clicked

Snippet 1: Change the color of the toggle item

Figure 9: Change the color of the toggle icon

2.8
2.8.1

May 2013

Different Preview Options

Vertical Preview

Change the Theme of an Fiori App with the Theme Designer

Figure 10: vertical View

May 2013

Change the Theme of an Fiori App with the Theme Designer

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

May 2013

10

Change the Theme of an Fiori App with the Theme Designer

2.8.4

Original View

Figure 13: Original View

May 2013

11

Change the Theme of an Fiori App with the Theme Designer

3.

Publish the theme to the Server

Task: 18. Open the Theme Menu and press Publish
19. 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

May 2013

12

Change the Theme of an Fiori App with the Theme Designer

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 and
specify the theme using the sap-theme URL parameter. It contains the id of the theme and the URL
of the theme repository.

<full URL of your application>?sap-theme=<tehme ID>@<theme root>

May 2013

13

Change the Theme of an Fiori App with the Theme Designer

Example:

http://<App servername>:<App
Port>/sap/bc/ui5_ui5/sap/ui5_mm_po_apv/index.html?sap-client=100&saptheme=greenorangetheme@http://<Theme server>:<theme
port>/sap/public/bc/themes/~client-100

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