Guide Me – SAP Best Practice Documentation

Document Version: 1.0 – 2015-04-23

Customize Theme
Typographic Conventions

Type Style Description

Example Words or characters quoted from the screen. These include field names, screen titles,
pushbuttons labels, menu names, menu paths, and menu options.
Textual cross-references to other documents.

Example Emphasized words or expressions.

EXAMPLE Technical names of system objects. These include report names, program names,
transaction codes, table names, and key concepts of a programming language when they
are surrounded by body text, for example, SELECT and INCLUDE.

Example Output on the screen. This includes file and directory names and their paths, messages,
names of variables and parameters, source text, and names of installation, upgrade and
database tools.

Example Exact user entry. These are words or characters that you enter in the system exactly as they
appear in the documentation.

<Example> Variable user entry. Angle brackets indicate that you replace these words and characters
with appropriate entries to make entries in the system.

EXAMPLE Keys on the keyboard, for example, F 2 or E N T E R .

Customize Theme
2 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Typographic Conventions
Document History

Version Date Change

1.0 2015-04-15 Initial version.

Customize Theme
Document History © 2015 SAP SE or an SAP affiliate company. All rights reserved. 3
Table of Contents

1 Intro .................................................................................................................................................................. 5

2 Start ................................................................................................................................................................. 6
2.1 App Selection ........................................................................................................................................................... 6
2.2 Launch UI Theme Designer .................................................................................................................................... 8

3 Customize Theme........................................................................................................................................... 9
3.1 Create your Own Theme ......................................................................................................................................... 9
3.2 Save a Theme......................................................................................................................................................... 12
3.3 Access Previously Created Themes .................................................................................................................... 12
3.4 Export a Theme ...................................................................................................................................................... 14

4 Import Theme ............................................................................................................................................... 16

5 Manage Theme ............................................................................................................................................. 18

Customize Theme
4 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Table of Contents
1 Intro

SAP’s user experience (UX) strategy includes the design and development of delightful applications which adhere
to the SAP Fiori UX design principles. SAP Fiori applications can be deployed in the cloud or on premise and are
updated frequently. Be sure to experience SAP Fiori applications in the cloud if you would like to stay up to date on
the latest SAP Fiori cloud capabilities.

This guide will walk you through steps to apply your corporate branding by yourself. Create and apply your own
theme in the following sequence:
 Launch the UI Theme Designer
 Change any properties in the UI Theme Designer to apply your own branding
 Export your new theme to your local machine
 Import your theme to the cloud environment
 Access the Manage Theme application and apply here the theme of your choice
 Refresh your browser and access the Fiori Launchpad to see your theme in action

Customize Theme
Intro © 2015 SAP SE or an SAP affiliate company. All rights reserved. 5
2 Start

Use UI theme designer to easily and intuitively apply your own corporate brand. The following steps are the same
no matter which app you choose for theming. In a nutshell, the following steps describe how the theme is changed
using the UI Theme Designer in the cloud.

2.1 App Selection

Use

In this step, you select an app to be customized in the UI Theme Designer. This app acts as a preview of the work
you are doing. The theme that is created in the theme designer affects the whole Fiori Launchpad, all apps which
are launched from there and not only the selected one.

Procedure

1. Choose from the top menu.

2. Choose the ‘Customize Theme’ option.

3. Select an app from the list displayed:

CUSTOMER Customize Theme

6 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Start
 Note
The app you select will be opened in the Theme Designer directly. If you choose an app from the SAP
Content list, the original SAP Fiori app will be displayed. If you choose an app from the My Content list, an
app already extended by you will be previewed in the Theme Designer. You can navigate to all apps in the
UI Theme Designer via the Launchpad.
4. On the Customize Theme screen, there are three options:
 Launch UI Theme Designer
 Import Theme
 Manage Themes
They are described in detail in the next steps.

Result

You have selected an app of your choice and are ready to carry out the following steps.

Customize Theme
Start © 2015 SAP SE or an SAP affiliate company. All rights reserved. 7
2.2 Launch UI Theme Designer

This option launches the SAP Theme Designer so that you can apply your corporate branding.

1. Choose Launch UI Theme Designer to access the SAP Theme Designer.

2. Perform the required steps to apply your corporate branding as described in the chapter ‘Customize
Theme’.

CUSTOMER Customize Theme

8 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Start
3 Customize Theme

The UI Theme Designer is an application which enables you to adapt the UI to your corporate branding. The
example described explains how to:
 Create your own theme
 Save a theme
 Access previously created themes
 Export a theme

Note
In the following steps, a selection of the various available parameters is described.

3.1 Create your Own Theme

The UI Theme Designer enables you to create your own branding. This example showcases how to change to a red
color theme.

Procedure

1. Choose Launch UI Theme Designer on the Customize Theme page. The UI Theme Designer is launched in
a new window.

2. Choose the Expert mode to get a full list of available parameters.

Customize Theme
Customize Theme © 2015 SAP SE or an SAP affiliate company. All rights reserved. 9
 3. There is a description available for each parameter. Hover over them to display the description.

Caution
Many parameters are protected and cannot be changed. You can figure this out in the Description text of
the parameter (‘This parameter is protected and is not yet released for being changed’). You can change
the value of those parameters anyway, however, this will not take any effect.
4. Maintain the following parameters to create the red color theme:

Theme Parameter Value

sapBackgroundColor #B22525

sapBaseColor #7A343C

sapBrandColor #AF1313

sapHighlightColor #B22525

sapUshellTileBackgroundColor #FFEDE8

The result looks like this:

CUSTOMER Customize Theme

10 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Customize Theme
 Note
You can maintain the colors by using the color picker. Choose the square next to the Value field to open
the color picker.
The theme parameters maintained by you are marked in bold letters.
5. Add a company logo of your choice. Choose theme parameter ‘sapCompanyLogo’ by selecting the
square next to the Value field.

6. Choose the + symbol above the ‘Drop image files here from your desktop’.
7. The file manager opens. Choose the file from your local files ystem and choose ‘Open’. The file is
displayed in the preview:

8. Choose the image in the Assign Image dialog box and choose OK.
9. Check that your logo has been added now.

Customize Theme
Customize Theme © 2015 SAP SE or an SAP affiliate company. All rights reserved. 11
Result

You have adapted the colors and company logo according to your needs.

3.2 Save a Theme

Within the UI Theme Designer, you can save any theme created by you no matter if it is in an intermediate state or
not.

Procedure

1. Choose Theme → Save Draft from the menu.

2. Maintain a Theme ID and Title in the Save Draft dialog box.

3. Confirm your settings with OK.

4. Confirm the Draft Saved dialog box with OK.

Result

You have now saved your theme.

3.3 Access Previously Created Themes

Once you launch the UI Theme Designer, it is always opened with the SAP delivered default theme Custom Blue
Crystal. This section describes how to access previously saved themes.

CUSTOMER Customize Theme

12 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Customize Theme
Procedure

1. Choose Launch UI Theme Designer on the Customize Theme page. The UI Theme Designer is launched in
a new window.

2. Choose Theme → Close from the menu.

3. An overview page with all available themes is displayed no matter if they are SAP delivered or created by
you.

Note
By choosing Delete, you can delete themes created by you.
4. Select a theme you want to work with and choose Open.
5. The theme is opened and ready to go.

Result

You have accessed a theme you previously worked on.

Customize Theme
Customize Theme © 2015 SAP SE or an SAP affiliate company. All rights reserved. 13
3.4 Export a Theme

This step describes how to export a theme from the UI Theme Designer to your local machine. Once the theme
was exported, it can be uploaded to the SAP Fiori Cloud. There it can be assigned as a default theme in the Fiori
Launchpad.

Procedure

1. Choose Launch UI Theme Designer on the Customize Theme page. The UI Theme Designer is launched in
a new window.

2. Choose Theme → Export from the menu.

3. In the Export dialog box, you can change the title of the theme.

4. Choose OK.
5. Confirm the “Export completed” dialog box.

CUSTOMER Customize Theme

14 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Customize Theme
 6. A zip file (<myNewTheme>.zip) was created in the preferred download location.

Result

You have exported the theme to your local machine. A zip file has been created in the preferred download
location.

Customize Theme
Customize Theme © 2015 SAP SE or an SAP affiliate company. All rights reserved. 15
4 Import Theme

Prerequisite

To make your theme available and to apply it to the Fiori Launchpad, you must upload the theme created by you. If
not yet done, create your theme and export it as described in the Export a theme section.

Procedure

1. In the Customize Theme dialog box, choose the Import Theme option.

2. Enter your credentials and choose Browse….

3. A new explorer window is opened. Search for the zip file exported in the ‘Customize Theme’ steps.
Choose Open in this dialog box, once you have selected the appropriate file.
4. Choose Import to upload your theme.

5. Choose Keep in the Import Theme dialog box.

Note
If you choose the Keep option the imported theme will be assigned to be used in the Fiori Launchpad. You
then can skip the next step ‘Manage Theme’.
Choosing Revert option the theme will be created as well. However – it is not yet assigned to Fiori
Launchpad. You need to perform the steps as described in next step ‘Manage Theme’.

CUSTOMER Customize Theme

16 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Import Theme
Result

You have uploaded your theme to the Fiori cloud environment.

Customize Theme
Import Theme © 2015 SAP SE or an SAP affiliate company. All rights reserved. 17
5 Manage Theme

With the Manage Theme option, you can apply your created theme to the Fiori Launchpad. If you have uploaded
multiple themes, you can choose which one to be applied in the Fiori Launchpad and you can update or delete
existing themes.

Procedure

1. In the Customize Theme dialog box, choose the Manage Themes option.

The following symbol

indicates which theme is currently assigned to the Fiori Launchpad.

Note
If you have not yet imported your own theme, only the Default Theme is available. This one cannot be
modified or deleted.
The import process of your own theme is described in section Import Theme.
2. Select a theme imported by you. In the lower right corner, the following options are available:

o Assign to Site: The selected theme will be applied to the Fiori Launchpad
o Edit: You can import an updated theme. As a preceding step, you must export a theme as described
in section Customize Theme.
o Delete: The selected theme will be deleted.

CUSTOMER Customize Theme

18 © 2015 SAP SE or an SAP affiliate company. All rights reserved. Manage Theme
3. Choose the Assign to Site option. Your custom theme will be applied to the Fiori Launchpad.

Note
To see your changes, refresh your browser screen.
If you want to remove your assigned theme, assign the Default Theme to perform reset in the Fiori
Launchpad.

Result

You have assigned a theme of your choice to the Fiori Launchpad. In addition, you have updated or deleted your
own themes.

Customize Theme
Manage Theme © 2015 SAP SE or an SAP affiliate company. All rights reserved. 19
www.sap.com/contactsap

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any
form or for any purpose without the express permission of SAP SE
or an SAP affiliate company.
The information contained herein may be changed without prior
notice. Some software products marketed by SAP SE and its
distributors contain proprietary software components of other
software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company
for informational purposes only, without representation or warranty
of any kind, and SAP or its affiliated companies shall not be liable for
errors or omissions with respect to the materials. The only
warranties for SAP or SAP affiliate company products and services
are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein
should be construed as constituting an additional warranty.
SAP and other SAP products and services mentioned herein as well
as their respective logos are trademarks or registered trademarks of
SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the
trademarks of their respective companies. Please see
www.sap.com/corporate-en/legal/copyright/index.epx for
additional trademark information and notices.

Material Number: