SAP Launchpad

Theming

Agenda

Theme Designer Overview

Modifying the Blue Crystal Theme
Setting the Theme for Launchpad
Additional Info

2013 SAP AG or an SAP affiliate company. All rights reserved.

Theme Designer Overview

Launching the Theme Designer

Theme Designer can be launched by running the transaction code in the SAP GUI of your
gateway system

/n/UI5/THEME_DESIGNER

2013 SAP AG or an SAP affiliate company. All rights reserved.

Choosing an Application
In the Link to Application field enter the Fiori Launchpad URL

http://<servername>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

Provide a value for the Name of Application Field

Choose Add to complete the process

2013 SAP AG or an SAP affiliate company. All rights reserved.

The Loaded Application

The application will then be loaded into the Preview pane

2013 SAP AG or an SAP affiliate company. All rights reserved.

Theme Designer Overview

The Left Pane

Theme: Option to create a new theme or save and build

the current theme

Help: Provides a link to the help docs, version

information and access to the logs

Target Pages: Allow for additional application to be

loaded for preview

Applications: The applications that have been loaded

into Theme Designer

UI5 Control Previews: By selecting the gear icon a

number of controls can be added for theme previewing

UI5 Application Previews: By selecting the gear icon a

number of UI5 applications can be added for theme
previewing

2013 SAP AG or an SAP affiliate company. All rights reserved.

The Preview Pane

Original: The original view of your application

Preview: Displays your modifications to the theme

Full Page: Closes the left and right panes so the

preview can use the complete screen

Vertical View: The preview is shown vertically

Horizontal View: The preview is shown horizontally

Device: Preview can be shown as a Desktop, Tablet

and Phone

Refresh: Refresh the loaded application

2013 SAP AG or an SAP affiliate company. All rights reserved.

Quick Theming

Provides access to the common LESS

parameters used for the theme to allow for
quick modifications

Applies to all supported UI technologies

The available parameters are independent

of the chosen application

Changes affect many controls

No dependencies between parameters

2013 SAP AG or an SAP affiliate company. All rights reserved.

10

Expert Theming

Greater number of LESS parameters than Quick

editing provides

Parameters are specific to the chosen theme and

application

Applies to only specific UI technologies

Parameters can be dependent on other

parameters

Changes only effect a specific control or group of

controls

Parameters can be filtered with the available

options or by text

2013 SAP AG or an SAP affiliate company. All rights reserved.

11

CSS Theming

Allows for further customization of the theme that

quick or expert do not provide

CSS and LESS can be used

LESS: Preprocessor of CSS which allows for

parameter reference for values such as colors in
CSS

LESS parameter

LESS Functions

fade

darken

2013 SAP AG or an SAP affiliate company. All rights reserved.

12

Modifying the Blue Crystal

Theme

Make Your Desired Changes

2013 SAP AG or an SAP affiliate company. All rights reserved.

14

Save and Build

Choose the menu option Theme -> Save & Build

Enter a Theme ID and Name and then choose Publish

The Theme ID will be needed to later reference your theme

2013 SAP AG or an SAP affiliate company. All rights reserved.

15

Setting the Theme for

Launchpad

Setting the Default Theme

The Launchpad theme is defined in the transaction code /n/UI2/NWBC_CFG_SAP

To define a user specified theme utilize the transaction code /n/UI2/NWBC_CFG_CUST

The following parameters need to be set

Path Filter: SAP_FLP

Parameter Name: THEME

Value: ID of the user created theme

After opening the transaction, select the button to enter the transaction into change mode
then choose New Entries.

2013 SAP AG or an SAP affiliate company. All rights reserved.

17

Setting the Default Theme Contd

Enter the following values

Filter: SAP_FLP

Parameter Name: THEME

Choose the Save button

If prompted enter an appropriate Customizing request and choose the Enter button.

2013 SAP AG or an SAP affiliate company. All rights reserved.

18

Setting the Default Theme Contd

After saving and entering a customizing request you should now be able to add the Value
field which is the ID of your theme.

Save your changes after entering the theme ID

2013 SAP AG or an SAP affiliate company. All rights reserved.

19

Setting the Default Theme Contd

Your theme should now be reflected in the Launchpad

2013 SAP AG or an SAP affiliate company. All rights reserved.

20

Additional Info
/UI5/THEME_TOOL supports the following features

Transport

Export

Import
Deletion

Invalidating the server cache

Themes can also be set via the URL using

sap-theme=<theme ID>@<theme root>

In /UI5/THEME_TOOL select Info to obtain URL

SCN Entry Page: http://scn.sap.com/docs/DOC-52952

UI Theme Designer Main Note: 1852400

Support Information

Latest fixes
List of supported themes

2013 SAP AG or an SAP affiliate company. All rights reserved.

21

 2014 SAP AG. 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 AG. The information contained herein may be
changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary
software components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft
Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x,
System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer,
z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server,
PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER,
OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP,
RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX,
Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered
trademarks of IBM Corporation.
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or
registered trademarks of Adobe Systems Incorporated in the United States and/or other
countries.
Oracle and Java are registered trademarks of Oracle and/or its affiliates.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C , World
Wide Web Consortium, Massachusetts Institute of Technology.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer,
StreamWork, 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.
The information in this document is proprietary to SAP. No part of this document may be
reproduced, copied, or transmitted in any form or for any purpose without the express prior
written permission of SAP AG.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are
trademarks or registered trademarks of Citrix Systems, Inc.

2014 SAP AG. All rights reserved.

43