Web Dynpro: Coloring Table Conditionally

Applies to:
SAP ECC 6.0. For more information, visit the Web Dynpro ABAP homepage.

Summary
This article is designed for the beginners in Web Dynpro who have ABAP knowledge and want to learn Web Dynpro. It will help to design a table based on the input provided in the screen and conditionally color the cell in table. Author: J.Jayanthi

Company: Siemens Information Processing Services Pvt. Ltd. Created on: 09.07.2010

Author Bio
J.Jayanthi is an ABAP Certified professional with HR ABAP Knowledge.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1

Web Dynpro: Coloring Table Conditionally

Table of Contents
Prerequisite................................................................................................................................................... 3 Creating Web Dynpro.................................................................................................................................... 3 Component Controller ................................................................................................................................... 4 View ......................................................................................................................................................... 7

Web Dynpro Application .............................................................................................................................. 11 Code ....................................................................................................................................................... 12

Output ....................................................................................................................................................... 14 Related Content .......................................................................................................................................... 15 Disclaimer and Liability Notice ..................................................................................................................... 16

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 2

Web Dynpro: Coloring Table Conditionally

Prerequisite
Before creating a table, it is necessary to know about Component, View and Window. Component The component is the central, reusable unit of the application project. You can create any number of views in a component and arrange them in any number of windows. View The view is the smallest unit of a Web Dynpro application visible for the user. The layout elements and dialog elements - for example, tables, text fields, or buttons - required for the application are arranged in a view. The view contains a controller and a controller context in which the application data to be processed is stored in a hierarchical structure. This allows the linking of the graphical elements with the application data.
Window

A window is used to group multiple views and to specify the navigation between the views. A view can only displayed by the browser if the view is embedded in a window.

Creating Web Dynpro

Go to SE80 and select Web Dynpro Comp./Intf. and provide the name(say ZZZ_JAYTEST4) to create. Then enter the description and choose the type as Web Dynpro Component.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 3

Web Dynpro: Coloring Table Conditionally

Component Controller
Double click Component Controller and in the right side, right click Context->Create Node.

Right Click the node Output and then create attribute Matnr as below.

Similarly create attribute ERSDA from Mara. Then to color cells conditionally, create attribute COLOR inside node output.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 4

Web Dynpro: Coloring Table Conditionally

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 5

Web Dynpro: Coloring Table Conditionally

Right Click Context and then Create Attribute which we can use for Input in the screen.

After creating it, MATNR, ERSDA and COLOR should be inside OUTPUT node and CREATED should be outside the OUTPUT node.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 6

Web Dynpro: Coloring Table Conditionally

View
Double click the view (Main). Go to Context and then drag Output from component controller context to left side context in Main. Then create attribute 'Created' in Context.

Right click ROOTUIELEMENTCONTAINER and then choose Insert Element. Create a caption for Input field Created. Then create Input field.

In the property, change the text as desired.

Insert element for button DISPLAY. In the properties of the button, create Action Button click using create button.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 7

Web Dynpro: Coloring Table Conditionally

The layout will appear as below.

Then create table for Output as follows.

In Table Property, select the small button for Datasource and then from the popup, select the node.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 8

Web Dynpro: Coloring Table Conditionally

Similarly for ERSDA, in datasource use the button and select the Input field Created.

Right click the node Output for Binding. Select Create Binding and then enter values as below.

Change the text for table and then the text for the fields in the properties. After doing that, table will appear as below.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 9

Web Dynpro: Coloring Table Conditionally

Change the value in the property of MATNR and ERSDA in table.

The table will appear as below.

Double click the table column OUTPUT_ERSDA and then update the Properties of CellDesign as below(Use the button in the right side to select COLOR).

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 10

Web Dynpro: Coloring Table Conditionally

Web Dynpro Application

Create Web Dynpro Application by right clicking the object(ZZZ_JAYTEST4).

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 11

Web Dynpro: Coloring Table Conditionally

Code
To display the output as table when button is clicked, we need to write the code in the method ONACTIONBUTTONCLICK. Use Code wizard to generate code.

To read the context node Output, do as below.

Keep the below code and remove the rest which is not required.

To read context Attribute Created, do as below.

We need to modify the color of the ERSDA field, if the material created date is equal to the date provided in the input field. We can check the Value range of the Domain to decide the color. In this example, we are going to provide value as '02'.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 12

Web Dynpro: Coloring Table Conditionally

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 13

Web Dynpro: Coloring Table Conditionally

To bind the table

Output

Created Date appears with different color if date provided is same as of that created date.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 14

Web Dynpro: Coloring Table Conditionally

Related Content
For more information, visit the Web Dynpro ABAP homepage.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 15

Web Dynpro: Coloring Table Conditionally

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this do cument, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the conte nt of this document.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 16