modifying abap webdynpro’s look and feel by changing css files

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BA - boc.sap.com | UAC - uac.sap.com

© 2011 SAP AG 1

Modifying ABAP Webdynpro’s Look

and Feel by Changing CSS Files

Applies to:

ABAP Webdnyrpo, ABAP Programming, CSS Modification. For more information, visit the ABAP homepage.

Summary

This guide is for those who want to bring a modern look and feel for the ABAP Webdynpro UI’s.

Author: Ravi Sharma

Company: C2C Consulting

Created on: May 30, 2011

Author Bio

Ravi Sharma is a Development Architect and solution manager working for C2C consulting in Germany. His current Tasks: Duet Enterprise For Microsoft SharePoint and SAP, SAP NetWeaver Gateway and iPhone / Android Apps, SAP ESOA Tools & Utilities SAP IDM & GRC Integration. Knowledge of SAP ABAP, Cross Applications, ALE/IDOC, RFC's qRFC, tRFC, BADI, OOP's Concepts, CCMS and Solution Manager, SAP RFID, SAP Dynpro, SAP ABAP Webdynpro, SAP

Net weaver, DUET 1.5, ABAP and Java Web services..

https://www.sdn.sap.com/irj/sdn/abap

Modifying ABAP Webdynpro’s Look and Feel by Changing CSS Files


© 2011 SAP AG 2

Table of Contents

Create a simple web Dynpro program ................................................................................................................ 3

Steps to create simple web dynpro program .................................................................................................. 3

Create a web dynpro Application .................................................................................................................. 13

Test Dynpro program ........................................................................................................................................ 14

Output of the Program ...................................................................................................................................... 15

Why we need to change the standard layout. .................................................................................................. 15

How Can You Make Modification in Standard CSS ...................................................................................... 16

How Can You Find the Path of CSS File ...................................................................................................... 16

Import Theme in SAP System ....................................................................................................................... 20

Output:…… ....................................................................................................................................................... 21

Related Contents .............................................................................................................................................. 22

Copyright........................................................................................................................................................... 23



© 2011 SAP AG 3

Create a simple web Dynpro program

First of all create simple web dynpro program as shown below. In this program fetch data from flight table and display into browser.

Steps to create simple web dynpro program

Step 1: Go to transaction se80 and select dynpro comp. /intf provide related name and click on display button as shown in figure below.

Enter related description as shown in figure below and press ok button.



© 2011 SAP AG 4

Now enter the package name and press save as shown in figure below.

Step 2: Press right clicks on object name sflight_demo and select create and then view and enter. Enter the view name and related description and press ok button.



© 2011 SAP AG 5

Step 3: Now screen look like as shown below in figure and press save button.

Step 4: Now click on zsflight_demo window name. Drag and drop the mainview into window name zsflight_demo as shown in figure below.

After drag and drop the mainview into window name expand the window node you see mainview under root node zsflight_demo.



© 2011 SAP AG 6

Step 5: Now select the context node of mainview right click on context select create and then click

on node.

Now small window opens enter the node name sflight_node & dictionary structure sflight and cardinality 0.n for fetching the n number of rows from table sflight .and click on add attributes from structure button.



© 2011 SAP AG 7

Now click on select all button and press ok as shown in figure below.



© 2011 SAP AG 8

Step 6: After completing the pervious step the selected fields come under the sflight node and press save.

Step 7: Now select the layout tab and right click on rootuielementcointainer and then insert element. A small window opens enter id sflight_table and in type field enter table as shown in figure below.

Now your screen looks like as shown in figure below.



© 2011 SAP AG 9

Step 8: Now right click on the node sflight_table which is shown in right side of the screen and then click on create binding as show in figure below.

Now click on context button.



© 2011 SAP AG 10

Now select the sfilght_node and press ok button as show in figure below.

This step is only for mapping fields.

Now check all the ticks on the checkbox fields and press ok button.



© 2011 SAP AG 11

Now your screen look like as show in figure below and press save.

Step 9: Now select caption header and enter flights in the property field text and press save.



© 2011 SAP AG 12

Step 10: Now select the methods tab double click on WDDOINIT to put the code for fetch data from table.

Now put the following code between method and endmethod press save as shown in figure below.



© 2011 SAP AG 13

Create a web dynpro Application

Step 11: Now right click on object name sflight_demo then select create and then click on web dynpro application as shown in figure below.

Now enter relative description and press ok as shown in figure below and then press save. it ask for the package provide the package name and press ok.



© 2011 SAP AG 14

Now double click on the abject name sflight_demo and then press activate press ok as shown in figure below.

Test Dynpro program

Dynpro application is completed now test the application. Right click on zsflight_demo web dynpro application and press click on test.



© 2011 SAP AG 15

After click the test a web browser opens. Here enter the user name and password.

Output of the Program

Now the output of the program is comes as shown in figure below.

Now your simple web dynpro application is running as you seen in figure above if you want to change the look or feel of the screen than can be possible.

Why we need to change the standard layout.

When we make a dynpro program for any organization then organization wants our own theme with company logo or design on the web browser screen. So that’s why we have to need to change the standard theme or design of output screen. For modification we have need to change the standard css.



© 2011 SAP AG 16

How Can You Make Modification in Standard CSS

Modification in standard css is not a difficult task but main task is to identifying the actual css file. Because in sap system there is lot of css file according to browser supportability. For example For the css file name for internet explorer is ln_ie6.ccs . For Mozilla browser the css file is ls_nn7.css

How Can You Find the Path of CSS File

First of all use browser Mozilla fire fox. Install plugin fire bug in browser Mozilla available in Mozilla fire fox.

Click on add-ons enter the name fire bug in search field and press search button.



© 2011 SAP AG 17

Click on install button the add –ons firebug will install in your browser and browser will restart automatically.

Now test your dynpro application in Mozilla fire fox by copying the link from ie. Enable the fire bug add-on by clicking on the icon.

The screen will look like as you seen above.

Click and expand the header of html as shown in figure below.

This is your path of css file on server the first row where the arrow is located.

/sap/public/bc/ur/nw5/themes/sap_tradeshow_plus/ls/ls_nn7.css?201009192048

Now find the file by using this path go to transaction se80 click on mime repository.

Select -> public->bc->ur->nw5->theme->sap_tradeshow_plus->ls->ls_nn7.css



© 2011 SAP AG 18

Double click on ls_nn7.css it will open in notepad as you seen below

From this file you can change your css like sizing, color, text, background image etc. Copy this file and make another in your local disk and do modification according to your need but maintain the file name same as original. After completing the modification replace your note pad file to your modified css file but the name of your file must be as the same as standard css file.

Using Select -> public->bc->ur->nw5->theme->sap_tradeshow_plus->ls->ls_nn7.css path right click on the css file and delete as shown in figure below.

Now add new css file after modification as show in figure below and click on import mime object.



© 2011 SAP AG 19

Now a file browser opens select your file name and press open button as shown in figure below.

Now a new window opens as shown below press save then your file will be updated in the list.



© 2011 SAP AG 20

Import Theme in SAP System

Now upload a theme in sap system in this case I have upload image in public->bc->ur->nw5->theme->sap_tradeshow_plus->common->button as shown in figure below.

In this case I am using this path but you can insert image any folder in common and also can create your own folder but give the exact path where your image lying in css file.

Now provide the path of image in css file

Now restart your server.

Run your application



© 2011 SAP AG 22

Related Contents

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/7015b1f9-535c-2910-c8b7-e681fe75aaf8?QuickLink=index&overridelayout=true&8053063684070

For more information, visit the ABAP homepage.



https://www.sdn.sap.com/irj/sdn/abap



© 2011 SAP AG 23

Copyright

© Copyright 2011 SAP AG. 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.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Oracle Corporation.

JavaScript is a registered trademark of Oracle Corporation, used under license for technology invented and implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, 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 S.A. in the United States and in other countries. Business Objects 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.

modifying abap webdynpro’s look and feel by changing css files

Documents