34
SAP’s UI Theme Designer Ingo Deck, Carola Steinmaier, Uwe Klinger December 2015 (relates to UI theme designer V1.8) Public
SAP’s UI Theme DesignerIngo Deck, Carola Steinmaier, Uwe Klinger
December 2015 (relates to UI theme designer V1.8) Public
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 2Customer
Disclaimer
This presentation outlines our general product direction and should not be relied on in making a
purchase decision. This presentation is not subject to your license agreement or any other agreement
with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to
develop or release any functionality mentioned in this presentation. This presentation and SAP's
strategy and possible future developments are subject to change and may be changed by SAP at any
time for any reason without notice. This document 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. SAP assumes no responsibility for errors or omissions in this
document, except if such damages were caused by SAP intentionally or grossly negligent.
UI theme designer in a nutshell
The Theming Process
Features & Functions
Theme Lifecycle Management
Co
nte
nt
Architecture
Get the UI theme designer
Further Information
UI theme designer in a nutshell
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 5Customer
UI theme designer High level overview
SAP‘s UI theme designer is the single tool for theming und branding of key SAP UI technologies.
It is a browser-based tool…
that allows you to adapt the visual
appearance of applications
by creating your own themes
achieving several benefits:
› Reduce visual breaks for end users
› Apply YOUR brand to SAP based applications
› Increased theming efficiency
› Easy ramp up via SAP HANA Cloud Trial
› Designed for administrators as well as developers
Main use case: apply your corporate branding
and look to SAP/SAP-based applications.
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 6Customer
UI theme designer Key Capabilities
■ Graphical, web-based WYSIWYG editor
■ Themes controls and applications
■ Supports cross-technology theming
■ Custom CSS3 and LESS support
■ Different skill levels of theming:
quick, expert and CSS*
■ Definition of color palette for easy reuse
■ Import/export of themes for external editing
■ Multi platform and multi SAP UI technology support
► Not in scope: layout changes, element positioning,
content changes, UI configuration
* So far only for SAPUI5 and Unified Rendering
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 7Customer
Supported SAP Technologies and Platforms Status quo and Outlook*
Supported UI Technologies
Supported Platforms
Unified RenderingWeb Dynpro ABAP/Java, HTML
GUI, BSP, HTMLB
SAPUI5(incl. SAP Fiori,
SAP Fiori launchpad)
SAP PortalAjax Framework Page,
Fiori Framework Page
SAP NWBC(for Desktop >= 4.0)
SAP NWBC(for HTML)
SAP NetWeaver
AS ABAP
SAP HANA
CloudSAP Portal
(>= 7.30 SP10)
SAPUI5(Custom Libs)
WebClient UIF(SAP CRM)
Supported support planned* For a detailed outlook please refer to SAP UI technologies Road Map
SAP GUI(WIN GUI)
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 9Customer
SAP Standard UI
Delivery
User Groups in FocusLayers, Target Roles and Potential Impact Illustrated
UI ADAPTATION
THEMING
BRANDING
UserPERSONALIZATION
CUSTOMIZATION Client, Roles
CONFIGURATION Client, Roles
Impact
User
Administrator,
Visual Designer
Developer,
UX Designer
Targeted Roles
exclude
properties
exclude
properties
overwrite
properties
overwrite
properties
overwrite
properties
UI theme
designer
The Theming Process
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 11Customer
Corporate
Style Guide
Providing a Custom Theme to Your UsersConsider all necessary process steps to reach your end users
Iterative Process
Visual Design
Theming TestUse
Custom Theme
Scenario Test
Standard Go Live
Theme
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 12Customer
Theming Process: Build a Custom ThemeOverview
Prerequisites: Define your target visual design e.g. based on Corporate Brand
(1) Choose SAP base theme
(2) Add preview pages / controls
(3) Define color palette
(4) Change colors, backgrounds, and logo
(5) Technology-specific changes (optional)
(6) Do further changes using LESS/CSS (optional)
(7) Save & Build custom theme
Your custom themetheme your changes
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 13Customer
Theming Process: Build a Custom ThemeDetails (1)
(1) Choose SAP base theme Check dependencies between base theme and supported UI technologies
(2) Add preview pages / controls Choose SAP provided controls or application previews
Available SAP provided controls or applications are dependent on base theme
Add your own applications via URL
(3) Define color palette Using color Palette makes it significantly easier and faster to work
with often used (brand) colors
(4) Change colors, backgrounds,
and logo
Use Quick Theming – easy, fast, most effective and cross-technology
Includes color for brand, background, base as well as background and logo image
Few quick theming parameters are dependent on base theme
Your custom themetheme your changes
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 14Customer
Theming Process: Build a Custom ThemeDetails (2)
(5) Detailed changes (optional) Expert Theming offers further cross-technology and technology-
specific parameters
Technology-specific parameters are displayed for the UI technology
of the currently selected preview page
Offers easy filter and tag options as well as view changed parameters only
(6) Do further changes using
LESS/CSS (optional)
Full control, but no upgrade support – usage at own risk
CSS/LESS skills needed
Currently supported only for SAPUI5 and Unified Rendering
(7) Save & Build custom theme Save/Save As... – Save theme sources Theme is not ready for use yet
Save & Build – Save theme sources and build CSS files Theme is ready for use in applications
Your custom themetheme your changes
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 15Customer
Use Custom Theme
Custom Themes can be made available to users in different ways:
■ Via SAP UI Client (recommended for productive usage)
› SAP NWBC for desktop: NWBC configuration via transaction /UI2/NWBC_CFG_CUST
Prerequisites: NWBC >= 4.0 & SAP UI Add-on >= SP04
› SAP Fiori: SAP Fiori launchpad configuration via transaction /UI2/NWBC_CFG_CUST
› SAP Portal: Portal Desktop configuration
Prerequisites: SAP NetWeaver Portal >= 7.30 SP10
■ Via URL parameter (not recommended for productive use, but valuable for testing)
› sap-theme – syntax for URL parameter: sap-theme=themeId@themeRoot
› sap-cssurl – parameter for compatibility with old UI technologies (e.g. BSP )
Features & Functions
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 17Customer
UI Theme Designer – The Tool Itself
Target
Pages
Area
Preview Area
Theming
Parameters Area
Lifecycle
& Help
Feedback &
Legal (Cloud
Trial only)
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 18Customer
Target Pages – Main Capabilities
Define the preview scope you want to use for theming – then visible in
the preview area. Several kinds of previews can be available:
■ Target Pages – add applications/screens via their URL
■ UR Control Previews - choose from a list of Unified Rendering controls
■ UR Application Previews - FPM overview page, FPM search page
■ SAPUI5 Control Previews - choose from a list of SAPUI5 controls
■ SAPUI5 Application Previews - SAP Fiori Purchase Order Approval, Explored (most
important SAPUI5 controls)
■ NWBC Application Previews - Index Page, New Tab Page, Service Map, Shell
Remark: Available previews depend on chosen SAP base theme.
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 19Customer
Preview Area – Main Capabilities
■ Instant preview of selected UI control or
application
■ Switch between preview
and original theme
■ Toggle to full width (hiding target pages
and theming parameter area)
■ Reload target page
■ Switch between portrait and landscape
orientation as well as desktop, tablet, phone
layout (SAPUI5 applications only)
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 20Customer
■ UI theme designer supports different skill levels of users
Quick theming + Palette
Expert theming
CSS
■ Quick theming allows access to general parameters that take effect
across different UI technologies
■ Expert theming allows access to all parameters defined by the current
preview, concerning UI technology and Base Theme
■ Palette allows to predefine often used/needed colors for easy reuse in
Quick,Expert and CSS theming
■ Use pictograms to switch between modes
Theme Parameters – Different (Skill) Levels of Theming
Quick
Expert
Palette
CSS
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 21Customer
■ Colors can be changed via direct entry or using the color
picker
■ Color picker incl. RGB entry, color spectrum slider,
opacity definition as well as direct access to the palette if
defined
■ Changed parameters can be reset to original value
■ Tooltips on parameter labels offer helpful information on
label, ID, description, tags and value of the parameter
■ “Browse for” or “drag & drop” images
Theme Parameters – Common Capabilites*
* Common across Quick, Expert and Palette
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 22Customer
Theme Parameters – Expert Theming
■ Sort theme parameters by name
■ Use predefined tags to further narrow down the parameter
list
■ Filter theme parameters using the icon bar for
Colors
Dimensions
Typography
Images
Select to see only changed parameters
■ Smart search field to search within theme parameters AND
values
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 23Customer
Theme Parameters – Palette and CSS
■ Easily add (and remove) often used colors to your palette
incl. color naming
■ Quick access to defined color palette for color parameters
■ Enjoy full control of your theme using the CSS editor at
your own risk, as upgrade support cannot be granted
CSS / LESS skills needed
Currently supported only for SAPUI5 and Unified Rendering
Theme Lifecycle Management
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 25Customer
Theme lifecycle overview
Theming hub(e.g. ABAP server or SAP Portal)
DEV
UI theme designer
Transport a theme through
the customer‘s landscape
Shell
Application
Shell
Application
Shell
Application
Share a theme over
several systems
Test
Theming hub(test / prod landscape)
Export and Import themes
(e.g. for local editing)
A D M I N
Prod
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 26Customer
UI Theme Designer Lifecycle Tools (for ABAP landscape*)
Tool Scenario
UI Theme Designer(/UI5/THEME_DESIGNER)
Create/Edit Theme
Rename/Copy/Delete Theme
Rebuild (=Upgrade) Theme
UI Theme Admin Tool (/UI5/THEME_TOOL)
Delete Theme
Export/Import Theme
Transport Theme
Analyze Theme Content
UI Theme Repository
Browser (/SAP/BC/THEMING/THEMES)
Export/Import single files
Analyze Theme Content
*SAP Portal lifecycle tools differ, please check the SAP Portal UI theme designer documentation
Architecture
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 28Customer
Import
ExportApplication
ApplicationApplication
Architecture Overview
SAP NetWeaver Portal 7.30 SP10+
UI Theme Designer(IE10+/Firefox/Chrome)
SAP
NetWeaver
AS ABAP
UI Add-on for SAP NetWeaver
UR
Themes
SAPUI5
Themes
NWBC
Themes
UI theme repository (storage)
WebDAV/HTTP
3rd Party
Tools
.less
.less
.css .css
Theme Admin
Tool
LESS Format
Th
em
ing
Hub
s
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 29Customer
Anatomy of Themes
Customer theme "red"
library.css
[generated]
Base theme "sap_bluecrystal"
UI theme generator (LESS)
■ Theming data are less files (css with parameters and
evaluations, see http://lesscss.org)
■ A theme consists of theming data of the corresponding UI
technologies and their libraries and one central less file
for all technologies (quick theming)
■ UI theme designer uses parameters from less files
■ Changed parameters are stored in custom theme
■ UI theme designer creates CSS files for each UI
technology and library out of the less files of the custom
theme and their base theme.
Get the UI theme designer
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 31Customer
Availability of UI Theme Designer
ABAP
■ Install latest available SAP UI Add-on Service Pack*
■ Implement the mandatory patches (if any):
See SAP Note 1852401
■ Activate SICF services (public + admin), assign authorization
UI theme designer documentation: Getting Started
■ Start UI theme designer using transaction
/UI5/THEME_DESIGNER
Portal
■ Install latest Portal Service Pack for NetWeaver 7.30 or later.
■ Activate the UI theme designer for the Portal
Portal Docu: Working with UI theme designer
■ Start UI theme designer via
Content Administration Portal Desktop
Install
UI theme designer
http://service.sap.com/swdc
*Installations and Upgrades A - Z Index N UI ADD-ON FOR SAP NETWEAVER
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 32Customer
Kick-Start Now!
Trial Scope*
■ Access: registered SAP ID user(e.g. SCN User, Service Marketplace User)
■ Create a custom theme based on:
SAP Blue Crystal
SAP Corbu
SAP Gold Reflection
■ Store theme in your browser’s local storage
■ Base theme dependent usage of build-in previews:
NWBC (e.g. Index page, Shell)
SAPUI5 controls & applications (e.g. SAP Fiori app)
Unified Rendering controls (e.g. used in WDA/FPM)
Try the Trial Version on
the SAP HANA Cloud
https://themedesigner.hanatrial.ondemand.com/
*receives regular updates, so available features & content might change
Further Information
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 34Customer
Get More Details on the UI Theme Designer
Get more
information at
SCN
http://scn.sap.com/docs/DOC-52952
i
■ UI theme designer outlook is part of the
SAP UI Technology Road Map [Link]
■ UI theme designer at UX Explorer [Link]
■ Documentation: ABAP UI Add-on docu [Link]
includes UI theme designer [Link]
■ Documentation: UI theme designer @ SAP
Portal [Link]
■ UI theme designer Main Note: 1852400
Support Information
Latest fixes
List of supported themes
Thank you
Carola SteinmaierProduct Management
SAP User Interfaces
SAP AG
Dietmar-Hopp-Allee 16
68190 Walldorf, Germany
Ingo DeckDirector Product Management
SAP User Interfaces
SAP AG
Dietmar-Hopp-Allee 16
68190 Walldorf, Germany
