SAP Fiori Launchpad Theming - a248.g.akamai.neta248.g.akamai.net/n/248/420835/a0074ca0da554ebfb... · • The Launchpad theme is defined in the transaction code /n /UI2/NWBC_CFG_SAP

SAP LaunchpadTheming

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

Agenda

Theme Designer OverviewModifying the Blue Crystal ThemeSetting the Theme for LaunchpadAdditional Info

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


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


The Loaded Application

• The application will then be loaded into the Preview pane

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


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


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


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


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

Modifying the Blue Crystal Theme


Make Your Desired Changes


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

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.


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.



• 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



• Your theme should now be reflected in the Launchpad


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

© 2014 SAP AG. All rights reserved. 43

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.

Documents

SAP Fiori Launchpad Theming - a248.g.akamai.neta248.g.akamai.net/n/248/420835/a0074ca0da554ebfb... · • The Launchpad theme is defined in the transaction code /n /UI2/NWBC_CFG_SAP