WebDynpro context for creation of screen field including standard search help



Below are the steps required to create a context object within your ABAP webDynpro, this is then used to implement a user input field on the web dynpro VIEW. Also includes demonstration of how standard SAP search helps are implemented automatically from the data dictionary element used as a reference for the context.

Step 1 - First create a basic web dynpro application
Create a new web dynpro application ensuring it has at least one view and window and executes ok

Step 2 - Create context node globally within component controller
Double click on the 'COMPONENTCONTROLLER' and select the Context tab.


Now right click on the top level CONTEXT node and select Create->Node.


Step 3 - Context node details
Give the node a name (USER_DETAILS), leave properties as default and enter a dictionary structure(PA0002). For future reference if all your required fields are not in one structure i have found the best way is to create your own Z structure and add all the fields to this. This also give you more freedom to change field labels/size at a later date as they will not be refering to SAP standard structures, tables etc. But for this example we will use PA0002 as the base structure.


Step 4 - Choose node attributes
Now press the 'Add Attribute from Structure' button and select your required fields, in this case PERNR, NACHN, VORNA and ANRED


Press the green tick and your node should be created.


Step 5 - Assign COMPONENTCONTROLLER context to VIEW context
Within your view select the 'Context' tab, now left click drag the created COMPONENTCONTROLLER context from the right window and drop it on the view context on the left. A message will popup asking if you want to create mappings, click ok and the context(USER_DETAILS ) should then appear under the context node on the left.


Step 6 - Add fields to webDynpro layout using the wizard
Within the 'Layout' tab of your view select the 'ROOTUIELEMENTCONTAINER' node and press the wizard button(magic wand).


Select the form option by double clicking on Form


Step 7 - Select the context for wizard
Now click on the 'Context' button and select the appropriate context element (USER_DETAILS)


Ensure the binding checkbox is check for the fields you would like to appear on the screen


Step 8 - Ensure TEXT_VIEW is set to matrixHeadData
Within the layout of your view expand the transparent_container created by the wizard and select the 'TEXT_VIEW' element, now ensure the layout data is set to 'MatrixHeadData'


Step 9 - Add event to field(pernr)
Within the properties of the PERNR field click on the create button next to the onEnter event.


Step 10 - Create Action / Event
Give your new action(USERDET) a name and description


Step 11 - Action code
Add the following code to your action method. Accessed via action tab or methods tab.

 Data: context_node type ref to if_wd_context_node,
        ld_pernr type pernr-pernr,
        wa_userdet type if_main=>element_USER_DETAILS.
* Retrieve value of webDynpro field
  context_node = wd_context->get_child_node( name = 'USER_DETAILS').
  context_node->GET_ATTRIBUTE( exporting NAME = 'PERNR'
                                 importing value = ld_pernr ).
  if not ld_pernr is initial.
    select single anred nachn vorna
      from pa0002
      into CORRESPONDING FIELDS OF wa_userdet
      where pernr = ld_pernr.
  endif.
* Populate webDynpro field(s)
  context_node = wd_context->get_child_node( name = 'USER_DETAILS').
  context_node->BIND_STRUCTURE( wa_userdet ).



Step 12 - Save and activate
Now save and active your webDynpro application. Right click on the Application and select test. You should now see the following htm page


Enter a personnel number and press enter, if valid the fields should be populated as follows


Step 13 - Search Help
As you can see a couple of the fields have a searchhelp button which when clicked on provides the user with a popup window allowing them to search for valid input field entries.


Related Articles

Add programmed/OVS search help to FPM ESS/MSS application via enhancement to CL_HRESS_PER_DETAIL
BIND_STRUCTURE method of interface IF_WD_CONTEXT_NODE to assign structure to context
BIND_TABLE method of interface IF_WD_CONTEXT_NODE
Get the name of the button the user has clicked on within the SAP web dynpro action ABAP code
Create field Refering to datatype of webDynpro context element
Disable SAP User Personalisation in Web Dynpro app using WDDISABLEUSERPERSONALIZATION and WDENABLEUIELEMENTSHIDE
GET_ATTRIBUTE method of interface IF_WD_CONTEXT_NODE to retrieve value of context element
GET_SELECTED_ELEMENTS to get selected row of ABAP web dynpro table when not using lead selection
GET_STATIC_ATTRIBUTE_TABLE method to return all rows of a context table node
IF_WD_CONTEXT_NODE interface methods withn ABAP Web Dynpro to enable users to view and change data
ABAP code to manually trigger ABAP web dynpro plug
Popuate SAP WebDynpro field
Freely Programmed search help for your web dynpro application (custom value help/OVS)
Change the stylesheet theme used by your web dynpro and portal apps (i.e. SAP_TRADESHOW, SAP_CORBU)
Change the stylesheet theme used by your web dynpro and portal apps (i.e. SAP_TRADESHOW, SAP_CORBU)
SET_ATTRIBUTE method of interface IF_WD_CONTEXT_NODE to assign value to individuale context attribute
Clear context attribute using SET_ATTRIBUTE_NULL method of interface IF_WD_CONTEXT_NODE
Add Dropdown by index UI Element to table field within abap web dynpro
Add freely Programmed search help to a web dynpro application field
Retrieve SAP webDynpro field value entered by user
ABAP Web dynpro ALV report table
Hide fields of a web dynpro ALV table
Display web dynpro ALV report select options to resict output results
Assign value to ABAP web dynpro context via table, structure or individual attribute
Get selected ABAP Web dynpro dropdown byindex value (dropdownbyindex UI element)
ABAP web dynpro Dropdown by index UI Element allows a field to display a drop down list of values
ABAP web dynpro Dropdown default value, allow you to set current value of dropdown UI element
Change SAP web dynpro logon screen
Read ABAP Web dynpro table context on action / button click
ABAP Web Dynpro tables to allow users to view and change data
Get selected row of ABAP web dynpro table
Get all selected rows of table within your web dynpro for ABAP applications using GET_SELECTED_ELEMENTS
Get selected row of ABAP web dynpro table
ABAP Web Dynpro tree structure, display HR org structure as example
SAP ABAP Web Dynpro UI elements
View Container UI Element to display a web dynpro view within a wdp view
ALV ABAP Web Dynpro application
ABAP Web dynpro button click / Action
Call URL from SAP Webdynpro for ABAP ACTION
Call URL from SAP Webdynpro for ABAP ACTION
Display popup screen within ABAP Web dynpro
ABAP Web dynpro populate table on action / button click
ABAP code to Print abap web dynpro table
Adding URL parameters to you ABAP webdynpro to change thinks like the CSS