SAPUI5 Theme Designer

Frederic Berg, Bertram Ganz, Thomas Hensel, Andreas Hirche, Uwe Klinger | SAP AG

October 2013

CD167

New User Interface Theme Designer

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

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.

New UI Theme Designer in a nutshell


UI theme designer:

The single tool for theming and branding SAPs key user interfaces.

New UI theme designer in a nutshell Overview

Key capabilities

Browser-based WYSIWYG editor

Different skill levels of theming: quick, expert and CSS

Multi platform and multi UI technology support

Cross-technology theming

Benefits

Increased user happiness

Increased theming efficiency

Low TCO


New UI theme designer in a nutshell Supported technologies and platforms (now and in future)

Supported UI Technologies

Supported Platforms

Unified Rendering Web Dynpro ABAP/Java, HTML GUI

SAPUI5 (incl. SAP Fiori)

SAP NetWeaver Portal SAP NetWeaver

Business Client SAP GUI

SAP NetWeaver AS ABAP via UI add-on 1.0 SP04

SAP HANA Cloud

SAP NetWeaver Portal >= 7.30 SP10

SAPUI5 Custom Libs

CRM WebUIF

SAP NetWeaver Portal 7.02

supported

support planned

Getting Started

Use quick theming to theme an SAP Fiori application

based on SAPUI5


UI THEME DESIGNER

just for documentation

WORKFLOW

AREAS

FUNCTIONS Preview

Basic cross-

technology theme

settings (Quick Theming)

Technology specific theme settings

Loaded

preview

pages

Click to add

preview pages

Demo 1: Getting started

Use quick theming to theme a SAP Fiori application

based on SAPUI5

Exercise 1: Getting started

Use quick theming to theme a SAP Fiori application

based on SAPUI5

Architecture


Architecture Overview

SAP NetWeaver Portal 7.30 SP04

New UI theme designer (IE9+/Firefox/Safari/Chrome)

SAP

NetWeaver

AS ABAP

UI Add-on 1.0 SP04 for SAP NetWeaver

Unified

Rendering

Themes

UI Dev. Toolkit

for HTML5

(aka SAPUI5)

SAP

NWBC

themes

UI theme repository (storage)

1

2

6

4 .less

.css

3 .less

1 UI theme designer is SAPUI5 web application

3 Theming (consisting of

less files) are

discovered and received

via WebDAV calls

2 UI theme repository -

Storage of custom themes

4 Theme Designer

creates new themes and

saves less, css and

images to the Theme

Repository

5 The theme is displayed in applications using the

css files

6 Supported backends

WebDAV/HTTP

Application Application

Application

.css 5

Theme Admin

Tool

8 Additional admin tool for lifecycle functions

8


Architecture Anatomy of themes

A theme consists of theming data of the belonging UI technologies and their libraries and one central less file for

all technologies (quick theming)

Theming data are less files (css with parameters and evaluations, see http://lesscss.org)

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.

Customer theme "red"

library.css

[generated]

Base theme "sap_goldreflection"

UI theme generator (LESS)


Customer Theme "red"

Architecture Generation of themes

library.less

[source]

library.css

[generated]

Standard Theme "sap_goldreflection"

library.less

[source]

Theme Generator (LESS)

// from sap_corbu @BaseColor: #ddd; @ButtonBackground: darken(@BaseColor,10); .sapButton { background-color: @ButtonBackground; } // from red @ButtonBackground: #ddf; .sapButton { border-radius: 3px; }

.sapButton { background: #ddf; }

.sapButton { border-radius: 3px; }

@ButtonBackground: #ddf; .sapButton { border-radius: 3px; }

@BaseColor: #ddd; @ButtonBackground: darken(@BaseColor,10); .sapButton { background-color: @ButtonBackground; }

SAPUI5 Theming


UI5 Control Libraries

sap.ui.commons Includes bread and butter" controls like TextField, Button

sap.ui.ux3 Includes UX3 patterns, e.g. Shell

sap.ui.table Includes the Table control

sap.m, sap.me Includes controls for mobile devices

And more, like sap.viz, sap.uiext


Application Title

The library.css Files

Theme sap_goldreflection

Library sap.ui.core

Library sap.ui.commons

Library sap.ui.ux3

Demo 2: SAPUI5 Theming

Quick theming and expert theming for SAPUI5

Exercise 2: SAPUI5 Theming

Quick theming and expert theming for SAPUI5

Cross-theming

Create one consistent theme for common use with SAPUI5

(incl. SAP Fiori) and Web Dynpro ABAP/FPM, SAP NWBC


technology specific, flexible, possible rework after upgrade/patch

cross-technology, effective, upgrade & patch save

Cross-theming Theming process

1. Change basic coloring using quick theming

2. Change control colors for Unified Rendering and SAPUI5

using base parameters offered in expert theming

3. Unified Rendering and Portal only: Change detailed control

parameters in expert theming

4. Add custom CSS


Expert Theming in SAPUI5

(UI technology specific)

Cross-theming Theme parameter structure

Expert Theming in SAPUI5

(UI technology specific)

Quick

Theming

Brand Color

Highlight Color

Base Color

Background

Color

...

@sapBrandColor

@sapHighlightColor

@sapBaseColor

@sapBackgroundColor

...

@sapToolbar_Background

@sapTitleColor

@sapGroup_ContentNeutralBackground fx

fx

fx

fx

@sapContent_HighlightStrongColor

@sapButton_Hover_Background

@sapField_Hover_BorderColor

@sapField_Hover_HelpBackground

@sapField_Focus_BorderColor

@sapField_RequiredColor

@sapList_SelectionBackgroundColor

@sapList_Hover_Background

@sapHighlightTextColor

CSS Generation


Building Themable UIs Tips

Don't hard-code colors, fonts, etc.

Use rem units where appropriate

SAPUI5 Control Developers:

Use the theme LESS parameters in CSS class definitions and rules.

Use the appropriate level of parameter for the control; creating new ones as appropriate, e.g., don't

use color values or quick theming parameters directly in CSS rules.

Follow the control parameter hierarchy conventions.

SAPUI5 App Developers writing custom HTML:

LESS parameters not accessible via CSS; only support for standard libraries

Read appropriate parameter values via API and set the elements' CSS properties rather than hard-

coding colors or borrowing arbitrary style classes from control sets:

jQuery.sap.require("sap.ui.core.theming.Parameters");

var myColor = sap.ui.core.theming.Parameters.get("sapUiSemanticErrorColor");

Demo 3: Cross-theming

Create one consistent theme for common use with SAP Fiori

(on SAPUI5 Mobile), SAPUI5 Desktop and Web Dynpro

ABAP/FPM, SAP NWBC

Exercise 3: Cross-theming

Create one consistent theme for common use with SAP Fiori

(on SAPUI5 Mobile), SAPUI5 Desktop and Web Dynpro

ABAP/FPM, SAP NWBC

Using custom themes

How to run applications with custom themes


Using custom themes

Via SAP Clients

Configuration option available for SAP NWBC (Desktop and HTML @ UI Add-on)

Configuration of Portal Desktop for SAP NetWeaver Portal (>= SAP NetWeaver 7.30 SP10)

Via URL parameter

sap-theme URL parameter extended for new theming infrastructure: themeId@themeRoot

sap-cssurl URL of legacy theming still supported

Demo 4: Using custom themes


Exercise 4: Using custom themes (optional)


Theme Lifecycle Management

Managing the lifecycle functions for themes on

SAP NetWeaver AS ABAP


Theme lifecycle overview

UI theme repository (e.g ERP System)

UI theme designer

Previews

Transport a theme through

the customers landscape

Shell

Application

Shell

Application

Shell

Application

Share a theme over

several systems

UI theme repository (e.g. ERP Prod System)

Export and Import themes

(e.g. for local editing)

a

b

c

A D M I N


SAP NetWeaver AS ABAP: Theme lifecycle tools

UI theme designer

editing

UI theme admin tool

transport

import/export

UI theme repository

browser


SAP NetWeaver AS ABAP: Theme lifecycle functions

Scenario Tool

Creating/Editing themes UI theme designer

Deleting themes UI theme admin tool

Rename/Copy themes Not supported yet

Export/Import themes UI theme admin tool

Export/Import single files UI theme repository browser

Import legacy theme Not supported yet

Transport themes UI theme admin tool

Update/Upgrade themes UI theme designer

Analyze theme content UI theme admin tool , UI theme browser


Customer theme

"red"

Updating custom themes

library.css

*UPDATED*

UI theme designer

Customer theme

"red"

library.css

[generated]

Standard theme

"sap_goldreflection"

Standard theme

"sap_goldreflection *PATCHED*

SP or patch

library.css

[generated]

Standard theme

"sap_goldreflection *PATCHED*

Customer theme

"red"

1 Custom theme is ok 2 Custom theme

inconsistent after patch 3 Custom theme updated

References


UI theme designer: Documentation

http://help.sap.com/nw-uiaddon

(User Interface Add-On 1.0 for SAP NetWeaver)

Application Help (PDF):

Architecture of the UI Theme Designer

Designing Themes

Maintaining Themes

SAP Theme Reference


Further Information

Watch SAP TechEd Online

www.sapteched.com/online

SAP Public Web

scn.sap.com/community/ui-technology

experience.sap.com

uxexplorer.hana.ondemand.com

SAP Notes

1852401 UI Theme Designer for AS ABAP (Master Note)

Related SAP TechEd Sessions

CD168 Building SAP Fiori-like UIs with SAPUI5

CD267 Best of Both Worlds SAP GUI and SAP NetWeaver Business Client

CD269 Build Modern User Interfaces with Web Dynpro ABAP and Floorplan Manager


SAP TechEd Virtual Hands-on Workshops and SAP TechEd Online Continue your SAP TechEd education after the event!

SAP TechEd Virtual Hands-on Workshops

Access hands-on workshops post-event

Available January March 2014

Complementary with your SAP TechEd registration

SAP TechEd Online

Access replays of keynotes, Demo Jam, SAP TechEd LIVE interviews, select lecture sessions, and more!

View content only available online

http://saptechedhandson.sap.com/

http://sapteched.com/online

Feedback Please complete your session evaluation for CD167.

Thanks for attending this SAP TechEd session.


2013 SAP AG or an SAP affiliate company. 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.

National product specifications may vary.

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.

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

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

Documents

SAPUI5 Theme Designer