You are on page 1of 9

SAP UX Explorer How-To Guide

UI Theme Designer
Theming of Web Dynpro ABAP Applications
July 2014

... Xcelsius..................... Web Intelligence.......... without representation or warranty of any kind..... and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase.....com TABLE OF CONTENT 1 PURPOSE OF THIS DOCUMENT ............................. The information herein is not a commitment...........3 Publish the theme .....sap........................................... National product specifications may vary........... SAP HANA....... PartnerEdge............. These materials are subject to change without notice................. ByDesign. if any..... 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..... including but not limited to................... StreamWork................. SAP......................... www........... the implied warranties of merchantability..... This material does not constitute official SAP product documentation.... Inc. code or functionality...................4 Use the new theme ........................... Sybase 365.....2 Define theme ... 4 4...... Data contained in this document serves informational purposes only.................. and SAP Group shall not be liable for errors or omissions with respect to the materials.............................. Crystal Reports.......... BusinessObjects..... 4 4. SAP assumes no responsibility for errors or omissions in this material....... Duet........ Sybase is an SAP company........................ 3 4 CREATE AND USE A THEME FOR A WEB DYNPRO ABAP APPLICATION ..................... 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.............. 3 2 PREREQUISITES ...................................... Nothing herein should be construed as constituting an additional warranty.................. except if such damages were caused by SAP´s willful misconduct or gross negligence.......... 3 3 LINKS AND FURTHER INFORMATION ................................. Business Objects and the Business Objects logo............ 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.......... SAP NetWeaver...... R/3..... SAP BusinessObjects Explorer.............. fitness for a particular purpose......1 Start UI theme designer .......... Business Objects is an SAP company................................ These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only. 7 4.......................... 8 ©2014 SAP AG............ iAnywhere.............. promise or legal obligation to deliver any material......... or non-infringement................. .. Crystal Decisions.......... All other product and service names mentioned are the trademarks of their respective companies........ Sybase and Adaptive Server................. either express or implied... This material is provided without a warranty of any kind....... SQL Anywhere...................................................... This material is for informational purposes and may not be incorporated into a contract............... 4 4.. All rights reserved.................................

Starting with release 7.com/docs/DOC-52952 Documentation of UI Add-On 1. 3 LINKS AND FURTHER INFORMATION Central entry point for documentation: http://scn.0 Standard Notes: General: 1852400.40 you need to install the UI Add-on for NetWeaver 1.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. ABAP: 1852401 FAQ: Note 1906793 3 . 2 PREREQUISITES To use the UI theme designer for NetWeaver ABAP prior release 7. The document is not meant to replace the product documentation but rather supports a user by guiding him through the most important process steps.sap.00 SP04 or higher.UI THEME DESIGNER .40 SP04 the UI theme designer is part of NetWeaver.

4. 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 .THEMING OF WEB DYNPRO ABAP APPLICATIONS 4 CREATE AND USE A THEME FOR A WEB DYNPRO ABAP APPLICATION 4.UI THEME DESIGNER .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.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. along with its configuration FCOM_COSTCENTER_CONF.

provide a name and select ‘Add’.UI THEME DESIGNER .THEMING OF WEB DYNPRO ABAP APPLICATIONS Enter this link into the field ‘Link to Application’ of the UI Theme Designer. Now the application is displayed in the canvas of the theme designer. 5 . You can start to change the appearance by using the ‘Quick’ and ‘Expert’ options.

e. the background color and the base color. you can change settings for the page header. This displays the parameters for the page header.THEMING OF WEB DYNPRO ABAP APPLICATIONS On the ‘Quick’ theming tab you can change the basic settings. 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. 6 . which are technology independent.g.UI THEME DESIGNER . by selecting the color palette filter icon. Filter the parameters according to your needs. e. Navigate to the ‘Expert’ tab and search for ‘sapurpgh’. E.g.g.

or in the latest version of the UI Theme Designer via ‘Theme  Save & Build’ 7 .3 Publish the theme When all changes are done the new theme needs to be published via ‘Theme  Publish…’.UI THEME DESIGNER .THEMING OF WEB DYNPRO ABAP APPLICATIONS Change the header text color by adapting parameter sapUrPgHTTxtColor 4.

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. 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 .THEMING OF WEB DYNPRO ABAP APPLICATIONS Enter a theme name and also provide a theme ID.g. e.  Start with the original URL.UI THEME DESIGNER .

UI THEME DESIGNER .THEMING OF WEB DYNPRO ABAP APPLICATIONS Call the newly composed Web Dynpro ABAP URL in a browser: 9 .