Professional Documents
Culture Documents
UI Theme Designer
Theming of Web Dynpro ABAP Applications
July 2014
www.sap.com
TABLE OF CONTENT
2 PREREQUISITES .............................................................................................................................. 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
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.
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
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS
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.
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’.
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
7
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS
Enter a theme name and also provide a theme ID. Select ‘Publish’
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:
8
UI THEME DESIGNER - THEMING OF WEB DYNPRO ABAP APPLICATIONS