SAP UX Explorer How-To Guide

UI Theme Designer
Theming of Web Dynpro ABAP Applications
July 2014
 www.sap.com

TABLE OF CONTENT

1 PURPOSE OF THIS DOCUMENT .................................................................................................... 3

2 PREREQUISITES .............................................................................................................................. 3

3 LINKS AND FURTHER INFORMATION .......................................................................................... 3

4 CREATE AND USE A THEME FOR A WEB DYNPRO ABAP APPLICATION .............................. 4
4.1 Start UI theme designer .................................................................................................................. 4
4.2 Define theme .................................................................................................................................... 4
4.3 Publish the theme ............................................................................................................................ 7
4.4 Use the new theme .......................................................................................................................... 8

©2014 SAP AG. All rights reserved.

This material does not constitute official SAP product documentation. The information herein is not a
commitment, promise or legal obligation to deliver any material, code or functionality. This material 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. This material is for
informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for
errors or omissions in this material, except if such damages were caused by SAP´s willful misconduct or
gross negligence.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign,
SAP BusinessObjects Explorer, StreamWork, SAP HANA, 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.

These materials are subject to change without notice. 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.
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS

1 PURPOSE OF THIS DOCUMENT

This document describes how to use the UI Theme Designer in order to adapt Web Dynpro ABAP
applications to one’s needs. The document is not meant to replace the product documentation but
rather supports a user by guiding him through the most important process steps.

2 PREREQUISITES
To use the UI theme designer for NetWeaver ABAP prior release 7.40 you need to install the UI
Add-on for NetWeaver 1.00 SP04 or higher.
Starting with release 7.40 SP04 the UI theme designer is part of NetWeaver.

3 LINKS AND FURTHER INFORMATION

Central entry point for documentation: http://scn.sap.com/docs/DOC-52952

Documentation of UI Add-On 1.0

Standard Notes: General: 1852400, ABAP: 1852401

FAQ: Note 1906793

3
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS

4 CREATE AND USE A THEME FOR A WEB DYNPRO ABAP APPLICATION

4.1 Start UI theme designer
Use browser Google Chrome or Firefox to open the following link:
http(s)://<server>:<port>/sap/bc/theming/theme-designer?sap-client=<client>

Alternatively call transaction /UI5/THEME_DESIGNER in your SAP backend system.

4.2 Define theme

Select a predefined theme and press ‘Edit’:

Now you need to enter a WDA link. In this example we use the Web Dynpro Application
FCOM_COSTCENTER, along with its configuration FCOM_COSTCENTER_CONF.

The WDA link looks as follows:

http(s)://<server>:<port>/sap/bc/webdynpro/sap/fcom_costcenter?sap-client=<client>&sap-
language=EN&WDCONFIGURATIONID=FCOM_COSTCENTER_CONF

4
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS

Enter this link into the field ‘Link to Application’ of the UI Theme Designer, provide a name and
select ‘Add’.

Now the application is displayed in the canvas of the theme designer.

You can start to change the appearance by using the ‘Quick’ and ‘Expert’ options.

5
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS

On the ‘Quick’ theming tab you can change the basic settings, which are technology independent,
e.g. the background color and the base color.

The color of the selected entry in a dropdown menu is changed via the ‘Highlight Color’ parameter:

More specific options are available via the ‘Expert’ tab. E.g. you can change settings for the page
header.
Navigate to the ‘Expert’ tab and search for ‘sapurpgh’. This displays the parameters for the page
header. Filter the parameters according to your needs, e.g. by selecting the color palette filter icon.

6
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS

Change the header text color by adapting parameter sapUrPgHTTxtColor

4.3 Publish the theme

When all changes are done the new theme needs to be published via ‘Theme  Publish…’, or in
the latest version of the UI Theme Designer via ‘Theme  Save & Build’

7
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS

Enter a theme name and also provide a theme ID. Select ‘Publish’

A confirmation pop-up shows the success of the publishing process:

4.4 Use the new theme

In order to use the newly published theme the new Web Dynpro ABAP URL needs to be built.

 Start with the original URL, e.g.

http(s)://<server>:<port>/sap/bc/webdynpro/sap/fcom_costcenter?sap-client=<client>&sap-
language=EN&WDCONFIGURATIONID=FCOM_COSTCENTER_CONF
 Append &sap-theme=<theme-name> to the original WDA URL:
http(s)://<server>:<port>/sap/bc/webdynpro/sap/fcom_costcenter?sap-client=<client>&sap-
language=EN&WDCONFIGURATIONID=FCOM_COSTCENTER_CONF&sap-
theme=<theme-name>

In cases where the theme root folder is located on a different server than your application server
you need to determine this specific information in order to build the complete URL for the theme:

 Determine theme-root for your system:

http(s)://<root-server>:<port>/sap/public/bc/themes/~client-<client>
 Append &sap-theme=<theme-name>@<theme-root> to the original WDA URL:
http(s)://<server>:<port>/sap/bc/webdynpro/sap/fcom_costcenter?sap-client=<client>&sap-
language=EN&WDCONFIGURATIONID=FCOM_COSTCENTER_CONF&sap-
theme=<theme-name>@http(s)://<root-server>:<port>/sap/public/bc/themes/~client-
<client>

8
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS

Call the newly composed Web Dynpro ABAP URL in a browser: