Here is our first data context in this SAP Web Dynpro tutorial
I'm only interested in ShipTo partner data as the filter on the UI, so I highlight SHIPTO and press Enter Since we do not need all columns of the structure, press "Add Attributes from Structure" button to select fields or attributes we are interested in. Right click on CONTEXT choose Create > Node option. I'll use this sturucture in the creation of both filter data context node and table data context node.įirst, I start with filter node which will be used for storing ship-to partner number. I have created a structure named Z_SOM_TR_CSC_PROFORMA_VBAP and a table type of this in data dictionary. Let's now open ComponentController by double-click on it and start defining our data storage containers in forms of nodes and attributes for our application. Web Dynpro ComponentController and Data Context Web Dynpro developers will use these component usages for data mapping from context to ALV tables. When used components are entered in the Used Web Dynpro Components tab and saved, a new node named Component Usages will be created automatically under the treeview structure of the Web Dynpro as follows. If the ABAP developers will use two ALV tables on the web dynpro application screen, the WebDynpro developer can create two used components with different names but using same SALV_WD_TABLE ALV component on this screen.Īs you can see above, I defined two ALV tables with names ALV_OPENITEMS and ALV_PROFORMA.Īdditionally I used WDR_SELECT_OPTIONS Select Options Web Dynpro component just to show you there is an other component available for your use.ĭevelopers can also refer to Web Dynpro tutorial on Web Dynpro Select Options Type a name as you wish in Component Use column and enter SALV_WD_TABLE in Component column as seen in below screnshot. Using this tab we will include SAP Web Dynpro components like ALV using SALV_WD_TABLE component and select options using WDR_SELECT_OPTIONS. Now switch to edit mode and double click on the component top level object. SALV_WD_TABLE ALV Component in Web Dynpro Please note that there is no Component Usages node and objects down under this node for ALV table or Select Options UI controls.Ĭomponent Usages node and details are created when the developer adds a Web Dynpro Component in the Used Components tab of the WD itself.ĪBAP developers can use SALV_WD_TABLE as an ALV Component and WDR_SELECT_OPTIONS for Select Options on a Web Dynpro application. Then you can map these context objects to other Web Dynpro component objects like views, input forms or ALV tables, etc. It is not required to define them again and again on ComponentController, View objects or on Windows.ĭefine all your data context (objects that store data for layout controls in forms of attributes or tables) on ComponentController. To define used components once is enough if you define them on top level object of the Web Dynpro component. While developing Web Dynpro components, keep in mind that short and I believe useful hints.ĭefine Used Web Dynpro Components like ALV, Select Options, etc only on the Used Components tab of Web Dynpro component itself. When a new Web Dynpro component is created in SE80 screen, all objects within the component can be seen in below screenshot.
Press Save if required provide or create the workbench request for the new Web Dynpro Component Press Enter and choose the ABAP development package you want to include your Web Dynpro component development.įor a Web Dynpro tutorial sample, you can save the WD component as a local object. When the pop-up to confirm new SAP Web Dynpro component creation, press Yes. If you want to create a new WebDynpro application, type the name you want to assign in the input text area just below the Web Dynpro Comp. menu option to display, view or edit existing SAP Web Dynpro components or to create new Web Dynpro component.
Step 2: In Transport Organizer tab, choose Web Dynpro Comp. Step 1: Call SAP transaction SE80 Object Navigator and start developing your first Web Dynpro component.
In this tutorial, ABAP developers can expect to see how to use an input box, a button and ALV table to query SAP database and display data on a Web Dynpro view. In this SAP Web Dynpro tutorial, I want share what I learnt on Web Dynpro development and displaying ALV table on a Web Dynpro page.įirst of all, I want to create an SAP Web Dynpro component which is similar to below sketch or UI mockup.
This tutorial se following main sections:Ģ) Hints on Web Dynpro project components for programmersģ) SAP SALV_WD_TABLE ALV Component usage in Web DynproĤ) Web Dynpro ComponentController and Data ContextĨ) Programming in ABAP for a Web Dynpro using Code Wizard