Webdynpro Trickie

8/13/2019 Webdynpro Trickie

1/16

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

2010 SAP AG 1

Web Dynpro: Coloring TableConditionally

Applies to:

SAP ECC 6.0. For more information, visit theWeb Dynpro ABAP homepage.

Summary

This article is designed for the beginners in Web Dynpro who have ABAP knowledge and want to learn WebDynpro. It will help to design a table based on the input provided in the screen and conditionally color the cellin 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.
https://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabap


2/16

Web Dynpro: Coloring Table Conditionally


2010 SAP AG 2

Table of Contents

Prerequisite................................................................................................................................................... 3Creating Web Dynpro .......................... .......................... ........................ ......................... ........................... .... 3Component Controller ......................... .......................... ........................ ......................... ........................... .... 4View .......................... ......................... ......................... ......................... ........................... ......................... 7Web Dynpro Application ........................... ........................ ......................... .......................... ........................ 11Code .......................... ......................... ......................... ......................... ........................... ....................... 12Output ................. ......................... ......................... ........................... ......................... ......................... ....... 14Related Content .......................... ......................... ......................... ......................... ........................... .......... 15Disclaimer and Liability Notice .......................... ......................... ......................... ......................... ................ 16


3/16



2010 SAP AG 3

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 ina 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 storedin 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 onlydisplayed 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. Thenenter the description and choose the type as Web Dynpro Component.


4/16



2010 SAP AG 4

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.


5/16



2010 SAP AG 5


6/16



2010 SAP AG 6

Right Click Contextand 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 beoutside the OUTPUT node.


7/16



2010 SAP AG 7

View

Double click the view (Main). Go to Context and then drag Output from component controller context to leftside 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.


8/16



2010 SAP AG 8

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.


9/16



2010 SAP AG 9

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 appearas below.


10/16



2010 SAP AG 10

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(Usethe button in the right side to select COLOR).


11/16



2010 SAP AG 11

Web Dynpro Application

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


12/16



2010 SAP AG 12

Code

To display the output as table when button is clicked, we need to write the code in the methodONACTIONBUTTONCLICK.

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 inthe input field.

We can check the Value range of the Domain to decide the color. In this example, we are going to providevalue as '02'.


13/16



2010 SAP AG 13


14/16



2010 SAP AG 14

To bind the table

Output

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


15/16



2010 SAP AG 15

Related Content

For more information, visit theWeb Dynpro ABAP homepage.
https://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabap


16/16


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 document,

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 orcode 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 content of this

document.

Documents

Webdynpro Trickie