Web Dynpro: Coloring Table Conditionally

Transcription

1 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: Author Bio J.Jayanthi is an ABAP Certified professional with HR ABAP Knowledge SAP AG 1

2 Table of Contents Prerequisite... 3 Creating Web Dynpro... 3 Component Controller... 4 View... 7 Web Dynpro Application Code Output Related Content Disclaimer and Liability Notice SAP AG 2

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 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 AG 3

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 SAP AG 4

5 2010 SAP AG 5

6 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 AG 6

7 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 AG 7

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 SAP AG 8

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 appear as below SAP AG 9

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(use the button in the right side to select COLOR) SAP AG 10

11 Web Dynpro Application Create Web Dynpro Application by right clicking the object(zzz_jaytest4) SAP AG 11

12 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 AG 12

13 2010 SAP AG 13

14 To bind the table Output Created Date appears with different color if date provided is same as of that created date SAP AG 14

15 Related Content For more information, visit the Web Dynpro ABAP homepage SAP AG 15

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 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 content of this document SAP AG 16