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

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

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

The Loaded Application

• The application will then be loaded into the Preview pane

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

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

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

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 Cont’d

• 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 Cont’d

• 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 Cont’d

• 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.
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.
®
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.
43