SAP UX Explorer How-To Guide

UI Theme Designer
Theming of SAP Fiori Applications
July 2014

www.sap.com

TABLE OF CONTENT
1

PURPOSE OF THIS DOCUMENT .................................................................................................... 3

PREREQUISITES .............................................................................................................................. 3

LINKS AND FURTHER INFORMATION .......................................................................................... 3

4
4.1
4.2
4.3
4.4

CREATE AND USE A THEME FOR A FIORI APP .......................................................................... 4

Start UI theme designer .................................................................................................................. 4
Define theme .................................................................................................................................... 4
Publish the theme ............................................................................................................................ 7
Use the new theme .......................................................................................................................... 8

2014 SAP AG. All rights reserved.

This material does not constitute official SAP product documentation. The information herein is not a
commitment, promise or legal obligation to deliver any material, code or functionality. This material is
provided without a warranty of any kind, either express or implied, including but not limited to, the implied
warranties of merchantability, fitness for a particular purpose, or non-infringement. This material is for
informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for
errors or omissions in this material, except if such damages were caused by SAPs willful misconduct or
gross negligence.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign,
SAP BusinessObjects Explorer, StreamWork, SAP HANA, and other
SAP products and services mentioned herein as well as their respective logos are trademarks or
registered trademarks of SAP AG in Germany and other countries.
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.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and
services mentioned herein as well as their respective logos are trademarks or registered trademarks of
Sybase, Inc. Sybase is an SAP company.
All other product and service names mentioned are the trademarks of their respective companies. Data
contained in this document serves informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials
are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only,
without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions
with respect to the materials. The only warranties for SAP Group 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.

UI THEME DESIGNER - THEMING OF FIORI APPLICATIONS

PURPOSE OF THIS DOCUMENT

This document describes how to use the UI Theme Designer in order to adapt SAP Fiori Apps to
ones needs. The document is not meant to replace the product documentation but rather supports
a user by guiding him through the most important process steps.

PREREQUISITES

To use the UI theme designer for NetWeaver ABAP prior release 7.40 you need to install the UI
Add-on for NetWeaver 1.00 SP04 or higher.
Starting with release 7.40 SP04 the UI theme designer is part of NetWeaver.

LINKS AND FURTHER INFORMATION

Central entry point for documentation: http://scn.sap.com/docs/DOC-52952

Documentation of UI Add-On 1.0
Standard Notes: General: 1852400, ABAP: 1852401
FAQ: Note 1906793

UI THEME DESIGNER - THEMING OF FIORI APPLICATIONS

4
4.1

CREATE AND USE A THEME FOR A FIORI APP

Start UI theme designer

Use browser Google Chrome or Firefox to open the following link:

http(s)://<server>:<port>/sap/bc/theming/theme-designer?sap-client=<client>
Alternatively call transaction /UI5/THEME_DESIGNER in your SAP backend system.
4.2

Define theme

Select a predefined theme and press Edit:

Now you need to enter a Fiori URL link. In this example we use the shopping cart application.
The Fiori URL looks as follows:
https://<server>:<port>/sap/bc/ui5_ui5/sap/ui5_srm_sc_apv/index.html

UI THEME DESIGNER - THEMING OF FIORI APPLICATIONS

Enter this link into the field Link to Application of the UI Theme Designer, provide a name and
select Add.

Now the application is displayed in the canvas of the theme designer.

You can start to change the appearance by using the Quick and Expert options.
On the Quick tab on the right hand side you can change selected colors and add a background
image. E.g. you can change the background color or the text color by either using the color picker

UI THEME DESIGNER - THEMING OF FIORI APPLICATIONS

or by entering RGB values.

Values entered or changed on the Quick tab are valid for all technologies that you use this theme
for.
You can upload a background image by pressing the background image button and then dragging
an image from your desktop to the marked area in the Theme Designer canvas. Then select the
image and press Ok.

UI THEME DESIGNER - THEMING OF FIORI APPLICATIONS

Depending on the size of the background image you might need to set Background Image Repeat
to false
More specific options are available via the Expert tab. E.g. you can change settings for the header
bar.
4.3

Publish the theme

When all changes are done the new theme needs to be published via Theme Publish, or in
the latest version of the UI Theme Designer via Theme Save & Build

Enter a theme name and also provide a theme ID. Select Publish

A confirmation pop-up shows the success of the publishing process:

UI THEME DESIGNER - THEMING OF FIORI APPLICATIONS

4.4

Use the new theme

In order to use the newly published theme the new Fiori URL needs to be built.
Start with the original URL, e.g.
https://<server>:<port>/sap/bc/ui5_ui5/sap/ui5_srm_sc_apv/index.html
Append ?sap-theme=<theme-name> to the original Fiori URL:
https://<server>:<port>/sap/bc/ui5_ui5/sap/ui5_srm_sc_apv/index.html?saptheme=<theme-name>
In cases where the theme root folder is located on a different server than your application server
you need to determine this specific information in order to build the complete URL for the theme:
Determine theme-root for your system:
https://<root-server>:<port>/sap/public/bc/themes/~client-<client>
Append ?sap-theme=<theme-name>@<theme-root> to the original Fiori URL:
https://<server>:<port>/sap/bc/ui5_ui5/sap/ui5_srm_sc_apv/index.html?saptheme=<theme-name>@https://<root-server>:<port>/sap/public/bc/themes/~client-<client>
Call the newly composed Fiori URL in a browser: