SAP Theme Designer Intro

Agenda

Theming of interfaces is an effective method to end-user satisfaction• SAP Theme Designer overview• Theming process• Theme parameters• Architecture

SAP Gateway

Key UI Tools and TechnologiesSAP Fiori Launchpad

SAP Enterprise Portal

SAP GUI

SAP Business Client

SAP Screen Personas

SAPUI5

Dynpro

Web Dynpro

SAP Web IDE

SAP

Mob

ile P

latfo

rm

Them

e De

signe

r

Clie

nts

Tool

sTe

chno

logy

UI Theme Designer

A browser-based tool which allows you to create your own themes to adapt the visual appearance of applications to apply corporate identity.

• Graphical WYSIGYG editor for previews• Different theme types: quick, expert, CSS• Custom CSS3 and LESS support• Support for

• SAPUI5 • WDA• WDJ• SAP GUI for HTML• SAP Portal• SAP Business Client

UI Theme Designer Key Capabilities

Today• Visual design of theme designer aligned to

SAP Web IDE• Target pages can be resized via keyboard• Increased theming efficiency

Planned Innovations• Improved theming support for SAPUI5• Further UI improvements• Theming support for

• SAP GUI• SAP Business Client

Theming Process: Build a Custom Theme

1. Choose an SAP base theme2. Add preview pages/controls3. Define color palette4. Change colors, backgrounds and logos5. Do further changes with LESS/CSS (optional)6. Save and build custom theme

Theme Parameters

• Add and remove often used colors to your pallette• Quick access for using these colors• Enjoy full control by using the CSS editor

• Experts only!• Can cause difficulty with upgrades• Only works for Unified Rendering and UI5

Theme Designer Architecture

3rd Party Tools

LESS Docs UI Theme Designer

SAP AS ABAP

Applications

UI Add-on

BC ThemesSAPUI5 ThemesUR Themes

UI Theme Repository

.less

.css .less .cssCommunicationVia HTTP

Conclusion

• The SAP UI theme designer enables you to adapt the visual appearance of your SAP business applications according to your needs and according to your corporate identity.

• The UI theme designer supports theming across multiple UI technologies and on different platforms.

• Dependent on your theming requirements and on your skills you can use the web-based WSYIWYG to adapt theming on a Quick-, Expert- or CSS-level.

• Demo available at https://goo.gl/lMqi0t