Webdynpro

Webdynpro: SAP Standard UI technology for developing web applications in ABAP Environment. Advantages: 1. Reduces implementation effort. 2.
Separation of layout and business data. 3. Reusability of components. 4. Automatic data transfer using context binding. 5. Support stateful applications. i.e. Even when the pages change the data in the previous page still remains. Webdynpro Architecture: It is based on MVC Architecture and supports: 1. Clear separation of business and display logic. 2. Metamodel Concept. 3. Execution on number of client platforms. 4. Extensive Platform Independence of interfaces. MVC Architecture: The Model View Controller (MVC) design pattern contains a clear distinction between processing control, data model and displaying the data in the interface. Model The model is used as an application object of the application data administration. It responds to information requests about its status, which usually come from the view, as well as to statements for status changes, which are usually sent by the controller. In this way, only the model is used to process data internally, without making reference to the application and its user interface. There can be different views for a model, which can be implemented using different view pages. View The view handles the graphical and textual output at the interface and therefore represents the input and output data in each interface element, such as pushbuttons, menus, dialog boxes and so on. The view takes of visualization. To visualize the status, the view queries the model, or the model informs the view about possible status changes. Controller The controller interprets and monitors the data that is input by the user using the mouse and the keyboard, causing the model or the view later to change if necessary. Input data is forwarded and changes to the model data are initiated. The controller
uses the model methods to change the internal status and then informs the view about this. This is how the controller determines reactions to the user input and controls processing.
Different controllers of Webdynpro

Uncategorized October 10, 2012 The different types of controllers in webdynpro abap are: 1. 2. 3. 4. 5. Component controller Custom controller Interface controller View Controller Window Controller
Before learning about the Controllers let us know something about different types of interfaces that are created at the time of creation of the component. These interfaces are as below. 1. IF_<ControllerName> 2. IG_<ControllerName> 3. IWCI_<ComponentName> The interface begin with the prefix IF is local and can be used for coding only within that controller. The interface begin with the prefix IG is used for cross controller communication. (E.g View controller to component controller) The interface begin with the prefix IWCI is used for cross component communication. (E.g. ComponentA to ComponentB)
Component Controller: There is only one component controller exists per webdynpro component and it is global. i.e Component controller consist of data and processing logic that is available to all the views in the component. This controller does not have any visual interface. The life time of the component controller is the life time of the component. Components of Component controller:
Properties: In the properties tab of the component controller we can declare the component usage of the other component so that the interface methods of that component can be accessed by the methods of the component controller.
Context: Context is a hierarchical form of storage of data which we will briefly study about it in the upcoming posts. And for now context is a place where you declare the data. The Nodes declared here can be mapped to any no of view and can be accessed from there hence making the data of the component controller global.
Attributes: The attributes required by the Component controller are declared in the attributes and are accessible to the methods of the component controller using the handle provided for the component controller(WD_THIS). These attributes can also be accessed from different controllers using the handle provided for the component controller(WD_COMP_CONTROLLER) in the respective controller. The attribute WD_THIS declared in any controller refers to the interface of the current controller and the attribute WD_CONTEXT declared refers to the corresponding context of the controller.
Events: Events can be created in component and custom controller.Events created in the component controller are visible only within the component which means it can only be triggered by the methods of the component controller. But it can be handled in different controllers. Thus Events are used to communicate between the controllers and enable one controller to trigger the event and handler the event in different controller. Events can also implement cross component communication provided that the interface check box is checked.
Methods: Components controller consist of number of predefined methods called hook up methods which are executed in a pre-defined manner. We will study about these hook up methods in the later posts. We can also created the methods on our own and the methods which we created can be called from any controller using the handle for the component controller(WD_COMP_CONTROLLER).
Custom Controller: Custom controllers can be additionally created in the component and there are exactly similar to the component controller in terms of functionality. This means it is visible to all the elements in the component and life time of the controller is the lifetime of the component. Any number of custom controller can be created in the component and it provides the option of structuring the datas and functions. It only make sense to create a custom controller if certain function and datas are to be associated with the specific set of views.
The first three components Properties, Context and Attributes are similarly to that of component controller and the only differ in the events and method properties. Events:
Events are created and implement in a similar way to the component controller except that they cannot implement cross component communication. It can be handled only within the component.
Methods: Unlike component controller the custom controller does not contain a no of hook up methods. We can create own methods in the custom controller and these methods can be used by any views provided that the custom controller is added to the used controller in the properties tab of the view.
Thus these two options resitrict the visibility of the custom controller to protected. Interface Controller: Interface controller is used for cross component communication. Interface controller does not contain any implementation. It it the point of contact of communication for other component to use this component. Only nodes, methods and events marked as interfaces can be used by other components. Components of interface Controller:
Properties: In the Properties tab you will be able to see the administration data and Interface that was created for the external communication(IWCI).
Context: In the context tab you will be able to see the context nodes of the component controller which is marked as interface node in the node properties of the component controller.
Events: In the events tab you will be able to see the events which are marked as interface events for cross component implementation.
Methods: In the methods tab, you will be able to see the interface methods that can be accessed by the other components.
View Controller: Each view exactly consist of one view controller. No of view controllers in a component depends upon the no of views. The view controller cares about the view specific flow logic like checking user input, handling user actions etc. The lifetime of the view controller is restricted to the life time of the view. Components of view Controller:
Properties: The properties tab of the view controller consist of the admin data as well as the option to add the used controllers for the view.
In this example I have added the custom controller of the same component as the used component so that the methods of the custom controllers can be accessed in this view. Layout: Layout tab of the view controller provides the option for placing the UI element. It is WYSIWYG type of editor. (What You See Is What You Get).
Inbound Plugs: Plugs are required for the navigation between the views. Inbound plugs consist plugs which is pointing into the view. Unlike outbound plug the inbound plug consist of event handler method which will be executed before displaying the view.
Outbound Plug: Inbound plugs consist plugs which is pointing away from the view. This does not contain any event handler method and the outbound plug can be fired using following syntax. WD_THIS->FIRE_<Plugname>_PLG.
Context: Context as mention earlier is a hierarchical form of data storage and the context node declared in the view can be used only in that corresponding view and it cannot be accessed in any other views. The node created in the view context does not provide the option for interface node.
Attributes: Attributes is similar to that of the attribute tab discussed in the component controller. Here in the view controller you will be able to see the handler to the component controller with reference to the interface of the type IG_(Cross controller). Using this handler the attributes and methods of the component controller can be accessed.
Actions: Actions tab consist of the on action events created for the UI elements.
Methods: In the methods tab you will be able to see the set of hook methods specific to the view controller and event handler methods created for the UI element actions and own defined methods.
Window Controller: Each window in a webdynpro component consist of a window controller. It is visible throughout the component and behaves like component or custom controller. Components of window controller:
Properties: Properties tab of the window controller is similar to that of the view controller.
Window: In the window tab we will be able to see the views that are embedded in the window, inbound and outbound plug of each view and the view that is marked as default. Here we can also specify the navigation link between the views using the view plugs.
Inbound Plug: The properties of a windows inbound plug differ from a views inbound plugs by the characteristics Interface and Start up or Resume that can be maintained: Interface: The interface check box determines whether the inbound plug is used only for navigation within the component or cross component navigation. Startup: If the plug type is selected as start up then webdynpro application can be started using this plug. When creating an webdynpro application only the interface view inbound plug can be used. All other type of plugs can only be used for navigation in an already running application. Window inbound plug also has the event handler method. The Plug type suspend and resume are used for portal navigation and will be discussed in later posts.
Outbound plug: Outbound plugs consist of interfaces, Exit and Suspend characteristics.
Context attributes and methods tab are similar to that of the view controller except that the method of the window controller has different set of Hook methods. Note : At run time all the controller instances are singleton.
Context in Webdynpro ABAP

Uncategorized October 30, 2012 Leave a comment
Context is a method of storing a data in a hierarchical manner. The data used by the component or a view are stored in the form of context. We can read or write data in the context using the controller as a starting point.
Structure of a Context node: If you look at the context tab of any controller you will be able to see a thing called
context. It is actually a singleton root node under which we will be declaring our
nodes and attributes. Each context has a node and a number of attributes underneath a node. The attribute declared directly will be coming under the root context node CONTEXT.
Each node consists of data can be one of the two ways: 1. A individual instance 2. Table of Instance We will discuss it when we come to the topic properties of the context node. Recursion Node:
Dynamic nesting of node is also possible within the context called recursion node.
1. The node which is used for recursion should always be a predecessor of new node. Here in the above given example the node2 is the recursion node and the node1 is the predecessor node. 2. The recursion node cannot be processed separately. 3. You cannot use the root node CONTEXT as a predecessor node. How to access the data in the context? By default all the nodes which we are declaring will be the child node of the root node CONTEXT. The reference to this root context is available in the Attributes tab of the Controller.
The interface consist of number of methods that will help us play with the context. All the context node we declare will become a child node of the root node CONTEXT. Using the object reference of the root context node calling the get_child_node method of the interface will give the object reference of the context node specified. Once we got the control of the context using its object reference we can push or pull the data from that context.
A Simple webdynpro Application
Basic June 1, 2012 Part 1: Creating a component. Step 1: Go to tcode SE80. In the repository browser choose the Webdynpro comp/intf and provide the component name and press enter.
Save it in a package or assign the component to the local object. Step 2: Go to the component controller and create a context node and a context attributes. Right click on the root context node and choose create->node as shown below.
Enter the node name and press enter.
Create an attribute for the node as shown below.
Provide the attribute name and data type and then press enter.
After creating your screen will appear like below.
Step 3: Go to the view controller and map the context node of the component controller to the context of view controller so that the node in component controller can be accessed in the view controller. Double click on the view and click on the context tab.
You will see the nodes of the component controller in the right hand side. Select the context node and drag and drop it in the context of the view controller.
Drag and drop the context node NODE to the context of the view controller.
Step 4: Go to the layout tab of the view controller to place the UI elements.
Right click on the root UI container and select insert element to insert a UI element.
Insert a label UI element.
The properties with red shadow are the mandatory properties to be filled.
Provide a text for the label and you can see it on the layout.
Label for property refers to which UI element we have created this label. As of now we dont have any other UI elements created. Now let us create a UI element Input field and assign this label to the input field. In a similar way create an input UI element.
While the obligatory bindings for the UI elements are missing you can see them grayed out.
Property value is an obligatory binding for the input UI element and it has to be binded to the context attribute. So that what ever the value entered in the Input field will get binded to that particular context attribute. To bind it to the context attribute click on the binding button.
Select the attribute which you want to bind and double click on it. And now you can see the input field highlighted.
Double click on the lable UI element and in the property Label for assign this input field to the lable property.
From the drop down select the input field. Now you can see the label UI element also gets highlighted.
Now save and activate the whole application.
Part 2: Creating a webdynpro Application. To create a webdynpro application, Right click on the component -> create-> webdynpro application.
Enter the description for the webdynpro application. It will appear on the browser tab.
Save the application.
Test the application.
OUTPUT
Reading the user input and setting the output

Uncategorized July 7, 2012
Rate This Post
In the previous post we have seen how to create a simple webdynpro component. We have created a webdynpro component with a label and input field and we displayed it in the browser. In this post we will see how to read the input entered in the browser and display the same in the output. Scenario: we will create a button and on the click of that button we will read the values entered and display the output in a text view. Step 1: In the view controller v_main of the component zcsk_simple which we created earlier, create a UI element Button. Right click on the ROOTUIELEMENT Container and select insert element. Enter the ID and choose the Button UI element.
You can see the button UI element in the Layout with no description.
Enter the description in the text property of the Button UI element.
Once you have entered the properties, it will reflect in the UI element.
Still the UI element looks disabled. The button UI element requires an event handler method to perform an action on click of the button. To create an event to the Button do the following. Click on create action button. Enter a name for the action and press enter.
In the properties you will be able to see the method.
We now require an attribute to be binded to the textview. Create an attribute output of type string as shown below. Go to the context tab of the component controller and create an attribute in the node which we created in the previous application.
Go to the context of the view controller and Update the mapping so that the attribute which we added newly in the component controller will be reflected here in the view controller and accessible here.
Right click on the context node and update the mapping.
System will prompt you to match the node. Select Yes.
System will again prompt you to copy the attributes. Press yes.
Now we can see the attributes reflected in the view controller.
In the layout of the view controller insert a textview UI element.
Bind the text property of the text view UI element to the attribute output.
To arrange the layout double click on the rootuielementcontainer and change the property of layout to matrix layout.
Choose the text view UI element and change its layout property to Matrixheaddata so that the UI element will be displayed in the next row.
Now write the logic which is to be done on the click of submit button. Write the following code in the event we declared for the submit button.
Use the code wizard icon to generate the code. First read the input entered in the screen using the code wizard. The Input field has been binded to the attribute ATTRIBUTE and whatever the input has been entered by the user will be in that attribute. To know what user has entered we need to read that attribute. Click on the code wizard icon, choose the context operation as read and select the context attribute using the F4 help.
Press enter to generate the code.
Code will be generated as below.
Whatever the values entered by the user will now be in the attribute LV_ATTRIBUTE. Now let us set this value to the text view to be displayed in the output. Using the code wizard, choose the context operation as set and set the attribute OUTPUT.
Codes will be generated as below.
Remove the unwanted codes, Since we are performing action on the attributes belonging to the same context node few object will be declared again remove those attributes. Before the set attribute method pass the input values read in the variable lv_attribute to the variable lv_output which is going to be set.
Final coding to be in the method submit. method ONACTIONONSUBMIT . * Read the context attribute DATA LO_ND_NODE TYPE REF TO IF_WD_CONTEXT_NODE. DATA LO_EL_NODE TYPE REF TO IF_WD_CONTEXT_ELEMENT. DATA LS_NODE TYPE WD_THIS->ELEMENT_NODE. DATA LV_ATTRIBUTE TYPE WD_THIS->ELEMENT_NODE-ATTRIBUTE. LO_ND_NODE = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_NODE ).
LO_EL_NODE = LO_ND_NODE->GET_ELEMENT( ). LO_EL_NODE->GET_ATTRIBUTE( EXPORTING NAME = ÀTTRIBUTE` IMPORTING VALUE = LV_ATTRIBUTE ). * Set the attribute DATA LV_OUTPUT TYPE WD_THIS->ELEMENT_NODE-OUTPUT. lv_output = lv_Attribute. LO_EL_NODE->SET_ATTRIBUTE( NAME = ÒUTPUT` VALUE = LV_OUTPUT ). endmethod. Save and activate the component. Test the application.
Enter the name and click on submit.
You can see the entered name in the text view, we placed.
Navigation between views.

Rate This Post Navigation between different views is enabled by plugs. These can be divided into inbound and outbound plugs. Several views can be embedded to an window but is necessary that we should only display one view in a window at a time. The view which is assigned as a default view will be displayed every time when the window is initialized. To move between the views embedded to the window we need to create a navigation link for which the inbound and outbound plugs are necessary. To navigate from one view to another, each outbound plug from the first view must be linked with an inbound plug of the second view with the help of a navigation link.
Inbound Plug: The inbound plug defines the start point of the view. It handles the incoming from the other view into its view. An event handler method will be created at the time of creation of inbound plug in which we can handle the incoming to the view. When the
inbound plug of this view is called by the outbound plug of the another view this event handler method gets triggerd first. Outbound Plug: Outbound plug is used to call its subsequent views. Whenever a outbound plug is triggered it call the inbound plug of the other view to which the navigation link is created for. In the previous example Read the input and setting the output we have see how to read the data enter by the user and set it in the output. There we have read the input and set the output in the same view. Here in this scenario we will read the input entered by the user in the first screen and set the output in the second screen so that we will learn how to navigate between views. Step 1 : Go to the tcode SE80 and create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the component controller, create a node with an attribtue in it. Note : The nodes created in the component controller is public and is accessible throughout all the view.
Enter the name for the node and choose the cardinality as 1..1 and press enter.
Enter the attribute name, choose a type and press enter.
Step 3 : Go to the Context tab of the view controller and drag and drop the node created in the component controller into context of the view controller so that the node can be accesible in our view.
After drag and dropping the context node the view context will look like.
Step 4 : Go to the layout of the view controller and insert a lable UI element as shown below.
Provide the ID and type of UI element.
In the property of the lable UI element Provide the text for the label and leave the label for property as it is. We will fill it after creating a corresponing input UI element for it.
Step 5 : In a similar way insert a input field UI element.
Bind the obligatory property of the UI element value to the context attribute name.
Set the label for property of the lable UI element to our Input field.
Step 6 : Insert a button UI element and create an event handler method for it.
Create an event handler for the UI element.
In the outbound plug box if we provide the outbound plug the codings to navigate to the view that the outbound plug points will be generated inside our event handler method. As of now we havent created any outbound plug. We will call it later in the program using code wizard. Step 7 : Create a another view in the component as shown below.
Enter the name for the view and press enter.
Step 8: In the context tab of the second view drag and drop the node of the component controller to the context of our view.
In the layout tab of the second view, insert a lable and a text view UI element and bind it to the attribute name.
Properties of the lable.
Lets assign the lable for property to the text view after creating the text view. Insert the text view UI element.
Bind the text property of the text view to the attribute name.
Assign the label for property to the text view.
So far we have created two views with an option to enter a name in the first view and display it in the second view. The data will be transferred from one view to another using the node of the component controller. Once we read the input entered by the user and set it in the node, the result will be displayed where ever it is binded. So when we read the name and set it in the attribute name it will be displayed wherever our attribute name is binded. Note : Read Binding concept for more clarity on this. Now the point is we have to navigate from one screen to another. By default the view which we created at the timeof creation of the component will be the default view in the window and it will be displayed now all we have to do is to shift the view within the windows. Step 9: Create the inbound plugs an outbound plug for the views. Go to the inbound plug tab of the view v_main and create an inbound plug. By the time of creation of inbound plug, an associated event handler method will be created.
Similarly create an outbound plug to navigate from the first view to the second view.
Similarly create an inbound plug and outbound plug for the second view.
In outbound plug tab of the second view create an outbound plug.
Step 10: Go to the Window controller and you will be able to see only the view v_main which was create at the time of creation of component will be there.
Now embed the second view which we created in our window and create a navigation link between views.
Choose the view to be embedded as our second view from the popup.
You will now be able to see both the views under our window.
Right click on the outbound plug to create the navigation link.
Select create navigation link and choose the destination view using F4 help an press enter.
Now you will see the navigation link is formed between the views indicated by a chain symbol. Now when ever the outbound plug out_main is triggered the system will navigate from the first view to the second view. Similarly create the path from second view to the first view.
Create a navigation link from second view to the first view.
Choose the first view as destination.
Now navigation link from the second view to the first view is created.
Step 11: Now let us write the logic to read the input entered by the user and set it in the context node. In the event handler method of the button UI element in the first view write the logic to read the input and set the context node.
The Input field is binded to the context attribute name so Reading the context node attribute will give the value entered by the user. Using the code wizard read the context node attribute name.
Note : I have removed the unwanted and dead codes. Now set the value to the same attribute name.
Code will be generated by the code wizard. after deleting already declared attributes and removing unwanted I have kept the remaining.
When click on the submit button we have to navigate from the first we to second view. So let us trigger the outbound plug of the first view to navigate to the second view. In the code wizard general tab, choose the radio button start navigation and select the outbound plug using f4 help.
Now the code in the event handler for the button will be.
Step 12: In order to navigate back from the second view to the first view create a button back in the second view.
Create an event handler method for the button UI element.
If you provide the outbound plug at the time of creation of event then the coding for the navigation will also be created inside that event handler method.
Step 13: Save and activate the whole component.
Step 14 : Create an application and test the component.
Output:
Enter the name and press submit.
Passing data between the views using plugs

Rate This Post
To navigate from one view to another view we use plugs. The datas available in the view are local to the controller and there may be a scenario where you want data from one view to another to be processed. One way of doing this is to bind the data in the context node of component controller before you leave the view and read the data from the another view in the event handler method for the inbound plug or where ever necessary. Instead we can also pass the data using the parameters of the plug.
Scenario: In this scenario we will discuss how to pass the values between the views using plugs. Let us create an input field in the first view and whatever the value is entered in the first view will be transported using plugs and displayed in the second view in the form of text view. Step 1: Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2: Go to the context tab of the view controller and create a context attribute as shown below.
Enter the name and type for the attribute and press enter.
Step 3: Go to the layout tab of the view controller and create a label and input field as shown below. Right click on the root container UI element and select insert UI element.
Provide the ID and type for the UI element and press enter.
In a similar way insert a input field UI element.
Bind the obligatory binding property value of the input field to the context attribute created.
Create an action on enter for the input field UI element.
Now go back to the label UI element and change the property of the label UI element as shown below.
Step 4: Right click on the view controller and create a view.
Enter the name and description for the view and press enter.
Go to the context tab of the view created and create a context attribute as shown below.
Go to the layout tab of the view controller and create a text view UI element and bind the attribute to it.
Bind the property of text view to the attribute created.
Insert a button UI element and create an action for the button UI element.
Create an action for the button UI element.
Step 5: Go to the first view and create the inbound plug and outbound plugs as shown below.
Create an outbound plug with an parameter for passing the data from this view.
Similarly go to the second view and create the inbound and outbound plugs.
Step 6: Go to the window controller and embed the second view in the window and create a navigation links between the views.
Choose the view to be embedded as second view and press enter.
Create a navigation link between the first view and second view.
Create a navigation link between the second view and first view.
Step 7: Go to the First view and in the action created for the input field UI element do the following. Read the value entered in the input field using the context attribute.
Coding will be generated as below.
Generate the coding for navigation from the first view to second view using the outbound plug of the first view as shown below.
Pass the value to the parameter of the outbound plug.
Code: DATA lo_el_context TYPE REF TO if_wd_context_element. DATA ls_context TYPE wd_this->Element_context. DATA lv_name TYPE wd_this->Element_context-name. lo_el_context = wd_context->get_element( ). lo_el_context->get_attribute( EXPORTING name = `NAME` IMPORTING value = lv_name ). wd_this->fire_to_second_plg( name = lv_name ). string
Step 8: Go to the second view and in the event handler method created for the inbound plug do the following. Create an importing parameter with the name passed in the outbound plug of first view.
Now the importing parameter will hold the value passed from the view one and set it in the attribute created in the second view to be displayed in the text view UI element.
Note: I have removed the unwanted codes.
Change the coding as below:
Code in this method: DATA lo_el_context TYPE REF TO if_wd_context_element. DATA ls_context TYPE wd_this->Element_context. DATA lv_disp_name TYPE wd_this->Element_context-disp_name. lo_el_context = wd_context->get_element( ). CONCATENATE The name entered is: name into lv_disp_name SEPARATE D BY space. lo_el_context->set_attribute( name = `DISP_NAME` value = lv_disp_name ). In the event handler method created for the back button do the following to generate a code for navigation from second view to first view.
Save and activate the whole component. Step 9: Create the application for the component and press enter.
Output:
Enter the name and press enter.
Press back button to navigate back to the first view.
Message Handling
Rate This Post In the previous application we saw how to navigate from one view to the another. In this blog we will see how to handle the message. In the previous application user enters the name in the first screen and submit the name will be displayed in the second screen. Now let us make the name input as mandatory and if name is not enter we will block the navigation to the second view and throw an error message. In order to display the error message in our required space we need to insert the messagearea ui element. In case if this UI element is not place message will be displayed by default on the top of the page. Now lets move to the application. In order to make the input field as mandatory, change the state of the Input field UI element as required from normal. You will be able to see a red star indicating the field
as mandatory in its associated label. However the mandatory fields are not checked for emptiness by default in SAP webdynpro like in normal abap. We have to incorporate the logic in our method to check for the emptiness of the fields. There are also some standard class which is used to check the mandatory fields in the screen which you will see in the later blogs. Step1 : Go to the view and change the property of the input field.
Step 2: Insert a message area UI element.
Step 3 : In the event handler method for the submit button check for the emptiness of the input field and throw an error message. Modify the code as below.
In the else part generate the error message using the message manager in the code wizard. Select the radio button generate message and choose a method report_error_message from the F4.
Note: I have removed the dead codes and comments, Pass the error message you want to display using the parameter message_text.
Save and activate the application. Test the component.
Output :
Enter Submit without entering name.
You can see the error messge generated where we have placed the message area. Remove the message area UI element and test the application the error message by default will be displayed on the top.
Generating a Pop-up
Uncategorized October 5, 2012
Rate This Post
In this post we will study how to generated a pop-up in the screen. Scenario : We will place a button on the screen and on clicking we will display the pop-up.
Step 1: Go to the object navigator (SE80) and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2: In the layout of the view controller, create a UI element for button as shown below. Right click on the Root UI element container and click on insert element to insert the UI element.
Enter the ID and Type for the UI element as shown below.
Set the text property of the Button UI element as shown below.
Create an event handler method for the button UI element which is to be triggered when clicking on the button.
Step 3: Right click on the view and click on create view to create a view for the popup.
In the layout of the view created place a text view ui element and provide the text for it so that it can be viewed in the pop up.
Step 4: In the window controller, Create a window and embed the view for the Pop Up in it.
Embed the pop up view to the pop up window as shown below.
Choose the view to be embedded and press enter.
Activate the whole webdynpro component. Step 5: In the event handler method created for the button do the following to call the pop up window.
Using code wizard declare the code for the Pop up window. Code will be generated as below. data lo_window_manager type ref to if_wd_window_manager. data lo_api_component type ref to if_wd_component. data lo_window type ref to if_wd_window.
lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). lo_window = lo_window_manager->create_window( window_name = W_POP * title = * close_in_any_case = abap_true message_display_mode = if_wd_window=>co_msg_display_mode_selected * close_button = abap_true button_kind = if_wd_window=>co_buttons_ok message_type = if_wd_window=>co_msg_type_none default_button = if_wd_window=>co_button_ok ). lo_window->open( ).
Save and activate the whole application. Step 6: Right click on the component and create a webdynpro application.
Test the application. Output:
Thus we have now generated and displayed a pop up.
Calling an Web URL

Rate This Post
In this post we will study how to call an web URL from an webdynpro component. In this scenario we will place the button UI element And on the click of the button UI element we will call the google home page. Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to a package or save it in the local object. Step 2: In the layout tab of the view controller, create a button UI element as shown below. Right click on the Root container UI element and select insert UI element.
Provide the ID and Type for the UI element and press enter.
Enter the text property of the Button UI element as Google and create the action for the button UI element.
Step 3: In the event handler method for the Button UI element do the following to call the URL. Generate the code using the code wizard.
Instead of calling the method create_window call the method create_external_window to call the external URL. Step 4: Using pattern call the create external window of the interface if_wd_window_manager.
Codings will be generated as below.
Replace the object reference me with the object reference for the window manager(lo_window_manager) and provide the URL exporting parameter.
Save and activate the whole component and create the application to test the component. Step 5: Create the application as shown below.
Test the application. Codings in the method for Button UI element. DATA lo_window_manager TYPE REF TO if_wd_window_manager. DATA lo_api_component TYPE REF TO if_wd_component. DATA lo_window TYPE REF TO if_wd_window.
lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). CALL METHOD lo_window_manager->create_external_window EXPORTING url = http://www.google.com’ modal = ABAP_FALSE has_menubar = ABAP_TRUE is_resizable = ABAP_TRUE has_scrollbars = ABAP_TRUE has_statusbar = ABAP_TRUE has_toolbar = ABAP_TRUE has_location = ABAP_TRUE receiving window = lo_window . lo_window->open( ). Output:
Click on the URL button. Enusre that the pop up is not blocked in the browser. Google page will be opened in new tab.
Calling one webdynpro application from another
Rate This Post
In the previous post we have seen how to call an Web URL. In this post we will study how to call an one webdynpro application from another. The procedure is same as the before, by providing the link of the webdynpro component to the create external window method The webdynpro application will be called. There is a method in a class cl_wd_utilities which will generated the url of the webdynpro Component. We will proceed with the same application. In the event handler method for the button ui element call the method construct_wd_url of the class cl_wd_utilities to get the URL of the Webdynpro component. Using pattern call the method of the class Cl_wd_utitlites as shown below.
Pass the webdynpro application name and receive the url using the importing parameter out_absolute_url.
Codings in the method: DATA lo_window_manager TYPE REF TO if_wd_window_manager. DATA lo_api_component TYPE REF TO if_wd_component. DATA lo_window TYPE REF TO if_wd_window. lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). data : lv_str type string. CALL METHOD cl_wd_utilities=>construct_wd_url EXPORTING application_name = ZCSK_POP IMPORTING out_absolute_url = lv_str . CALL METHOD lo_window_manager->create_external_window EXPORTING url = lv_str modal = ABAP_FALSE has_menubar = ABAP_TRUE is_resizable = ABAP_TRUE has_scrollbars = ABAP_TRUE has_statusbar = ABAP_TRUE has_toolbar = ABAP_TRUE has_location = ABAP_TRUE receiving
window = lo_window . lo_window->open( ). Now test the application. Output:
Dynamically hiding the UI element

Rate This Post
In this post we will see how to hide or display the UI element dynamically. Let us consider a scenario where we have an check box. On selection of the Check box an UI element text view has to be displayed and when deselecting the check box the text view has to be hidden. Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2: In the context tab of the view controller create the one context attribute of type wdy_boolean as shown below to be binded to the check box ui element to determine the checked property of the check box.
Provide the name and type for the attribute.
Step 3: Go the layout tab of the view controller and insert a check box UI element.
Provide the ID and type for the UI element.
Bind the Checked attribute to the checked property of the checkbox UI element.
Insert the text view UI element.
Enter the text property of the text view UI element.
Save and activate the whole component and test the application. Step 4: Create a application for the component.
Now let us see how to dynamically hide the text view UI element and display it. Step 5: Go the context tab of the view controller and create a context attribute to set the visibility of UI element. Choose the attribute type as WDUI_VISIBILITY If value = 01 UI element not visible If value = 02 UI element is visible
Bind the visibility attribute to the visible property of the text view UI element.
Step 6: Go to the layout tab of the view controller and create an action for the check box UI element.
In the event handler method for the check box do the following. Read the checked property of the check box. Using code wizard read the attribute checked to know the checked property of the check box.
Note : I have removed the unwanted codings. Now the variable lv_checked will contain the checked property of the check box. If the variable values is X then the check box is selected if it is space Then the check box is not selected based on it set the visibility property as shown below.
Save and activate the whole component and test the application. Output:
Since we havent provided the default value, the visibility attribute values is taken as 01 (Invisible). Now select the check box and see for the changes in the output.

Rate This Post
In this post we will see how to hide or display the UI element dynamically. Let us consider a scenario where we have an check box. On selection of the Check box an UI element text view has to be displayed and when deselecting the check box the text view has to be hidden.
Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Adding an Image UI element

Rate This Post
Assign the component to the package or save it in the local object. Step 2: Import the image into the component as shown below.
Choose the image to be uploaded from the pop up.
Provide the name and description for the image.
Step 3: Go to the layout of the view controller and insert an image UI element.
Provide the id and type for the UI element.
Add the component image to the source property of the image UI element.Choose the image using the F4 help and component images tab.
Image UI element will be added as shown below. You will also be able to see a mime folder added to the component which contains the image.
Save and activate the whole component. Step 4: Create an application to test the component.
Output:
Radio Button
Rate This Post Radio Button UI element is a Button that has two states on and off which enable the users to select option. This type of radio button UI element places the individual radio buttons on the screen like
We can also place n no of radio buttons and toggle between them if all the radio buttons are binded to the same context attributes.
How radio Button works? The radio button UI element has two key properties. 1. Key to select 2. Selected Key The radio button gets selected when the value in the key to select is same as the value in the selected key. Both property Selected key and Key to select is bindable to the attribute of type string. Whenever we are placing the individual radio button UI element on the screen we need to handle the toggle using a single method for each radio button. The key to select attribute is fixed and Whenever the radio button is selected the system will return the value to the selected key property whatever is there in the key to select. Say if the key to select value is X and when I select the radio button1 the attribute binded to the selected key property also will hold X. Now let us see a simple example on how to use the radio button UI element. In this scenario I am going to place the two individual radio buttons and create an individual method for each radio button to toggle it. To know which radio button is selected I am going to read the context and display which radio button is selected in a text view. Step 1 : Go to the Tcode SE11 and create a webdynpro component. Enter the description and press enter.
Assign the component to a package or save it in a local object. Step 2 : In the context tab of the view controller, create a context node with the three attributes. Since I am going to created two radio button , I ll be needing an two attribute to bind the selected key property one for each and a common key to select attribute. Create a context node RADIO with three attribute key to select, radio1 and radio2 of type string. Right click on the context node and choose create -> node.
Provide the node name the pop up and press enter.
Node will be created as below.
Right click on the node Radio and select create ->attribute to add the attributes.
Enter the name and type of the attributes and press enter.
Attribute for the node will be created as below.
In a similar way create two more attributes radio1 and radio2 of type string.
Step 3 : Go the layout tab of the view controller. Right click on the rootcontainerui element and select insert element to insert the ui element of your choice.
Provide the id for the UI element and choose a type and press enter.
Bind the obligatory binding of the radio button ui element to the radio1 attribute.
In a similar way bind the key to select property to the key to select attribute.
Provide text for the radio button.
Create an event handler method for this radio button as shown below.
In a similar way create an another radio button and bind the radio2 attribute to the selected key property and key_to_select to the key to select property and create an event handler method to it.
Step 4 : Initialization of the radio button. Rememeber the radio button gets selected when the selected key and key to select values are same. Take an example if
Key to select = X Radio 1 Radio 2 = X (Selected Key property of radio button 1) = (Selected Key property of radio button 2)
Then the radio button one will be selected as the key to select property and selected key value binded to the radio button are same where as it differs for the radio button two. Now I am going to set the radio button 1 as selected in the do init method. In the WDDOINIT method do the following. Set the context node radio using the code wizard . Select the node radio and choose the radio option set and press enter.
Modify the code generated by the system as below.
In the event handler for the radio button 1 write the following code.
In the event handler for the radio button 2 do the following to set the radio button2 as selected.
So far, we have created methods to handle the toggling of radio button. Now let us create a button and a text view UI element. On selection of the button we will read and display which radio button is selected in the the text view. Step 5 : Create a button UI element in the view layout.
The property of the Button UI element is as below.
Provide the text for the button UI element and create an event handler method for the button. Step 6 : Create a context attribute to be binded to the textview UI element of type string.
Create a text view UI element and bind the attribute text to the text property of the text view.
Bind the property text of the text view to the attribute text.
Step 7 : In the event handler for the button do the following. Read the context node radio from which you ll come to know which radio button I selected with the flag X and set the text view accordingly for the radio button selected. Read the context node radio.
Code will be generated as below. Note : I have removed the dead and unwanted codes.
Set the text view according to the radio button selected.
Code will be generated as below. From the system generated code modify the code as below.
Step 8: Save and activate the whole component. Create an application for the component to test the component. Activating the component
Create an application for the component.
Output :
Click on read value.
Select the radio button 2 and click read value.
Note : Refer to the standard component WDR_TEST_UI_ELEMENT.
Radio Button Group By Key

Rate This Post The RadioButtonGroupByKey UI element groups the individual radio button UI elements in table form, and only one radio button can be selected within the UI element group.
Unlike radio button the radio Button group by Key has only the selected key property. The Radio button group by key gets the list of values from the attributed binded to the selected key property. The attribute must be of some data element with fixed range values. Radio button group by key displays the option for the fixed range values. Say for example if i bind the attribute of type BSYTP then the radio button displays all the fixed values assigned to it domain.
Domain fixed values for the data element BSTYP.
Scenario : Let us create a radio button group by key UI element, and bind it to the fixed range values of the BSTYP. Then read and display the values in the radio button.
Step 1 : Go to the Tcode SE11 and create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the view controller create a context node as shown below.
Context node will be created as shown below.
Create an attribute for the context node of type BSTYP.
Enter the attribute name and type and press Enter.
Step 3 : In the layout tab of the view controller, Insert a radio button Group by key UI element as shown below.
Bind the obligatory binding selected key of the radio button to the attribute key.
The list of radio button will contains all the fixed values in the domain.
Step 4 : Insert a Button UI element and create a event handler method for that Button.
Set the property Text of the button ui element and create an event handler method for it as shown below.
Step 5 : Create a context attribute text of type string to be binded to the text view UI element.
Insert a text view UI element and bind the text property of the text view UI element to the attribute text which we created.
Step 6 : In the event handler method for the read value button, write the code to read the radio button selected and set the text attribute accordingly. To know which radio button is selected the read the attribute which is binded to the selected key property of the radio button. The system will provide the value of which radio button is selected in that attribute. Using code wizard read the key attribute which is binded to the radio button and press enter.
System will genreate the code as below. Note : I have removed the unwanted and dead codes.
The attribute lv_key will now contain the value of the radio button selected. Set the context attribute text according to the radio button selected.
Modify the code as below to set the text according to the radio button selected.
Step 7 : Activate the whole component.
Output :
Select a radio button and click on read value.
Radio Button Group By Index

Rate This Post Step 1: Create a webdynpro component as shown below. Enter the component name and press enter. Assign the component to a package.
Step 2: In the Context node of the view controller, create a context node RADIO of cardinality 0..n and attributes to it as shown below.
Create an attribute for the node RADIO.
Step 3 : Go to the layout of the view controller and place the UI element Radio button group by index.
Bind the texts property of the radio button to our attribute.
Step 4: Now go to the WDDOINIT method to initialize the value for the radio buttons. Let us assume we are gonna provide colors red, blue and green as a option for the radio button.
Just set the context node along with your values to it.
Read the context node using code wizard. Select the icon and choose the context node. Select the radio button set and click the check box as table operation to set the node as a table.
Now create a work area for the internal table generated by the code wizard. Hard code the values to the work area and append the values to the internal table.
Save and activate your whole component. Step 5: Create an application to test your component.
Test your application.
Output:
So far we have only seen to set the radio buttons on the screen. Now let us see the action associated with the radio button on dynamically changing the buttons on the screen. Step 6: Create a context attribute text of type string as shown below in the view controller.
Step 7: Go to the layout of the view controller and inset a UI element Label.
In the property of the lable UI element fill in the obligatory parameters marked with red.
Bind the lable for property to the text view which we are going to create now. Step 8: Create a UI element text view.
Bind the property of the text view TEXT to the attribute text which we created earlier.
Assign the text view as the lable for property of the label. Step 9 : In the properties of the Radio button UI element create an action.
Double click on the action On toggle and write the following codings.
Read the context node using the code wizard. (Note : Not as table operation ) . Code will be generated as below.
Declare an attribute for index and get the radio button selected using the method get_lead_selection_index. Now we have got the index number of which is being selected. To identify the value which is selected read the context node as a table operation and read the selected value using the index which we obtained. Delete already declared variables from the code.
Now the internal table contains all the records from which we can choose the selected one using Read statement with the index.
Then Get the value of which radio button is selected and set the attribute text to indicate which radio button has been selected. Using code wizard set the attribute text as shown below.
click here to download this document.
Check Box
Rate This Post
With a check box UI element we can implement a single on or off switch. The check mark in the box indicates the option is selected and the value is true.
The Check Box UI element has an obligatory binding property checked which is to be binded to an attribute of type WDY_BOOLEAN. By default the value of the check box UI element is set as False which means the UI element will not have check mark. However this property can be changed by initialzing the value in the doinit method and display the check box with check mark at the time of display. Now let us take an simple example on how to display a check box with switch on and switch off option. Let us create an check box ui element on selection of check box we will display the text activated in the in the text view and deactivation on removing the tick in check box. Step 1 : Go to the tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the view controller, create two context attribute. One context attribute of type wdy_boolean to be binded to the check box UI element and other of type string to be binded to the text property of the check box UI element.
Attribute for the Checked property check box UI element.
Attribute for the Text property of the UI element.
Context node will look like.
Step 3 : Go to the layout of the view container and insert a check box UI element.
Provide the ID and type in the Popup and press enter.
Bind the obligatory binding on the check box to the attribute checkbox as shown below.
Bind the attribute textview to the text property of the check box UI element.
Create an event handler method ontoggle to handle the event on selection of the check box.
Properties of the check box UI element.
Step 4 : In the event handler method for the check box ontoggle write the code to handle the occurrence on selection of check box. Set the text property of the check box as activated in case of the check box is selected and deactivated in case of the check box is not selected. To know whether the check box is selected or not read the attribute binded to the checked property of the check box. The attribute will return the value X (True) in case of the check box is selected and (False) in case of check box is not selected.
Using code wizard Read the attribute checkbox to know whether the check box is selected or not.
The code will be generated as below. Note : I have removed the commented lines and dead codes
The variable lv_checkbox will now contains the value x or space according to the selection. Based on this set the attribute textview.
The code will be generated as below by the code wizard.
I have removed the variables that have been declared already and the commented lines and kept the remaining.
Modify the code in the event handler method on toggle as shown below.
Note : This method will be triggered only when the check box is selected then only the text view will be set. If you want the text view to hold activated or deactivated by the time of appearance on the screen then you have to set the attribute accordingly in the doinit method. Step 5 : Save and activate the whole component.
Step 6 : Create an application for the component and test the application.
Output:
Select the check box.
Remove the tick then the output is
Check Box Group

Rate This Post
The CheckBoxGroup allows users to select an element from a set of predefined options using the checkbox. The UI element CheckBoxGroup arranges the individual Check box in single-column or two-column tables.
The property text of the check box group UI element is binded to the attribute of a context node having an cardinality 0..n. The no of checkbox created in the screen depend upon the number of elements in the context node binded. Suppose if you are binding internal table having 5 records to the context node then 5 check boxes will be created in the screen. Now let us take an example where I will create a check box group UI element and display the selected checkbox in a text view. Step 1 : Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the view controller, create a context node of cardinality 0..n as shown below.
Enter the node name, choose the cardinality as 0..n and press enter.
Add attribute to the context node as shown below.
Add the attribute name,choose a type and press enter.
Context node will be created as below.
Step 3 : Go to the layout tab of the view controller and insert a checkbox group UI element.
Provide the ID and choose the UI element type. Press Enter.
Bind the text property of the check box UI element to the attribute value of context node checkbox.
Step 4 : Insert a button UI element and create an event handler method for the Button UI element.
Create an event handler method for the Button UI element.
Step 5 : Create an context attribute text of type string to be binded to the text view UI element.
Context node will look like.
Step 6: In the layout tab insert a text view UI element.
Bind the text property of the text view UI element to the attribute text.
Step 6: Initialize the text for the checkbox in the DOINIT method.
Step 7 : Do the following in the event handler method for the button. First we need to know what are check boxes are ticked in the screen. To do that get the object reference of the context node and call the method GET_SELECTED_ELEMENTS using the object reference. This method will return the object reference for all the elements(Rows of internal table we binded) which are selected. Then Using this objected reference the data in the row can be accessed. Concatenate all the elements which are selected and bind it to the text view UI element. Write the code as below in the eventhandler method onread.
Step 8 : Save and activate the whole component.
Output :
Select the check boxes and click on read value.
The drop down by Key UI element provides the list of values from the domain fixed values. The cardinality is 1..1 and type of the attribute to which the UI element is binded must have fixed domain values.
In the above screen I have binded the drop down by key UI element to the attribute of type BSTYP and the drop down UI element lists all the fixed domain values of the BSTYP. Note : With the drop down by key UI element we can only have only fixed domain values and if we need some more option we need to include it in the dictionary domain level only.
If the drop down by Key UI element is binded to a cell editor of a table UI element the drop down can have only fixed values for all the row item where as the drop down list can be different for each row in drop down by index. Now let us see an simple example where I am going to set a drop down by key then read and display the value selected. Step 1 : Go to SE80 Tcode and create a webdynpro component.
Assign the component to a package or save it in a local object. Step 2 : In the context tab of the view controller create an attribute of type BSTYP to be binded to the drop down UI element and another attribute of the type string to be binded to the text view UI element.
Enter the attribute name and type and press enter.
Step 3 : In the layout tab of the view controller. Insert a lable UI element.
Provide the id for the UI element, choose a type and press enter.
Properties of the lable UI element.
We will set the label for property after creating the drop down UI element. Insert a drop down UI element in a similar way.
Properties of the drop down UI element. Bind the obligatory binding of the UI element selected key to the attribute BSTYP.
Create an event hanlder for the drop down UI element.
Now set the label for property of the lable UI element to point drop down
Insert a text view UI element and bind the text property of the UI element to the attribute text.
Binding the property text of text view to the attribute text.
Step 4 : Do the following in the event handler method for the drop down.
Step 6 : Create an application and test the application.
Output :
Select an element from a drop down.
Drop down by Index

Rate This Post A DropDownByIndex UI element provides the user with a dropdown list box. You cannot select more than one entry from the selection list. The UI element consists of a text field, a button, and a selection list. Any list item already selected is displayed in the text field. When selecting the button, a list with all possible values is displayed. When Binded with the table UI element, the drop down by index can have a different set of values for each row. Let us do the similar example we did in the drop down by key. Step 1 : Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the component controller create a node of cardinality 0..n.
Enter the node name and choose a cardinality. Press enter.
Add an attribute text to the context node drop.
Create one more attribute in the root context node to be binded to the text view.
Step 3 : In the layout tab of the view controller do the following. Insert a lable and drop down UI element . Set the property of the lable as.
Bind the binding text property of the UI element drop down to the text attribute of context node drop.
Create an event handler method for the drop down.
Insert a text view UI element and bind its text property to the text view attribute which we created.
Step 4 : Initialize the values for the drop down in doinit method.
Step 5 : In the event handler method, write the following codes.
Output :
Choose a value from a drop down.
About these ads
Predefined Object references: WD_THIS Instance for the current controller. WD_CONTEXT Instance for the Root context node. Let us assume the name of the context node to be NODE and contains three attributes of type string.
* Following is a Code generated by the code wizard for reading a context node as a table operation.
Now let us see how the code has been generated. Whenever a view has been created, an interface with name IF_<VIEW_NAME> will be created by the system and an object reference for that interface will be WD_THIS which you will be able to see in the attributes tab of the view. Also whenever a view has been created a default root context node CONTEXT will be created below which we will be creating our context node and attributes. An object reference will be generated by the system WD_CONTEXT which is an instance for the root context node referring to the SAP standard interface for context nodes IF_WD_CONTEXT_NODE. This interface if_wd_context_node contains methods which is used to perform variety of operations in the context node.
Note : Whatever the context node we are creating under the root context node CONTEXT will be of type if_wd_context_node but does not have a same instance and Context nodes are like class and we need an instance to perform any action on it. When ever I want to perform an action in the context node, I need to access the node first and to access that node I need an object reference. Here when I am creating a node under the root context node CONTEXT an instance for that context node will be generated by the system which I will not be aware of. Then if you look at what are the possibilites available for acquiring the object reference here it is. I have my access to my root context node CONTEXT which is referring to an SAP standard interface IF_WD_CONTEXT_NODE. This interface contains a method get_child_node which is used to return the object reference of its child node provided that we are passing the name of the context node for which we need the object reference. Note : Using this method you can only get the object reference of the immediate child of the root node, not the child of its child node. Code : data : lo_node type ref to if_wd_context_node. lo_node = wd_context->get_child_node( NODE ). Remember all the child of the root context node CONTEXT will be of type if_wd_context_node. So I am declaring a reference variable of that type to get store the object reference for my context node. Then using the object reference of the root context node CONTEXT I am accessing the method get_child_node which gives the object reference of the child in return. Here I am exporting the name of the context node as a text and receving the object reference of that context node in the reference variable which I created earlier. Below is the parameters of the method get_child_node of interface if_wd_context_node. Here name is the obligatory importing parameter for this method and it returns the object reference of the node using returning parameter child_node. In the code wizard the name of the context node will be passed as name = wd_this->wdctx_node As I mention earlier wd_this is the object reference which is created for the interface created at the time of view creation. When ever a context node has been added to the root context a constant variable will be declared in the interface with the standard naming convention for the context wdctx followed by the node name. Here view name is v_main. Interface created for that view is if_v_main.
Name of the context node created is NODE
Now I have got the object reference to my context node NODE in the reference variable lo_node. Now what ever the method of interface if_wd_context_node accessed using this object reference will be reflected in my context node. To read the values in the context node there is a method get_static_attributes_table in the interface if_wd_context_node. Using this method we can get the values in the context node in the form of table. Parameters of the method get_static_attributes_table are as below.
This methods returns the value in the form of table. To receive the value we need an internal table with the structure of the context node. Code generated by the code wizard for declaring the internal table is as below. As we know wd_this is the object reference for the view controller. Whenever a node has been created an structure for the node with its attribute will be declared in the interface of the view. Using this we can declare our internal table.
Using the object reference for our context node, and by accessing the get_static_attributes_table method of interface if_wd_context_node we can import the values in the context node into our internal table.
Navigation between views.

Rate This Post Navigation between different views is enabled by plugs. These can be divided into inbound and outbound plugs. Several views can be embedded to an window but is necessary that we should only display one view in a window at a time. The view which is assigned as a default view will be displayed every time when the window is initialized. To move between the views embedded to the window we need to create a navigation link for which the inbound and outbound plugs are necessary. To navigate from one view to another, each outbound plug from the first view must be linked with an inbound plug of the second view with the help of a navigation link.
Inbound Plug: The inbound plug defines the start point of the view. It handles the incoming from the other view into its view. An event handler method will be created at the time of creation of inbound plug in which we can handle the incoming to the view. When the inbound plug of this view is called by the outbound plug of the another view this event handler method gets triggerd first. Outbound Plug: Outbound plug is used to call its subsequent views. Whenever a outbound plug is
triggered it call the inbound plug of the other view to which the navigation link is created for. In the previous example Read the input and setting the output we have see how to read the data enter by the user and set it in the output. There we have read the input and set the output in the same view. Here in this scenario we will read the input entered by the user in the first screen and set the output in the second screen so that we will learn how to navigate between views. Step 1 : Go to the tcode SE80 and create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the component controller, create a node with an attribtue in it. Note : The nodes created in the component controller is public and is accessible throughout all the view.
Enter the name for the node and choose the cardinality as 1..1 and press enter.
Enter the attribute name, choose a type and press enter.
Step 3 : Go to the Context tab of the view controller and drag and drop the node created in the component controller into context of the view controller so that the node can be accesible in our view.
After drag and dropping the context node the view context will look like.
Step 4 : Go to the layout of the view controller and insert a lable UI element as shown below.
Provide the ID and type of UI element.
In the property of the lable UI element Provide the text for the label and leave the label for property as it is. We will fill it after creating a corresponing input UI element for it.
Step 5 : In a similar way insert a input field UI element.
Bind the obligatory property of the UI element value to the context attribute name.
Set the label for property of the lable UI element to our Input field.
Step 6 : Insert a button UI element and create an event handler method for it.
Create an event handler for the UI element.
In the outbound plug box if we provide the outbound plug the codings to navigate to the view that the outbound plug points will be generated inside our event handler method. As of now we havent created any outbound plug. We will call it later in the program using code wizard. Step 7 : Create a another view in the component as shown below.
Enter the name for the view and press enter.
Step 8: In the context tab of the second view drag and drop the node of the component controller to the context of our view.
In the layout tab of the second view, insert a lable and a text view UI element and bind it to the attribute name.
Properties of the lable.
Lets assign the lable for property to the text view after creating the text view. Insert the text view UI element.
Bind the text property of the text view to the attribute name.
Assign the label for property to the text view.
So far we have created two views with an option to enter a name in the first view and display it in the second view. The data will be transferred from one view to another using the node of the component controller. Once we read the input entered by the user and set it in the node, the result will be displayed where ever it is binded. So when we read the name and set it in the attribute name it will be displayed wherever our attribute name is binded. Note : Read Binding concept for more clarity on this. Now the point is we have to navigate from one screen to another. By default the view which we created at the timeof creation of the component will be the default view in the window and it will be displayed now all we have to do is to shift the view within the windows. Step 9: Create the inbound plugs an outbound plug for the views. Go to the inbound plug tab of the view v_main and create an inbound plug. By the time of creation of inbound plug, an associated event handler method will be created.
Similarly create an outbound plug to navigate from the first view to the second view.
Similarly create an inbound plug and outbound plug for the second view.
In outbound plug tab of the second view create an outbound plug.
Step 10: Go to the Window controller and you will be able to see only the view v_main which was create at the time of creation of component will be there.
Now embed the second view which we created in our window and create a navigation link between views.
Choose the view to be embedded as our second view from the popup.
You will now be able to see both the views under our window.
Right click on the outbound plug to create the navigation link.
Select create navigation link and choose the destination view using F4 help an press enter.
Now you will see the navigation link is formed between the views indicated by a chain symbol. Now when ever the outbound plug out_main is triggered the system will navigate from the first view to the second view. Similarly create the path from second view to the first view.
Create a navigation link from second view to the first view.
Choose the first view as destination.
Now navigation link from the second view to the first view is created.
Step 11: Now let us write the logic to read the input entered by the user and set it in the context node. In the event handler method of the button UI element in the first view write the logic to read the input and set the context node.
The Input field is binded to the context attribute name so Reading the context node attribute will give the value entered by the user. Using the code wizard read the context node attribute name.
Note : I have removed the unwanted and dead codes. Now set the value to the same attribute name.
Code will be generated by the code wizard. after deleting already declared attributes and removing unwanted I have kept the remaining.
When click on the submit button we have to navigate from the first we to second view. So let us trigger the outbound plug of the first view to navigate to the second view. In the code wizard general tab, choose the radio button start navigation and select the outbound plug using f4 help.
Now the code in the event handler for the button will be.
Step 12: In order to navigate back from the second view to the first view create a button back in the second view.
Create an event handler method for the button UI element.
If you provide the outbound plug at the time of creation of event then the coding for the navigation will also be created inside that event handler method.
Output:
Enter the name and press submit.
Passing data between the views using plugs

Rate This Post
To navigate from one view to another view we use plugs. The datas available in the view are local to the controller and there may be a scenario where you want data from one view to another to be processed. One way of doing this is to bind the data in the context node of component controller before you leave the view and read the data from the another view in the event handler method for the inbound plug or where ever necessary. Instead we can also pass the data using the parameters of the plug.
Scenario: In this scenario we will discuss how to pass the values between the views using plugs. Let us create an input field in the first view and whatever the value is entered in the first view will be transported using plugs and displayed in the second view in the form of text view. Step 1: Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2: Go to the context tab of the view controller and create a context attribute as shown below.
Step 3: Go to the layout tab of the view controller and create a label and input field as shown below. Right click on the root container UI element and select insert UI element.
In a similar way insert a input field UI element.
Bind the obligatory binding property value of the input field to the context attribute created.
Create an action on enter for the input field UI element.
Now go back to the label UI element and change the property of the label UI element as shown below.
Step 4: Right click on the view controller and create a view.
Enter the name and description for the view and press enter.
Go to the context tab of the view created and create a context attribute as shown below.
Go to the layout tab of the view controller and create a text view UI element and bind the attribute to it.
Bind the property of text view to the attribute created.
Insert a button UI element and create an action for the button UI element.
Create an action for the button UI element.
Step 5: Go to the first view and create the inbound plug and outbound plugs as shown below.
Create an outbound plug with an parameter for passing the data from this view.
Similarly go to the second view and create the inbound and outbound plugs.
Step 6: Go to the window controller and embed the second view in the window and create a navigation links between the views.
Choose the view to be embedded as second view and press enter.
Create a navigation link between the first view and second view.
Create a navigation link between the second view and first view.
Step 7: Go to the First view and in the action created for the input field UI element do the following. Read the value entered in the input field using the context attribute.
Generate the coding for navigation from the first view to second view using the outbound plug of the first view as shown below.
Pass the value to the parameter of the outbound plug.
Code: DATA lo_el_context TYPE REF TO if_wd_context_element. DATA ls_context TYPE wd_this->Element_context. DATA lv_name TYPE wd_this->Element_context-name. lo_el_context = wd_context->get_element( ). lo_el_context->get_attribute( EXPORTING name = `NAME` IMPORTING value = lv_name ). wd_this->fire_to_second_plg( name = lv_name ). string
Step 8: Go to the second view and in the event handler method created for the inbound plug do the following. Create an importing parameter with the name passed in the outbound plug of first view.
Now the importing parameter will hold the value passed from the view one and set it in the attribute created in the second view to be displayed in the text view UI element.
Note: I have removed the unwanted codes.
Change the coding as below:
Code in this method: DATA lo_el_context TYPE REF TO if_wd_context_element. DATA ls_context TYPE wd_this->Element_context. DATA lv_disp_name TYPE wd_this->Element_context-disp_name. lo_el_context = wd_context->get_element( ). CONCATENATE The name entered is: name into lv_disp_name SEPARATE D BY space. lo_el_context->set_attribute( name = `DISP_NAME` value = lv_disp_name ). In the event handler method created for the back button do the following to generate a code for navigation from second view to first view.
Save and activate the whole component. Step 9: Create the application for the component and press enter.
Output:
Enter the name and press enter.
Press back button to navigate back to the first view.
Message Handling
Rate This Post In the previous application we saw how to navigate from one view to the another. In this blog we will see how to handle the message. In the previous application user enters the name in the first screen and submit the name will be displayed in the second screen. Now let us make the name input as mandatory and if name is not enter we will block the navigation to the second view and throw an error message. In order to display the error message in our required space we need to insert the messagearea ui element. In case if this UI element is not place message will be displayed by default on the top of the page. Now lets move to the application. In order to make the input field as mandatory, change the state of the Input field UI element as required from normal. You will be able to see a red star indicating the field
as mandatory in its associated label. However the mandatory fields are not checked for emptiness by default in SAP webdynpro like in normal abap. We have to incorporate the logic in our method to check for the emptiness of the fields. There are also some standard class which is used to check the mandatory fields in the screen which you will see in the later blogs. Step1 : Go to the view and change the property of the input field.
Step 2: Insert a message area UI element.
Step 3 : In the event handler method for the submit button check for the emptiness of the input field and throw an error message. Modify the code as below.
In the else part generate the error message using the message manager in the code wizard. Select the radio button generate message and choose a method report_error_message from the F4.
Note: I have removed the dead codes and comments, Pass the error message you want to display using the parameter message_text.
Save and activate the application. Test the component.
Output :
Enter Submit without entering name.
You can see the error messge generated where we have placed the message area. Remove the message area UI element and test the application the error message by default will be displayed on the top. In this post we will study how to generated a pop-up in the screen. Scenario : We will place a button on the screen and on clicking we will display the pop-up. Step 1: Go to the object navigator (SE80) and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2: In the layout of the view controller, create a UI element for button as shown below. Right click on the Root UI element container and click on insert element to insert the UI element.
Enter the ID and Type for the UI element as shown below.
Set the text property of the Button UI element as shown below.
Create an event handler method for the button UI element which is to be triggered when clicking on the button.
Step 3: Right click on the view and click on create view to create a view for the popup.
In the layout of the view created place a text view ui element and provide the text for it so that it can be viewed in the pop up.
Step 4: In the window controller, Create a window and embed the view for the Pop Up in it.
Embed the pop up view to the pop up window as shown below.
Activate the whole webdynpro component. Step 5: In the event handler method created for the button do the following to call the pop up window.
Using code wizard declare the code for the Pop up window. Code will be generated as below. data lo_window_manager type ref to if_wd_window_manager. data lo_api_component type ref to if_wd_component. data lo_window type ref to if_wd_window.
lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). lo_window = lo_window_manager->create_window( window_name = W_POP * title = * close_in_any_case = abap_true message_display_mode = if_wd_window=>co_msg_display_mode_selected * close_button = abap_true button_kind = if_wd_window=>co_buttons_ok message_type = if_wd_window=>co_msg_type_none default_button = if_wd_window=>co_button_ok ). lo_window->open( ).
Save and activate the whole application. Step 6: Right click on the component and create a webdynpro application.
Thus we have now generated and displayed a pop up.
Calling an Web URL

Rate This Post
In this post we will study how to call an web URL from an webdynpro component. In this scenario we will place the button UI element And on the click of the button UI element we will call the google home page. Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to a package or save it in the local object. Step 2: In the layout tab of the view controller, create a button UI element as shown below. Right click on the Root container UI element and select insert UI element.
Enter the text property of the Button UI element as Google and create the action for the button UI element.
Step 3: In the event handler method for the Button UI element do the following to call the URL. Generate the code using the code wizard.
Instead of calling the method create_window call the method create_external_window to call the external URL. Step 4: Using pattern call the create external window of the interface if_wd_window_manager.
Replace the object reference me with the object reference for the window manager(lo_window_manager) and provide the URL exporting parameter.
Save and activate the whole component and create the application to test the component. Step 5: Create the application as shown below.
Test the application. Codings in the method for Button UI element. DATA lo_window_manager TYPE REF TO if_wd_window_manager. DATA lo_api_component TYPE REF TO if_wd_component. DATA lo_window TYPE REF TO if_wd_window.
lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). CALL METHOD lo_window_manager->create_external_window EXPORTING url = http://www.google.com’ modal = ABAP_FALSE has_menubar = ABAP_TRUE is_resizable = ABAP_TRUE has_scrollbars = ABAP_TRUE has_statusbar = ABAP_TRUE has_toolbar = ABAP_TRUE has_location = ABAP_TRUE receiving window = lo_window . lo_window->open( ). Output:
Click on the URL button. Enusre that the pop up is not blocked in the browser. Google page will be opened in new tab.
Calling one webdynpro application from another

Rate This Post
In the previous post we have seen how to call an Web URL. In this post we will study how to call an one webdynpro application from another. The procedure is same as the before, by providing the link of the webdynpro component to the create external window method
The webdynpro application will be called. There is a method in a class cl_wd_utilities which will generated the url of the webdynpro Component. We will proceed with the same application. In the event handler method for the button ui element call the method construct_wd_url of the class cl_wd_utilities to get the URL of the Webdynpro component. Using pattern call the method of the class Cl_wd_utitlites as shown below.
Pass the webdynpro application name and receive the url using the importing parameter out_absolute_url.
Codings in the method: DATA lo_window_manager TYPE REF TO if_wd_window_manager. DATA lo_api_component TYPE REF TO if_wd_component. DATA lo_window TYPE REF TO if_wd_window. lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ).
data : lv_str type string. CALL METHOD cl_wd_utilities=>construct_wd_url EXPORTING application_name = ZCSK_POP IMPORTING out_absolute_url = lv_str . CALL METHOD lo_window_manager->create_external_window EXPORTING url = lv_str modal = ABAP_FALSE has_menubar = ABAP_TRUE is_resizable = ABAP_TRUE has_scrollbars = ABAP_TRUE has_statusbar = ABAP_TRUE has_toolbar = ABAP_TRUE has_location = ABAP_TRUE receiving window = lo_window . lo_window->open( ). Now test the application. Output:

Rate This Post
In this post we will see how to hide or display the UI element dynamically. Let us consider a scenario where we have an check box. On selection of the Check box an UI element text view has to be displayed and when deselecting the check box the text view has to be hidden. Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Adding an Image UI element

Rate This Post
Assign the component to the package or save it in the local object. Step 2: Import the image into the component as shown below.
Choose the image to be uploaded from the pop up.
Provide the name and description for the image.
Step 3: Go to the layout of the view controller and insert an image UI element.
Provide the id and type for the UI element.
Add the component image to the source property of the image UI element.Choose the image using the F4 help and component images tab.
Image UI element will be added as shown below. You will also be able to see a mime folder added to the component which contains the image.
Save and activate the whole component. Step 4: Create an application to test the component.
Output:
About these ads
Radio Button
Rate This Post Radio Button UI element is a Button that has two states on and off which enable the users to select option. This type of radio button UI element places the individual radio buttons on the screen like
We can also place n no of radio buttons and toggle between them if all the radio buttons are binded to the same context attributes.
How radio Button works? The radio button UI element has two key properties. 1. Key to select 2. Selected Key The radio button gets selected when the value in the key to select is same as the value in the selected key. Both property Selected key and Key to select is bindable to the attribute of type string. Whenever we are placing the individual radio button UI element on the screen we need to handle the toggle using a single method for each radio button. The key to select attribute is fixed and Whenever the radio button is selected the system will return the value to the selected key property whatever is there in the key to select. Say if the key to select value is X and when I select the radio button1 the attribute binded to the selected key property also will hold X. Now let us see a simple example on how to use the radio button UI element. In this scenario I am going to place the two individual radio buttons and create an individual method for each radio button to toggle it. To know which radio button is selected I am going to read the context and display which radio button is selected in a text view. Step 1 : Go to the Tcode SE11 and create a webdynpro component.
Enter the description and press enter.
Assign the component to a package or save it in a local object. Step 2 : In the context tab of the view controller, create a context node with the three attributes. Since I am going to created two radio button , I ll be needing an two attribute to bind the selected key property one for each and a common key to select attribute. Create a context node RADIO with three attribute key to select, radio1 and radio2 of type string. Right click on the context node and choose create -> node.
Provide the node name the pop up and press enter.
Node will be created as below.
Right click on the node Radio and select create ->attribute to add the attributes.
Enter the name and type of the attributes and press enter.
Attribute for the node will be created as below.
In a similar way create two more attributes radio1 and radio2 of type string.
Step 3 : Go the layout tab of the view controller. Right click on the rootcontainerui element and select insert element to insert the ui element of your choice.
Provide the id for the UI element and choose a type and press enter.
Bind the obligatory binding of the radio button ui element to the radio1 attribute.
In a similar way bind the key to select property to the key to select attribute.
Provide text for the radio button.
Create an event handler method for this radio button as shown below.
In a similar way create an another radio button and bind the radio2 attribute to the selected key property and key_to_select to the key to select property and create an event handler method to it.
Step 4 : Initialization of the radio button. Rememeber the radio button gets selected when the selected key and key to select values are same. Take an example if
Key to select = X Radio 1 Radio 2 = X (Selected Key property of radio button 1) = (Selected Key property of radio button 2)
Then the radio button one will be selected as the key to select property and selected key value binded to the radio button are same where as it differs for the radio button two. Now I am going to set the radio button 1 as selected in the do init method. In the WDDOINIT method do the following. Set the context node radio using the code wizard . Select the node radio and choose the radio option set and press enter.
Modify the code generated by the system as below.
In the event handler for the radio button 1 write the following code.
In the event handler for the radio button 2 do the following to set the radio button2 as selected.
So far, we have created methods to handle the toggling of radio button. Now let us create a button and a text view UI element. On selection of the button we will read and display which radio button is selected in the the text view. Step 5 : Create a button UI element in the view layout.
The property of the Button UI element is as below.
Provide the text for the button UI element and create an event handler method for the button. Step 6 : Create a context attribute to be binded to the textview UI element of type string.
Create a text view UI element and bind the attribute text to the text property of the text view.
Bind the property text of the text view to the attribute text.
Step 7 : In the event handler for the button do the following. Read the context node radio from which you ll come to know which radio button I selected with the flag X and set the text view accordingly for the radio button selected. Read the context node radio.
Code will be generated as below. Note : I have removed the dead and unwanted codes.
Set the text view according to the radio button selected.
Code will be generated as below. From the system generated code modify the code as below.
Step 8: Save and activate the whole component. Create an application for the component to test the component. Activating the component
Create an application for the component.
Output :
Click on read value.
Select the radio button 2 and click read value.
Note : Refer to the standard component WDR_TEST_UI_ELEMENT.
Radio Button Group By Key

Rate This Post The RadioButtonGroupByKey UI element groups the individual radio button UI elements in table form, and only one radio button can be selected within the UI element group.
Unlike radio button the radio Button group by Key has only the selected key property. The Radio button group by key gets the list of values from the attributed binded to the selected key property. The attribute must be of some data element with fixed range values. Radio button group by key displays the option for the fixed range values. Say for example if i bind the attribute of type BSYTP then the radio button displays all the fixed values assigned to it domain.
Domain fixed values for the data element BSTYP.
Scenario : Let us create a radio button group by key UI element, and bind it to the fixed range values of the BSTYP. Then read and display the values in the radio button.
Step 1 : Go to the Tcode SE11 and create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the view controller create a context node as shown below.
Context node will be created as shown below.
Create an attribute for the context node of type BSTYP.
Step 3 : In the layout tab of the view controller, Insert a radio button Group by key UI element as shown below.
Bind the obligatory binding selected key of the radio button to the attribute key.
The list of radio button will contains all the fixed values in the domain.
Step 4 : Insert a Button UI element and create a event handler method for that Button.
Set the property Text of the button ui element and create an event handler method for it as shown below.
Step 5 : Create a context attribute text of type string to be binded to the text view UI element.
Insert a text view UI element and bind the text property of the text view UI element to the attribute text which we created.
Step 6 : In the event handler method for the read value button, write the code to read the radio button selected and set the text attribute accordingly. To know which radio button is selected the read the attribute which is binded to the selected key property of the radio button. The system will provide the value of which radio button is selected in that attribute. Using code wizard read the key attribute which is binded to the radio button and press enter.
System will genreate the code as below. Note : I have removed the unwanted and dead codes.
The attribute lv_key will now contain the value of the radio button selected. Set the context attribute text according to the radio button selected.
Modify the code as below to set the text according to the radio button selected.
Step 7 : Activate the whole component.
Output :
Select a radio button and click on read value.
Drop down by Index

Rate This Post A DropDownByIndex UI element provides the user with a dropdown list box. You cannot select more than one entry from the selection list. The UI element consists of a text field, a button, and a selection list. Any list item already selected is displayed in the text field. When selecting the button, a list with all possible values is displayed. When Binded with the table UI element, the drop down by index can have a different set of values for each row. Let us do the similar example we did in the drop down by key. Step 1 : Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2 : In the context tab of the component controller create a node of cardinality 0..n.
Enter the node name and choose a cardinality. Press enter.
Add an attribute text to the context node drop.
Create one more attribute in the root context node to be binded to the text view.
Step 3 : In the layout tab of the view controller do the following. Insert a lable and drop down UI element . Set the property of the lable as.
Bind the binding text property of the UI element drop down to the text attribute of context node drop.
Create an event handler method for the drop down.
Insert a text view UI element and bind its text property to the text view attribute which we created.
Step 4 : Initialize the values for the drop down in doinit method.
Step 5 : In the event handler method, write the following codes.
Output :
Choose a value from a drop down.
Predefined Object references: WD_THIS Instance for the current controller. WD_CONTEXT Instance for the Root context node. Let us assume the name of the context node to be NODE and contains three attributes of type string.
* Following is a Code generated by the code wizard for reading a context node as a table operation.
Now let us see how the code has been generated. Whenever a view has been created, an interface with name IF_<VIEW_NAME> will be created by the system and an object reference for that interface will be WD_THIS which you will be able to see in the attributes tab of the view. Also whenever a view has been created a default root context node CONTEXT will be created below which we will be creating our context node and attributes. An object reference will be generated by the system WD_CONTEXT which is an instance for the root context node referring to the SAP standard interface for context nodes IF_WD_CONTEXT_NODE. This interface if_wd_context_node contains methods which is used to perform variety of operations in the context node. Note : Whatever the context node we are creating under the root context node CONTEXT will be of type if_wd_context_node but does not have a same instance and Context nodes are like class and we need an instance to perform any action on it.
When ever I want to perform an action in the context node, I need to access the node first and to access that node I need an object reference. Here when I am creating a node under the root context node CONTEXT an instance for that context node will be generated by the system which I will not be aware of. Then if you look at what are the possibilites available for acquiring the object reference here it is. I have my access to my root context node CONTEXT which is referring to an SAP standard interface IF_WD_CONTEXT_NODE. This interface contains a method get_child_node which is used to return the object reference of its child node provided that we are passing the name of the context node for which we need the object reference. Note : Using this method you can only get the object reference of the immediate child of the root node, not the child of its child node. Code : data : lo_node type ref to if_wd_context_node. lo_node = wd_context->get_child_node( NODE ). Remember all the child of the root context node CONTEXT will be of type if_wd_context_node. So I am declaring a reference variable of that type to get store the object reference for my context node. Then using the object reference of the root context node CONTEXT I am accessing the method get_child_node which gives the object reference of the child in return. Here I am exporting the name of the context node as a text and receving the object reference of that context node in the reference variable which I created earlier. Below is the parameters of the method get_child_node of interface if_wd_context_node. Here name is the obligatory importing parameter for this method and it returns the object reference of the node using returning parameter child_node. In the code wizard the name of the context node will be passed as name = wd_this->wdctx_node As I mention earlier wd_this is the object reference which is created for the interface created at the time of view creation. When ever a context node has been added to the root context a constant variable will be declared in the interface with the standard naming convention for the context wdctx followed by the node name. Here view name is v_main. Interface created for that view is if_v_main. Name of the context node created is NODE
Now I have got the object reference to my context node NODE in the reference variable lo_node. Now what ever the method of interface if_wd_context_node accessed using this object reference will be reflected in my context node. To read the values in the context node there is a method get_static_attributes_table in the interface if_wd_context_node. Using this method we can get the values in the context node in the form of table. Parameters of the method get_static_attributes_table are as below.
This methods returns the value in the form of table. To receive the value we need an internal table with the structure of the context node. Code generated by the code wizard for declaring the internal table is as below. As we know wd_this is the object reference for the view controller. Whenever a node has been created an structure for the node with its attribute will be declared in the interface of the view. Using this we can declare our internal table. Using the object reference for our context node, and by accessing the get_static_attributes_table method of interface if_wd_context_node we can import the values in the context node into our internal table.
Table UI Element
Basic July 1, 2012
Rate This Post Scenario : In the following scenario we are going to see how to display a report in Webdynpro ABAP using Table UI element. Step 1 : Go to Tcode SE80 and Create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2: In the context tab of the view controller, Create a context node EKKO with cardinality 0..n.
Enter the name for the node, dictionary structure, cardinality as shown below.
Click on Add attribute from structure to add the attributes to the context node from the dictionary structure EKKO.
Select the attributes required and press enter. Context node will be created as shown below.
Step 3 : In the layout tab of the view controller insert a table UI element and Bind the node to the Table.
Provide ID and type for the UI Element.
Right click on the table UI element and select create binding.
Click on the context button and choose the context node ekko as shown below.
Press enter.
Step 4: Go to the method WDDOINT and set the context node with some records. The values in the context node will be displayed in the table. Using Code wizard set the node EKKO as table Operation.
Following codes will be genereated by the code wizard.
Modify the code as below.
Step 5 : Save and activate the component. Create an application and test the application.
Output:
Table with input field

Rate This Post
In this example we will see how to make the table UI element as an Input option for the user. Let us consider an example where user wants to enter the observation. If we create a form with input fields for the user to enter the observation, for entering five observation it will take a total of five times for the user to submit each observations one after another. Hence we create a Table UI element with Input field, user can enter all the observations at once and submit it in the database table. Step 1 : Go to the Tcode SE80 and create a webdynpro component as shown below. Assign the component to the package or save it in local object.
Step 2 : Go to the context tab of the view controller and create context node as below.
Enter the name for the node and choose the cardinality and press enter.
Add attributes to the node as shown below.
Enter the attribute name and type and press enter.
Attributes will be created as below.
Similarly create the other attributes as below.
Attributes for the node will be created as below.
Step 3: Go to the layout of the view controller and insert the table UI element in the view designer. Right click on the RootUIelementcontainer and click on insert element.
Provide the ID and type of the UI element.
Choose the context node observation by right clicking on the context.
Change the cell editor of the table column as shown below.
Enter the suitable label for the column. Save and activate the whole program and create an application to test the program. Step 4 : Create an webdynpro application as shown below.
Output: Still the table will be in non editable mode only, the reason is there is no records in the internal table.
Step 5: Go to the DOINIT method and initialize some records in the table.
Using the code wizard, set the node as table operation.
Save and activate the component and test the application. Output:
Enter the values.
Here we can place an button UI element and on click of that button UI element we can read the context node and update the data in the table.
Table with drop down

Rate This Post In the previous post we have seen how to make a table as an input field. Link : http://webdynproabap.wordpress.com/2012/07/16/table-with-input-field/ In that we made the table column as editable for user to input values. In this post we will how to set drop down to the table. The last field of the table which we created in the above mentioned example we had a status field which contains value open and close, now let us make it as a drop down field showing open and closed from which user chooses his option. To know about drop down by index UI element refer to the post Link : http://webdynproabap.wordpress.com/2012/07/08/drop-down-by-index/ Pre-requisites : Must have created the component in the above mentioned post table with input field.
I have copied the previously created component zcsk_table_input into another component zcsk_table_drop. To copy a component right click on the main component and select copy and provide the name for the component. You can also proceed with the same component. Step1 : Go to the context tab of the view controller . In the context node observation which we created in the previous post (Table with input field) create a child node drop as shown below. The purpose of this node is to contain the list of values for the drop down.
Enter the node name and choose the cardinality as 0..n.
Create an attribute for the node drop of type string to binded to the drop down UI element text property.
Enter the attribute name and provide the type.
Step 2: Go to the layout tab of the view controller. Right click on the table UI element and select create binding.
Change the cell editor of the status field from input field to drop down by index.
The text property of the UI element will now binded to status field of node observation.
Change the binding to the value attribute of the drop down node so that the column will display the list of values from the drop node.
Step 3: Go to the doinit method and populate the list of values for the drop down. Using code wizard set the node drop as table operation.
Table with link to action UI element

Rate This Post
In this scenario we are going to discuss about how to use the Table UI element along with the Link to action. We will display the list of PO from the EKKO table and set the Purchase order number EBELN as link to action. On clicking the EBELN link we will display the Item details for that Purchase order in a separate table. Step1: Go to TCODE SE80 and create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2: In the context tab of the view controller, create two context nodes EKKO and EKPO as shown below.
Enter the name for the node, provide the dictionary structure as EKKO and set the cardinality as 0..N.
Click on add attribute from the structure to add the attribute fields from the dictionary structure EKKO.
Choose the fields required from the popup and click on enter.
Context node will be created as below with the required attributes.
Similarly create a EKPO node with the following attributes.
Step 3: Go to the layout of the view controller and insert a table UI element.
Provide ID and type for the UI element.
Right click on the Table UI element and click on create binding.
Click on the context button to choose the context node.
Change the cell editor of the column for the EBELN field as link to action.
Change the label text as the PO number for the field EBELN.
Step 4: Now create an action for the link to action UI element.
Enter the name and description for action and press enter.
Action for the Link to action will be created as below.
Step 5: Go to the DOINIT method and initialize some values for the context node as shown below. Generate the code using the code wizard as shown below.
Note : I have removed the unwanted code.
Fill in the internal table with some records and bind it to the context node table.
Step 5: Save and activate the whole component and test the application.
So far we have only set the link to action UI element. Now let us write the logic for what has to happen on the click of the link to action UI element. On the click of the link to action UI element we will display the item details for that PO in the separate table. Step 6: Go to the layout tab of the view controller and insert the Table UI element.
Provide the ID and type.
Create binding for the table with the node EKPO as shown below and let remain all the cell editor of the table as text view only.
Step 7: Go to the event handler method for the link to action which we created earlier and do the following. This method has an importing parameter wdevent which is referring to a type CL_WD_CUSTOM_EVENT.
This class contains a method call get_context_element which will return us the element object reference for the row from where link to action is been triggered. The method gets the name as the importing parameter and returns the element object reference. To know what is the name to be passed go to the debugger and check what is the name passed in the attribute parameters.
Call this method in the event handler method for the link to action. Using patter call the method get context element of the class cl_wd_custom_event.
Right now I am passing the name as name as we dont know what is the name to be passed there. We will check out in the debugger what is the name to be passed. Keep the break point in the and test the application.
Click on the function F5 to go inside the method. Double click on the internal table parameters and see the ID. It is the name which we need to pass to the name parameter.
The row item which has the name context element provides the element object reference for the selected index and hence we need to pass the context_element to the method to get the object reference.
Using the object reference calling the get_static_attributes method of interface will gives the value of the row item.
Call the method using pattern and get the values in the work area.
Now the local structure will contain the row item values of the selected row. Using the ebeln number in the work area gets it corresponding value and bind it to the EKPO table. Using code wizard, set the node EKKO as table operation.
Note I have removed the unwanted codes. Using the ebeln number in the work area gets it corresponding value and bind it to the EKPO table.
Code in the method for link to action.
Save and activate the whole component and test the application. Debug to understand the flow. Output:
Click on the link to action.
Table with cell variant

Uncategorized December 4, 2012 Leave a comment
Rate This Post In the following post we are going to see how to use the table UI element with cell variant. The purpose of cell variant is to determine what is the cell editor supposed to be displayed in a particular column of the cell. If you ask me is it possible whether in particular column of the table can a first row be displayed as button UI element and the second row to be displayed as link to action UI element my answer would be yes we could do it with the help of cell variant. Scenario : Let us consider that there is a requirement where in you want to display the link to action only to certains rows of the column based upon a condition. Before starting to develop the component let us discuss a bit on how the cell variant works. If you have worked with table UI element before you must be aware of how the table is created with its no of columns.
Now you must be clear that the type of UI element the cell editor holds will be displayed on the screen. Now for our requirement we need two types of UI element(Link to action and text view) to be the cell editor out of which one has to be simultaneously displayed as the table cell based upon the condition. To do that we need to create a cell variant to the column and assign a type of UI element to the variant.
Step 1 : Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2: In the context tab of the view controller create the context node of cardinality 0..N with the attributes as shown below.
Step 3: Go to the layout tab of the view controller and insert a table UI element as shown below.
Right click on the tab UI element and create binding as shown below.
Step 4: In the properties of the Table column bind the attribute variant to the selected cell variant property.
Right click on the table column and select insert cell variant.
Enter the ID and the type for the cell variant.
Right click on the variant and insert editor to add the cell editor.
Specify the UI element type and press enter.
Bind the text property of the Link to action UI element to the field1 attribute as shown below and create an action for the link to action UI element.
Provide variant key for the cell variant. When the context attribute binded to the selected cell variant property of the table column contains this value enterd in the table colum then the system displays the UI element(Link to action) specified in the variant.
Step 5: Go to the methods tab of the view controller and in the doinit method initialize the values for the context attributes. Set the context node as table operation.
Note: I have removed the unwanted codes. Modify the code as below. Passing the variant to the cell makes the difference.
Save and activate the whole component.
Step 6: Create an webdynpro application to test the component.
Output:
Table Popin
Rate This Post Popins are Insertion between the rows of the table. There are two kinds of Popins. 1. Row popin 2. Cell Popin. Popins are linked to a table for row popin where as popins are linked to a table column for a cell popin.
With a cell popin an associated background color of the popin is assigned to the cell so that we can see which cell does this popin belongs to.
SAP has provided a UI element TablePopinToggleCell to provide the expansion and closing of the table Popin. This TablePopinToggleCell is a cell variant and all we have to do is to simply insert it in a table column and set the selected cell variant of the table column and the variant key of the tablepopintogglecell with a common value, but it should not be null.
Apart from this the root table UI element property selected popin must be binded to the attribute of type string, so that when ever a table popin toggle cell is selected in a particular row the system will provide a value tablepopin to the attribute binded to the selectedpopin.
Refer to the URL for more details on Table Popin. http://help.sap.com/saphelp_erp2005/helpdata/en/23/5e9041d3c72e7be10000000a155 0b0/content.htm Now let us see a simple application to demonstrate the table popin. Part I Step 1: Goto SE80 and Create a webdynpro Component.
Assign it to a package or save it in a local object.
Step 2: In the component controller, create a node EKKO and EKPO as shown below.
If you want to add attributes from a dictionary structure or table then provide the table name or structure in the dictionary structure and click on the add attributes form the structure.
Select the required fields from the pop up which contains the fields of the dictionary structure provided by you.
The selected attributes will be added to your context node.
Similiarly create another node EKPO with cardinality 0..n.
Step 3: Now go to the view layout and insert the table UI element as shown below. Right click on the rootcontaineruielement and select insert element.
Provide the ID for the UI element and choose the type as table.
Step 4: Right click on the table UI element and select the insert table column option. This particular column which we are adding now is for the tablepopintogglecell which I had mentioned above in the blog.
Right click on the inserted table column and add a cell variant to the column.
Select the cell variant as a table popin toggle cell.
Step 5: Right click on the table UI element and select create binding to add the columns to the table from the context node.
Click on the context button to choose the context node.
Select the context node EKKO and press enter.
Keep the cell editor as the text view and press enter.
You ll now be able to see the every column binded except the one which we have created for the table popin.
Step 6 : Go to the method DOINIT to initialize some values for the node EKKO.
Using code wizard set the node EKKO as a table operation and bind some records to the node.
Code will be generated by the system as below.
Select some records form the EKKO table and bind it.
Step 7: Create a webdynpro application to test the component.
You will see the output in the table we populated and our table popin column remains empty.
Part II Step 8: So far we have only see how to display the records in the table. Now let us see how to add table popin. In the table popin cell variant which we have created in the table popin colum provide the variant key as key for example.
In the table column of the cell variant change the properties as below. Change the fixed position to the left so that our popin will always occupy the left position. Provide the variant key name in the selected cell variant so that this column will come to know it has a table popin associated to it.
If you test the application now at this stage it will go for a dump.
The reason behind this is whenever we have added a variant to the table popin, the system will return a value TABLEPOPIN to identify in which row the table popin has been selected. To capture this value for every row item we need to create a attribute in our context node for the table. Go to the context node and add an attribute. Note : If the context node still have the structure EKKO it will not allow you to add the attribute, In that case remove the dictionary structure from the node and then add the attribute.
Create an attribute table_popin of type string.
In the root of the table UI element, Bind the attribute table_popin to the property selected popin. So that whenever a popin is selected from a particular row the system will return a value to the attribute table_popin with TABLEPOPIN.
Now insert a table popin by right clicking on the table ui element and choosing the insert table popin option.
If you test your application now, you will be able to see the table popin column in the left side of the table.
Now we will be needing an event handler method for handling what needs to be done on the selection of table popin. Go to the table popin cell variant and create an event ontoggle as shown below.
In this toggle method we will write the logic for what has to happen on selection of the Table popin. Before writing a logic we need to add some UI elements like what is to be displayed on the expansion of the tabel popin. Right click on the table popin and select insert content.
Insert a transparent container UI element and and table to display the contents of the EKPO table.
Similiarly insert the table ui element in a similar way.
Bind the node EKPO to the table created inside the container.
After Binding write the following code in the toggle method. method onactionontoggle . * read the context node ekko. data lo_nd_ekko type ref to if_wd_context_node. data lt_ekko type wd_this->elements_ekko. data ls_ekko like line of lt_ekko. * navigate from to via lead selection lo_nd_ekko = wd_context->get_child_node( name = wd_this-wdctx_ekko ). lo_nd_ekko->get_static_attributes_table( importing table = lt_ekko ).
* to know which row has been selected, read the table with key table_popin. * table_popin is the attribute bounded to the selectedpopin property of the table * and it returns an value tablepopin to that field which you can see in debugger. read table lt_ekko into ls_ekko with key table_popin = tablepopin. * now populate the item table for the corresponding header value and set it in the context node. data lo_nd_ekpo type ref to if_wd_context_node. data lt_ekpo type wd_this->elements_ekpo. * navigate from to via lead selection lo_nd_ekpo = wd_context->get_child_node( name = wd_this->wdctx_ekpo ). select * from ekpo into corresponding fields of table lt_ekpo where ebeln = ls_ekko-ebeln. * lo_nd_ekpo->bind_table( new_items = lt_ekpo set_initial_elements = abap_true ). endmethod. Now test your application.
The table popin doesnt close automatically and the previously selected values is displayed for all the popin the reason behind this is the first row when it was selected, the table_popin attribute will be set as tablepopin and when we select the second row second row table_popin will also set as tablepopin but when we read the table using the value table popin it will always pick the first row which have the table popin. To differentiate the previously selected popin and newly selected popin we need a flag. Create a flag in the context node EKKO as shown below.
Now modify the code as shown below. What I have done is everytime when a tablepopin is set a attribute table_popin I am setting a flag along with it. Next time when the other popin is selected, I am first checking for the previously selected popin with the combination of tablepopin and flag x. If previous value in that combination is available I am clearing it and reading the currently selected popin with the value tablepopin and setting the flag as x to the new value. When you remove the tablepopin value from the attribute that table popin will be closed. method onactionontoggle . * read the context ekko. data lo_nd_ekko type ref to if_wd_context_node. data lt_ekko type wd_this->elements_ekko. data ls_ekko like line of lt_ekko. * navigate from to via lead selection lo_nd_ekko = wd_context->get_child_node( name = wd_this->wdctx_ekko ).
* @todo handle non existant child * if lo_nd_ekko is initial. * endif. lo_nd_ekko->get_static_attributes_table( importing table = lt_ekko ). read table lt_ekko into ls_ekko with key table_popin = tablepopin flag = x. data : lv_tabix type sy-tabix. if sy-subrc = 0. lv_tabix = sy-tabix. clear : ls_ekko-table_popin , ls_ekko-flag. modify lt_ekko from ls_ekko index lv_tabix. clear lv_tabix. endif. read table lt_ekko into ls_ekko with key table_popin = tablepopin. if sy-subrc = 0. lv_tabix = sy-tabix. ls_ekko-flag = x. modify lt_ekko from ls_ekko index lv_tabix. data lo_nd_ekpo type ref to if_wd_context_node. data lt_ekpo type wd_this->elements_ekpo. * navigate from to via lead selection lo_nd_ekpo = wd_context->get_child_node( name = wd_this->wdctx_ekpo ). select * from ekpo into corresponding fields of table lt_ekpo where ebeln = ls_ekko-ebeln. * lo_nd_ekpo->bind_table( new_items = lt_ekpo set_initial_elements = abap_true ). endif. lo_nd_ekko->bind_table( new_items = lt_ekko set_initial_elements = abap_true ). endmethod. Now test the application.
Exporting content of table to Excel sheet

Rate This Post
In this post we will see how to export the contents of the table to the excel sheet. In the previous blog we have already created a application to display data in the form of the tables. URL: http://webdynproabap.wordpress.com/2012/07/01/table-ui-element/ Output:
We will continue in the same application to export the table content to the excel sheet. Step 1: Go to the layout tab of the view controller and create button UI element.
Enter the text property of the button UI element as export and create an action for the button UI element.
Step 2: In the event handler method for the button UI element do the following code to export the content to the excel sheet. First read the content of the table using the code wizard read as table operation.
The content of the table will be exported to the internal table lt_ekko. Now we will move these content to the excel sheet. To do that concatenate all the data in to a string variable seperated by a horizontal tab and conver it into xstring using function module SCMS_STRING_TO_XSTRING. Concatenate the contents of the row into a string variable.
Pass the string variable to the function module scms_string_to_xstring and convert the values into xstring.
There is a class called wdr_task which contains an static attribute client_window. This attribute is of type reference variable to class CL_WDR_CLIENT_WINDOW There is an attribute in the class cl_wdr_client_window called client which is again a reference variable of type IF_WDR_CLIENT. This interface contains a method Attach_file_to_response which will help us creating the excel sheet with the contents of the variable lv_string.
Note : For people who dont understand oo abap codings can write the coding in a following way.
Save and activate the whole component and test the application.
Coding in the method for Button UI element. DATA lo_nd_ekko TYPE REF TO if_wd_context_node. DATA lt_ekko TYPE wd_this->elements_ekko. lo_nd_ekko = wd_context->get_child_node( name = wd_this->wdctx_ekko ). lo_nd_ekko->get_static_attributes_table( IMPORTING table = lt_ekko ). DATA ls_ekko LIKE LINE OF lt_ekko. DATA lv_text TYPE string. LOOP AT lt_ekko INTO ls_ekko. CONCATENATE lv_text ls_ekko-ebeln ls_ekko-bukrs ls_ekko-bstyp ls_ekko-aedat ls_ekko-lifnr cl_abap_char_utilities=>newline INTO lv_text SEPARATED BY cl_abap_char_utilities=>horizontal_tab. CLEAR ls_ekko. ENDLOOP. DATA : lv_xstring TYPE xstring. CALL FUNCTION SCMS_STRING_TO_XSTRING EXPORTING text = lv_text IMPORTING BUFFER = lv_xstring EXCEPTIONS FAILED =1 OTHERS =2 . IF sy-subrc <> 0. MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4. ENDIF. * WDR_TASK=>CLIENT_WINDOW->CLIENT>ATTACH_FILE_TO_RESPONSE( * I_FILENAME = table.xls * I_CONTENT = lv_xstring * I_MIME_TYPE = EXCEL ).
data : lv_clientwindow type ref to CL_WDR_CLIENT_WINDOW. lv_clientwindow = WDR_TASK=>CLIENT_WINDOW. data : lv_client type ref to IF_WDR_CLIENT. lv_client = lv_clientwindow->client. CALL METHOD lv_client->attach_file_to_response EXPORTING i_filename = table.xls i_content = lv_xstring i_mime_type = EXCEL. Output:
Click on the export button.
Click on open or save button. When you click on save file will be downloaded with the specified name.
Click on open to view the file.
Roadmap UI element
Rate This Post
The Roadmap UI element displays the steps followed in the wizard.
Each step can be a roadmap step object or MultipleRoadmap step. A road map can use various symbols to mark the start and endpoint.
Let us see how to create a simple road map. Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to the package or save it in the local object. Step 2: To save the current roadmap step we need an attribute. Go to the context tab of the view controller and create the context node as shown below.
Enter the name for the node and press enter.
Create an attribute to the node as shown below.
Provide the name and type for the attribute and press enter.
Step 3: Go to the layout tab of the view controller and insert a roadmap UI element as shown below.
Right click on the road map UI element and select insert step.
Provide ID and Type for the step.
Similarly create two more steps with ID second and third.
In the property of the first step enter the description and Name.
Similarly enter the description and name for the remaining two steps.
Bind the step attribute to the selected step property of the road map UI element.
Step 4: We need a view container UI element to hold an view for the each step of the road map. Right click on the root container UI element and select insert UI element to add view container UI element.
Similarly insert two button UI elements to navigate between the views with name previous and next and create action for both the buttons.
Step 5: Create a view for each step. Right click on the view controller and create a view.
Enter the name and description for the view.
In the layout tab of the view created insert a text view UI element.
Enter the text property of the text view as the first view.
Similarly create two more views and name the view as second and third. Insert a text view in each view and provide the text as second and third view. Step 6: To navigate between the view we need to create the inbound and outbound plugs. Go to the Outbound plug tab of the main view (V_MAIN) and create outbound plug to all other views.
Go to the inbound plug of the first view and create an inbound plug for the each view as shown below.
Step 7: Go to the window and create the navigation links between the views. First embed all the views created first, second and third in the view container of the main view as shown below.
Similarly embed second and third view to the view container.
Create the navigation links to each view as shown below.
Choose the destination view as the first view.
Navigation link will be formed from the main view to the first view will be created as below.
Similarly create the navigation link to the second and third view using their respective outbound plugs.
Step 8: Go to the methods of the main view and in do init method set the attribute as first. Remember the value we are setting to the selectedstep of the road map UI element must be same as the ID of the roadmap step so that the road map step will be highlighted.
Code : DATA lo_nd_roadmap TYPE REF TO if_wd_context_node. DATA lo_el_roadmap TYPE REF TO if_wd_context_element. DATA ls_roadmap TYPE wd_this->Element_roadmap. DATA lv_step TYPE wd_this->Element_roadmap-step. lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ).
lo_el_roadmap = lo_nd_roadmap->get_element( ). lo_el_roadmap->set_attribute( name = `STEP` value = FIRST ). Write the following code in the next method. I have read the attribute to know the current step and set the attribute again by increasing a step as next button has been triggered and accordinly I am navigating to the view. Code: DATA lo_nd_roadmap TYPE REF TO if_wd_context_node. DATA lo_el_roadmap TYPE REF TO if_wd_context_element. DATA ls_roadmap TYPE wd_this->Element_roadmap. DATA lv_step TYPE wd_this->Element_roadmap-step. lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ). lo_el_roadmap = lo_nd_roadmap->get_element( ). lo_el_roadmap->get_attribute( EXPORTING name = `STEP` IMPORTING value = lv_step ). case lv_step. when FIRST. lv_step = SECOND. WHEN SECOND. LV_STEP = THIRD. WHEN THIRD. LV_STEP = FIRST. ENDCASE. lo_el_roadmap->set_attribute( name = `STEP` value = lv_step ). case lv_step. when FIRST. wd_this->fire_to_first_plg( ). WHEN SECOND. wd_this->fire_to_second_plg( ).
WHEN THIRD. wd_this->fire_to_third_plg( ). ENDCASE. Write the following code in the previous method. I have read the attribute to know the current step and set the attribute again by decreasing a step as next button has been triggered and accordinly I am navigating to the view. Code: DATA lo_nd_roadmap TYPE REF TO if_wd_context_node. DATA lo_el_roadmap TYPE REF TO if_wd_context_element. DATA ls_roadmap TYPE wd_this->Element_roadmap. DATA lv_step TYPE wd_this->Element_roadmap-step. lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ). lo_el_roadmap = lo_nd_roadmap->get_element( ). lo_el_roadmap->get_attribute( EXPORTING name = `STEP` IMPORTING value = lv_step ). case lv_step. when FIRST. lv_step = THIRD. WHEN SECOND. LV_STEP = FIRST. WHEN THIRD. LV_STEP = SECOND. ENDCASE. lo_el_roadmap->set_attribute( name = `STEP` value = lv_step ). case lv_step. when FIRST. wd_this->fire_to_first_plg( ). WHEN SECOND. wd_this->fire_to_second_plg( ).
WHEN THIRD. wd_this->fire_to_third_plg( ). ENDCASE. Step 9: Save and activate the whole component. Create an webdynpro application and test the component.
Output:
We can also navigate by selecting the road map step for that we need to create an action for onselect event of the roadmap and write the action over there. Code: DATA LV_STEP TYPE STRING. DATA lo_nd_roadmap TYPE REF TO if_wd_context_node. DATA lo_el_roadmap TYPE REF TO if_wd_context_element. DATA ls_roadmap TYPE wd_this->Element_roadmap. CALL METHOD WDEVENT->GET_STRING EXPORTING NAME = STEP RECEIVING VALUE = LV_STEP. lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ). lo_el_roadmap = lo_nd_roadmap->get_element( ). lo_el_roadmap->set_attribute( name = `STEP` value = lv_step ). case lv_step.
when FIRST. wd_this->fire_to_first_plg( ). WHEN SECOND. wd_this->fire_to_second_plg( ). WHEN THIRD. wd_this->fire_to_third_plg( ). ENDCASE. I have captured the selected button in the roadmap using the importing parameter wdevent and set the attribute and triggerd the outbound plug accordingly. Test the output.
File Upload UI Element

Uncategorized November 10, 2012 Leave a comment
Rate This Post File upload UI element is used to upload files from the client(Presentation server) to the server. This UI element appears with an input field and a button to search the directory for the file.
Note: We cannot specify the URL path with the file Upload UI element.
Important properties of the UI element to be binded:
Data property of the UI Element must be binded to an attribute of type XSTRING. The system will automatically converts the content of the file uploaded into XSTRING format and store it in the attribute binded to the data property. File Name property of the UI element is to be binded to the attribute of type string. The system will store the name of the file uploaded in this attribute. Mimetype property of the UI element is to be binded to the attribute of type string. The system will store the type of file in this attribute. Properties of the context node to be maintained for the File Upload UI element.
Now let us see an example to how to use the file Upload UI element and then how to convert the content of the file from XSTRING format to internal table contents. Step 1: Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2: Go to the context tab of the view controller and create a context node to be binded to the file upload UI element.
Create context attribute to the node as shown below.
Step 3: Go to the layout tab of the view controller and insert a file upload UI element.
Bind the properties of the UI Element to the respective attributes.
Since we dont have an action for the file Upload UI element insert a button UI element to trigger the action.
Enter the text for the button and create an action for the button.
In the event handler method created for the button UI element read the context node created for file upload to get the content of the file. Using code wizard read the node.
Note : I have removed the unwanted codes. Now the local structure ls_file_upload will contain the contents of the file. Save and activate the whole component. Step 4: Create a webdynpro application to test the component.
Output: Click on browse to search the file from the directory and choose the file.
Set a break point in the event handler fo the Upload UI element and check the content of the node at runtime.
The content of the file is converted into Xstring format by the system and stored in the attribute binded to the data property. Lets see how to obtain the contents of the file in the internal table in the next post.
OVS Search help

Rate This Post OVS SEARCH HELP Theory : OVS Stands for Object value selection. One way of using the F4 input help can be done by using OVS in ABAP webdynpro, The other forms are dictionary search help and freely programmed search help. Now let us see the way the OVS search help works. The SAP has provided us with a standard webdynpro component WDR_OVS for OVS Search help. Using this standard component we can provide ovs search help in our component. This OVS Search help has four phases which you will be able to see from the case statement declared in the code consisting of four phases if_wd_ovs=>co_phase_0 to if_wd_ovs=>co_phase_3.
Phase 1 : if_wd_ovs=>co_phase_0. It is a configuration phase. In this phase we set the lable for the subsearch, output table etc. For this purpose, the event parameter OVS_CALLBACK_OBJECT provides the method SET_CONFIGURATION. Phase 2 : if_wd_ovs=>co_phase_1. This method is used to set the input structure for the subsearch.
Phase 3 : if_wd_ovs=>co_phase_2. The business logic for fetching the datas from the data base are written here. the values obtained are set to the output table so that it can be displayed on the screen.
Phase 4 : if_wd_ovs=>co_phase_3. When user has selected one value from the above table. It has to go and sit in the place from where the F4 help is being triggered. This is done in this phase. Refer to the SAP link for more details on the ovs search help http://help.sap.com/saphelp_nw04s/helpdata/en/47/9ef8c99b5e3c5ce10000000a42193 7/content.htm
Lets take a look into an example of how to create a ovs search help. Pre-requisites : Create a compnent with and input field. Step 1: Add the standard component WDR_OVS to the component framework ( HERE I have created a component ZCSK_WD_OVS in which I am going to include OVS Search help ).
Step 2: Add the interface controller of the ovs component to the View in the properties tab so that we will be able to access the Standard OVS component methods.
Step 3: Create the context node and add attributes to it. Set the input help mode of the attribute as Object value selector. And select the OVS usage Component using F4 help.
Step 4: Create an event handler method. And select the event as OVS using F4 help.
Step 5: In the method created for the ovs help. Write your processing logic. 5.1 Create a structure to specify the search criteria.
The Types declaration lty_stru_input generated by the code is for setting the subsearch in the search help. Declare the input structure here which you want to set as an subsearch. 5.2 Create a structure to display the search result.
The Types declaration lty_stru_list generated by the code is for setting the output table i.e the column where the search result is being displayed in the search help popup. 5.3 Create label texts for the search criteria.
The internal table lt_label_text is used for setting the lable to the subsearch input fields. 5.4 Create label to be displayed for the search results.
The internal table lt_column_texts is used for displaying the label for the output table. 5.5 Write the processing logic to fetch the data from the database.
5.6 Set the attributes to the context nodes. When an user selects an value in the search, it has to be displayed in the input field from where he triggers the f4 help. In order to do that the values which the user select in the screen will be captured in the field-symbol <ls_selection> by the sap system. From the field symbol set the selected value in the context attribute which we have binded to the input field, so that it will be displayed on the screen.
Output: Press the F4 help button, you will get the below popup.
Enter the search criteria and press start search.
Double click on the values or select the lead and click ok. The selected value will sit on the appropriate fields.
Codes on the OVS Event Handler Method. Note : The highlighted part has to be modified by us, rest of the code is system generated when you add the event OVS to the event handler method. method OVS . * declare data structures for the fields to be displayed and * for the table columns of the selection list, if necessary types: begin of lty_stru_input, * add fields for the display of your search input here kunnr type kunnr, name1 type name1_gp, end of lty_stru_input. types: begin of lty_stru_list, * add fields for the selection list here Kunnr type kunnr, name1 type name1_gp, end of lty_stru_list.
data: ls_search_input type lty_stru_input, lt_select_list type standard table of lty_stru_list, ls_text type wdr_name_value, lt_label_texts type wdr_name_value_list, lt_column_texts type wdr_name_value_list, lv_window_title type string, lv_group_header type string, lv_table_header type string. field-symbols: <ls_query_params> type lty_stru_input, <ls_selection> type lty_stru_list. * * DATA : lv_kunnr TYPE kunnr, lv_name TYPE string.
case ovs_callback_object->phase_indicator. when if_wd_ovs=>co_phase_0. configuration phase, may be omitted * in this phase you have the possibility to define the texts, * if you do not want to use the defaults (DDIC-texts) ls_text-name = `KUNNR`. must match a field name of search ls_text-value = `Customer Number`. wd_assist->get_text( `001` ). insert ls_text into table lt_label_texts. ls_text-name = `NAME1`. must match a field name of search ls_text-value = `Customer Name`. wd_assist->get_text( `001` ). insert ls_text into table lt_label_texts. ls_text-name = `KUNNR`. must match a field in list structure ls_text-value = `Customer Number`. wd_assist->get_text( `002` ). insert ls_text into table lt_column_texts. ls_text-name = `NAME1`. must match a field in list structure ls_text-value = `Customer Name`. wd_assist->get_text( `002` ). insert ls_text into table lt_column_texts. * * * lv_window_title = wd_assist->get_text( `003` ). lv_group_header = wd_assist->get_text( `004` ). lv_table_header = wd_assist->get_text( `005` ).
ovs_callback_object->set_configuration( label_texts = lt_label_texts column_texts = lt_column_texts group_header = lv_group_header window_title = lv_window_title table_header = lv_table_header col_count = 2 row_count = 20 ).
when if_wd_ovs=>co_phase_1. set search structure and defaults * In this phase you can set the structure and default values * of the search structure. If this phase is omitted, the search * fields will not be displayed, but the selection table is * displayed directly. * Read values of the original context (not necessary, but you * may set these as the defaults). A reference to the context * element is available in the callback object. ovs_callback_object->context_element->get_static_attributes( importing static_attributes = ls_search_input ). * pass the values to the OVS component ovs_callback_object->set_input_structure( input = ls_search_input ). when if_wd_ovs=>co_phase_2. * If phase 1 is implemented, use the field input for the * selection of the table. * If phase 1 is omitted, use values from your own context. if ovs_callback_object->query_parameters is not bound. ******** TODO exception handling endif. assign ovs_callback_object->query_parameters->* to <ls_query_params>. if not <ls_query_params> is assigned. ******** TODO exception handling endif. * * call business logic for a table of possible values lt_select_list = ???
select kunnr name1 from kna1 into table lt_select_list up to 10 rows. ovs_callback_object->set_output_table( output = lt_select_list ). when if_wd_ovs=>co_phase_3. * apply result if ovs_callback_object->selection is not bound. ******** TODO exception handling endif. assign ovs_callback_object->selection->* to <ls_selection>. if <ls_selection> is assigned. ovs_callback_object->context_element->set_attribute( name = KUNNR value = <ls_selection>-KUNNR ).
ovs_callback_object->context_element->set_attribute( name = CUSTOMER_NAME value = <ls_selection>-NAME1 ). * or * ovs_callback_object->context_element->set_static_attributes( * static_attributes = <ls_selection> ). endif. endcase. endmethod.
OVS Search help

Rate This Post OVS SEARCH HELP Theory : OVS Stands for Object value selection. One way of using the F4 input help can be done by using OVS in ABAP webdynpro, The other forms are dictionary search help and freely programmed search help. Now let us see the way the OVS search help works. The SAP has provided us with a standard webdynpro component WDR_OVS for OVS Search help. Using this standard component we can provide ovs search help in our component. This OVS Search help has four phases which you will be able to see from the case statement declared in the code consisting of four phases if_wd_ovs=>co_phase_0 to if_wd_ovs=>co_phase_3. Phase 1 : if_wd_ovs=>co_phase_0. It is a configuration phase. In this phase we set the lable for the subsearch, output table etc. For this purpose, the event parameter OVS_CALLBACK_OBJECT provides the method SET_CONFIGURATION. Phase 2 : if_wd_ovs=>co_phase_1.
This method is used to set the input structure for the subsearch.
Phase 3 : if_wd_ovs=>co_phase_2. The business logic for fetching the datas from the data base are written here. the values obtained are set to the output table so that it can be displayed on the screen.
Phase 4 : if_wd_ovs=>co_phase_3. When user has selected one value from the above table. It has to go and sit in the place from where the F4 help is being triggered. This is done in this phase. Refer to the SAP link for more details on the ovs search help http://help.sap.com/saphelp_nw04s/helpdata/en/47/9ef8c99b5e3c5ce10000000a42193 7/content.htm Lets take a look into an example of how to create a ovs search help. Pre-requisites : Create a compnent with and input field. Step 1:
Add the standard component WDR_OVS to the component framework ( HERE I have created a component ZCSK_WD_OVS in which I am going to include OVS Search help ).
Step 2: Add the interface controller of the ovs component to the View in the properties tab so that we will be able to access the Standard OVS component methods.
Step 3: Create the context node and add attributes to it. Set the input help mode of the attribute as Object value selector. And select the OVS usage Component using F4 help.
Step 4: Create an event handler method. And select the event as OVS using F4 help.
Step 5: In the method created for the ovs help. Write your processing logic. 5.1 Create a structure to specify the search criteria.
The Types declaration lty_stru_input generated by the code is for setting the subsearch in the search help. Declare the input structure here which you want to set as an subsearch. 5.2 Create a structure to display the search result.
The Types declaration lty_stru_list generated by the code is for setting the output table i.e the column where the search result is being displayed in the search help popup. 5.3 Create label texts for the search criteria.
The internal table lt_label_text is used for setting the lable to the subsearch input fields. 5.4 Create label to be displayed for the search results.
The internal table lt_column_texts is used for displaying the label for the output table. 5.5 Write the processing logic to fetch the data from the database.
5.6 Set the attributes to the context nodes. When an user selects an value in the search, it has to be displayed in the input field from where he triggers the f4 help. In order to do that the values which the user select in the screen will be captured in the field-symbol <ls_selection> by the sap system. From the field symbol set the selected value in the context attribute which we have binded to the input field, so that it will be displayed on the screen.
Output: Press the F4 help button, you will get the below popup.
Enter the search criteria and press start search.
Double click on the values or select the lead and click ok. The selected value will sit on the appropriate fields.
Codes on the OVS Event Handler Method. Note : The highlighted part has to be modified by us, rest of the code is system generated when you add the event OVS to the event handler method. method OVS . * declare data structures for the fields to be displayed and * for the table columns of the selection list, if necessary types: begin of lty_stru_input, * add fields for the display of your search input here kunnr type kunnr, name1 type name1_gp, end of lty_stru_input. types: begin of lty_stru_list, * add fields for the selection list here Kunnr type kunnr, name1 type name1_gp, end of lty_stru_list.
data: ls_search_input type lty_stru_input, lt_select_list type standard table of lty_stru_list, ls_text type wdr_name_value, lt_label_texts type wdr_name_value_list, lt_column_texts type wdr_name_value_list, lv_window_title type string, lv_group_header type string, lv_table_header type string. field-symbols: <ls_query_params> type lty_stru_input, <ls_selection> type lty_stru_list. * * DATA : lv_kunnr TYPE kunnr, lv_name TYPE string.
case ovs_callback_object->phase_indicator. when if_wd_ovs=>co_phase_0. configuration phase, may be omitted * in this phase you have the possibility to define the texts, * if you do not want to use the defaults (DDIC-texts) ls_text-name = `KUNNR`. must match a field name of search ls_text-value = `Customer Number`. wd_assist->get_text( `001` ). insert ls_text into table lt_label_texts. ls_text-name = `NAME1`. must match a field name of search ls_text-value = `Customer Name`. wd_assist->get_text( `001` ). insert ls_text into table lt_label_texts. ls_text-name = `KUNNR`. must match a field in list structure ls_text-value = `Customer Number`. wd_assist->get_text( `002` ). insert ls_text into table lt_column_texts. ls_text-name = `NAME1`. must match a field in list structure ls_text-value = `Customer Name`. wd_assist->get_text( `002` ). insert ls_text into table lt_column_texts. * * * lv_window_title = wd_assist->get_text( `003` ). lv_group_header = wd_assist->get_text( `004` ). lv_table_header = wd_assist->get_text( `005` ).
ovs_callback_object->set_configuration( label_texts = lt_label_texts column_texts = lt_column_texts group_header = lv_group_header window_title = lv_window_title table_header = lv_table_header col_count = 2 row_count = 20 ).
when if_wd_ovs=>co_phase_1. set search structure and defaults * In this phase you can set the structure and default values * of the search structure. If this phase is omitted, the search * fields will not be displayed, but the selection table is * displayed directly. * Read values of the original context (not necessary, but you * may set these as the defaults). A reference to the context * element is available in the callback object. ovs_callback_object->context_element->get_static_attributes( importing static_attributes = ls_search_input ). * pass the values to the OVS component ovs_callback_object->set_input_structure( input = ls_search_input ). when if_wd_ovs=>co_phase_2. * If phase 1 is implemented, use the field input for the * selection of the table. * If phase 1 is omitted, use values from your own context. if ovs_callback_object->query_parameters is not bound. ******** TODO exception handling endif. assign ovs_callback_object->query_parameters->* to <ls_query_params>. if not <ls_query_params> is assigned. ******** TODO exception handling endif. * * call business logic for a table of possible values lt_select_list = ???
select kunnr name1 from kna1 into table lt_select_list up to 10 rows. ovs_callback_object->set_output_table( output = lt_select_list ). when if_wd_ovs=>co_phase_3. * apply result if ovs_callback_object->selection is not bound. ******** TODO exception handling endif. assign ovs_callback_object->selection->* to <ls_selection>. if <ls_selection> is assigned. ovs_callback_object->context_element->set_attribute( name = KUNNR value = <ls_selection>-KUNNR ).
ovs_callback_object->context_element->set_attribute( name = CUSTOMER_NAME value = <ls_selection>-NAME1 ). * or * ovs_callback_object->context_element->set_static_attributes( * static_attributes = <ls_selection> ). endif. endcase. endmethod.
Select-Options Creating a selection field in the screen

Rate This Post Step 1: Go to Tcode SE80 and Create a Webdynpro Component. Assign the component to the package or save it in the local object.
Step 2 : To the main Component, Add the component WDR_SELECT_OPTIONS in the used components tab. To use the functionality of the another webdynpro component it has to be added to our Component used components list where as if it is a standard interface it has to be added to the Implemented Interface.
Step 3: Add the interface controller of WDR_SELECT_OPTIONS in the view controller in which we need to use the select options. Doing so will create a method in the interface of the view and this method will return the object reference for the interface of the select options using which we can get the access to the select-option methods. Click on the create controller usage button.
From the popup choose the interface controller of the select-options component.
Step 3: Go to Layout and insert View Container UI Element. This View Container UI Element is used to display the View of the other component into our View. Whenever we call the select options method and create a selection screen the output will be displayed in the view of the select options component. To display the output here in our view we need the screen into our view. For which we need view container to embed the view of the select options to our view. Right click on the rootuielementcontainer and select insert element to insert a UI element in the view.
Step 4: Go to Window controller. Expand the Window. Right click on the Select_options(UI Container Created in previous step) and embed the view of the standard component(WDR_SELECT_OPTIONS) to be displayed in our window.
Press F4 help on the View to be embedded to choose the view.
Choose the view WND_SELECTION_SCREEN in which selection parameters will be displayed.
Press Enter after choosing the View.
You can see the view embedded to the view container.
Step 5: Now we have to write the coding in the WDDOINIT method to initialize the selection field on the screen. Go the method WDDOINIT of the View.Using Code Wizard generate the coding as mentioned below.
Step 6: First we need to Instantiate the Used Component to check for the active component usages. While adding the interface controller of the select option in the properties of the view two methods will be created in the interface for the views. A method will be created with the naming convention wd_cpuse_ followed by the component name which we have given for select options. This method will return the object reference for the component usage using which we will check whether the component usage is active or not. In Code wizard, general tab choose the option Instantiate Used component and select the select option which we added using the F4 Help.
Choose the component select_options.
Step 7: To access the method of another component we need the object reference to the interface controller of the component. While adding the interface controller of the select options component to the view controller, a method will be created with the naming convention wd_cpifc followed by the component name which we provided for it. This method will returns the object reference for the interface controller of the select option. Using code wizard choose the radio button method call in used controller and provide the component name using F4 help.
Double click on the select options component.
Now choose the method INIT_SELECTION_SCREEN which will return you the reference to the select options interface if_wd_select_options.
Select the method INIT_SELECTION_SCREEN.
The reference variable lv_r_helper_class will contain the object reference to the select options interface. Step 8: The interface if_wd_select_options contains a method called create_range_table which is used to create a range for the select option field.Using the ABAP Object pattern call the method Create table range from the interface we are using (IF_WD_SELECT_OPTIONS).
Replace me with object which refers to the interface IF_WD_SELECT_OPTIONS. Pass the Data element in the place of the type name and create a range table of type ref to data same as the receiving parameter RT_RANGE_TABLE. Modify the code as below.
Call the Method add selection field using the same procedure as mentioned above to set the selection field on the screen.
Replace me with the object referring to the IF_WD_SELECT_OPTIONS. Pass the range table which we received from the returning parameter in the previous step.
Step 10 : Save and activate the component and create an application to test the component.
Output:
We have some default buttons here in the screen to disable this button go back to the method WDDOINIT do the following. Call the method set global options and set the buttons which you dont need as ABAP_FALSE. Click on the pattern and choose abap object pattern, Enter the interface IF_WD_SELECT_OPTIONS and choose the method SET_GLOBAL_OPTIONS.
Code wizard will generate the following code.
Remove the comments and set the buttons you dont need as ABAP_FALSE.
Here I had disabled the buttons check and execute. The Output will look like.
Codes in the WDDOINIT Method * instantiate the used component. data lo_cmp_usage type ref to if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_select_options( ). if lo_cmp_usage->has_active_component( ) is initial. lo_cmp_usage->create_component( ). endif. * call the method in the used controller data lo_interfacecontroller type ref to iwci_wdr_select_options . lo_interfacecontroller = wd_this->wd_cpifc_select_options( ). data lv_r_helper_class type ref to if_wd_select_options. lv_r_helper_class = lo_interfacecontroller->init_selection_screen( ). * * create the range table.
data rt_range_table type ref to data. call method lv_r_helper_class->create_range_table exporting i_typename = ebeln * i_length = * i_decimals = receiving rt_range_table = rt_range_table. * add selection field call method lv_r_helper_class->add_selection_field exporting i_id = ebeln * i_within_block = mc_id_main_block * i_description = * i_is_auto_description = abap_true it_result = rt_range_table i_obligatory = abap_true * i_complex_restrictions = * i_use_complex_restriction = abap_false * i_no_complex_restrictions = abap_false * i_value_help_type = if_wd_value_help_handler=>co_prefix_none * i_value_help_id = * i_value_help_mode = * i_value_help_structure = * i_value_help_structure_field = * i_help_request_handler = * i_lower_case = * i_memory_id = * i_no_extension = abap_false * i_no_intervals = abap_false * i_as_checkbox = abap_false * i_as_dropdown = abap_false * it_value_set = i_read_only = abap_false * i_dont_care_value = * i_explanation = * i_tooltip = * i_is_nullable = abap_true * i_format_properties = * i_suggest_values = . * set global options call method lv_r_helper_class->set_global_options exporting i_display_btn_cancel = abap_true i_display_btn_check = abap_false
i_display_btn_reset = abap_true i_display_btn_execute = abap_false .
Reading the values entered in select option

Rate This Post In the previous post, we studied about how to set the select option in the screens and what are the various options that can be set using the select options. Now, we will study about how to read the values that is entered in the select option into the application. We will read some values from the screen based on an action. Let us create a button and a table UI element to display the records for the entered value in the select options. Step 1: Right click on the root container UI element and select insert UI element. Create a button UI Element as shown below by providing the id and type for the UI element.
Enter the text for the Button UI element.
Create an action for the Button UI Element as shown below.
Right click on the root container UI element and select insert UI element. Create a table UI Element as shown below by providing the id and type for the UI element.
Step 2: In the context tab of component controller, create a context node and bind it to the table. Enter the name and dictionary structure and select add attribute from structure.
Choose the required attributes and press Enter.
Drag and drop the context tab to the view controller.
Select the context button to choose the node.
Choose the context node and press enter.
By default the cell editor of the column will be text view. If not choose the column editor as text view and press enter.
Attributes of the context node will be binded to the table as shown below.
Step 3: Go to action ONSUBMIT and write the following code. Instantiate the used component.
Call the method call in the current controller using the code wizard.
Call the method get range table of the select option interface if_wd_select_options.
Code will be generated as below
Modify the code as below. Replace the ME object reference with the object created earlier. Pass the I_ID and Create a range table of type ref to data, because receiving parameter rt_range_table is declared in the same way mentioned above.
Now write the below codings to get the value entered in the select option. RT_EBELN contains the object reference and from that we need to get the value. Here we require a field symbol to do the job. Declare a field symbol of type table and then assign the object reference to the field symbol. The field symbol will now hold the data entered in the select options which you can see it in the debugger.
Now write the codings to fetch the data and set it in the context node.
Save and activate. Test the application. Output:
OVS Search help for select option field

Rate This Post In this post we will study how to provide a OVS search help to the select options field. When we are creating an input field we will bind it to the context attribute and the mode of input help for the field depends upon the input help mode property of the context attribute binded. Here in select option the scenario is different. We dont have a context attribute involved and how do we set a ovs search help. By default the field assigned to select option will have a dictionary search help and there may be a scenario where the field may not have a dictionary search help and you want to provide search help for it. Or your requirement can be you need a user defined search help instead of dictionary search help. Under such conditions we may have to set search help for select options using OVS search help. For more information of OVS search help refer to the link: http://webdynproabap.wordpress.com/2012/07/01/ovs-search-help/ Scenario: Imagine we have created a input field for the PO number using select options component and it contains the dictionary search help. Now let us see how to
set a ovs search help for the select option.
Code in the method Doinit of the view controller for select options is as below: data lo_cmp_usage type ref to if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_select( ). if lo_cmp_usage->has_active_component( ) is initial. lo_cmp_usage->create_component( ). endif. DATA lo_INTERFACECONTROLLER TYPE REF TO IWCI_WDR_SELECT_OP TIONS . lo_INTERFACECONTROLLER = wd_this->wd_cpifc_select( ).
DATA lv_r_helper_class TYPE ref to if_wd_select_options. lv_r_helper_class = lo_interfacecontroller->init_selection_screen( ). data : rt_ebeln TYPE REF TO data. CALL METHOD lv_r_helper_class->CREATE_RANGE_TABLE EXPORTING I_TYPENAME = EBELN * I_LENGTH = * I_DECIMALS = RECEIVING RT_RANGE_TABLE = rt_ebeln . CALL METHOD lv_r_helper_class->ADD_SELECTION_FIELD EXPORTING I_ID = EBELN IT_RESULT = rt_ebeln * I_VALUE_HELP_TYPE = IF_WD_VALUE_HELP_HANDLER=>CO_P REFIX_NONE . CALL METHOD lv_r_helper_class->SET_GLOBAL_OPTIONS EXPORTING I_DISPLAY_BTN_CANCEL = ABAP_FALSE I_DISPLAY_BTN_CHECK = ABAP_FALSE I_DISPLAY_BTN_RESET = ABAP_FALSE I_DISPLAY_BTN_EXECUTE = ABAP_FALSE . For more information on how to create a search help refer to the link: http://webdynproabap.wordpress.com/2012/07/14/select-options-set/ Now let us see how to set an OVS search help for the select option. Step 1: Go to the DOINIT method of the view controller where we have done the codings to set the select options. The code snippet for adding the select option field in the screen is as below.
I_VALUE_HELP_TYPE is an exporting parameter which determines the type of the input help the select option field is supposed to have.
Uncomment the line and double click on the attribute for forward navigation to see for more options available. Some options available in the interface are:
Pass the input help types as OVS.
Step 2: In the methods tab of the view controller, create an event handler method and assign it to the event on_ovs of select options as shown below.
Assign this event handler method to the select option.
Step 3: Double click on the method to write the coding inside this method. Copy paste the codings that will be genereted by the system for OVS search help and we will modify it accordingly. Code genereated by system for OVS Search help: * declare data structures for the fields to be displayed and * for the table columns of the selection list, if necessary types:
begin of lty_stru_input, * add fields for the display of your search input here field1 type string, end of lty_stru_input. types: begin of lty_stru_list, * add fields for the selection list here column1 type string, end of lty_stru_list. data: ls_search_input type lty_stru_input, lt_select_list type standard table of lty_stru_list, ls_text type wdr_name_value, lt_label_texts type wdr_name_value_list, lt_column_texts type wdr_name_value_list, lv_window_title type string, lv_table_header type string. field-symbols: <ls_query_params> type lty_stru_input, <ls_selection> type lty_stru_list. case ovs_callback_object->phase_indicator. when if_wd_ovs=>co_phase_0. configuration phase, may be omitted * in this phase you have the possibility to define the texts, * if you do not want to use the defaults (DDIC-texts) ls_text-name = `FIELD1`. must match a field name of search ls_text-value = `MYTEXT`. wd_assist->get_text( `001` ). insert ls_text into table lt_label_texts. ls_text-name = `COLUMN1`. must match a field in list structure ls_text-value = `MYTEXT2`. wd_assist->get_text( `002` ). insert ls_text into table lt_column_texts. * * lv_window_title = wd_assist->get_text( `003` ). lv_table_header = wd_assist->get_text( `004` ).
ovs_callback_object->set_configuration( label_texts = lt_label_texts column_texts = lt_column_texts window_title = lv_window_title table_header = lv_table_header ). when if_wd_ovs=>co_phase_1. set search structure and defaults * In this phase you can set the structure and default values * of the search structure. If this phase is omitted, the search * fields will not be displayed, but the selection table is * displayed directly. * Read values of the original context (not necessary, but you
* may set these as the defaults). A reference to the context * element is available in the callback object. ovs_callback_object->context_element->get_static_attributes( importing static_attributes = ls_search_input ). * pass the values to the OVS component ovs_callback_object->set_input_structure( input = ls_search_input ). when if_wd_ovs=>co_phase_2. * If phase 1 is implemented, use the field input for the * selection of the table. * If phase 1 is omitted, use values from your own context. if ovs_callback_object->query_parameters is not bound. ******** TODO exception handling endif. assign ovs_callback_object->query_parameters->* to <ls_query_params>. if not <ls_query_params> is assigned. ******** TODO exception handling endif. * * call business logic for a table of possible values lt_select_list = ???
ovs_callback_object->set_output_table( output = lt_select_list ). when if_wd_ovs=>co_phase_3. * apply result if ovs_callback_object->selection is not bound. ******** TODO exception handling endif. assign ovs_callback_object->selection->* to <ls_selection>. if <ls_selection> is assigned. * ovs_callback_object->context_element->set_attribute( * name = `COLUMN1` * value = <ls_selection>-column1 ). * or * ovs_callback_object->context_element->set_static_attributes( * static_attributes = <ls_selection> ). endif. endcase. Modify the code as below: Set the required structure for the sub-search and the output table.
Note: Ref to OVS Search help document.
If you compare the importing parameter for the event handler method for normal OVS and OVS using search help. Importing parameter for OVS Search help:
Importing parameter in the method for OVS Search help in select option.
Importing parameters will be different. In an normal ovs search help all the phases of the search help will be called using the object OVS_CALLBACK_OBJECT referring to type IF_WD_OVS but here in select option is the value of this call back object is stored in the structure I_OVS_DATA. Double click on the associated type of I_OVS_DATA to see its structure.
Click on the direct type entry to see the structure.
The object reference required to call the phases of the OVS search help will be seen in the structure of same type if_wd_ovs.
So replace all the occurrence of OVS_CALLBACK_OBJECT in the coding by I_OVS_DATA-M_OVS_CALLBACK_OBJECT.
Change the Phase 0 Coding as below:
As I dont require any subsearch field in the search help I have commented the codings in the phase 1. Write the business logic to populate the output table in the phase 2.
The usage of first three phase is similar to that of a normal ovs search help for an attribute where as there is a lot of difference in the phase 3 where we bind the data back to the input field. In a normal ovs search help for the input field created using attribute the system will generate the coding to bind values to the attribute whereas when using select option we dont have the context attribute. If you see in the structure for I_OVS_DATA there will be a component mt_selected_values which will carry the data to the input field.
Change the phase 3 coding as below.
Code: TYPES: BEGIN OF LTY_STRU_INPUT, EBELN TYPE EBELN, END OF LTY_STRU_INPUT. TYPES: BEGIN OF LTY_STRU_LIST,
EBELN TYPE EBELN, END OF LTY_STRU_LIST. DATA: LS_SEARCH_INPUT TYPE LTY_STRU_INPUT, LT_SELECT_LIST TYPE STANDARD TABLE OF LTY_STRU_LIST, LS_TEXT TYPE WDR_NAME_VALUE, LT_LABEL_TEXTS TYPE WDR_NAME_VALUE_LIST, LT_COLUMN_TEXTS TYPE WDR_NAME_VALUE_LIST, LV_WINDOW_TITLE TYPE STRING, LV_TABLE_HEADER TYPE STRING. FIELD-SYMBOLS: <LS_QUERY_PARAMS> TYPE LTY_STRU_INPUT, <LS_SELECTION> TYPE LTY_STRU_LIST. CASE I_OVS_DATA-M_OVS_CALLBACK_OBJECT->PHASE_INDICATOR. WHEN IF_WD_OVS=>CO_PHASE_0. LS_TEXT-NAME = ÈBELN`. LS_TEXT-VALUE = `PO NUMBER`. INSERT LS_TEXT INTO TABLE LT_LABEL_TEXTS. LS_TEXT-NAME = ÈBELN`. LS_TEXT-VALUE = `PO NUMBER`. INSERT LS_TEXT INTO TABLE LT_COLUMN_TEXTS. I_OVS_DATA-M_OVS_CALLBACK_OBJECT->SET_CONFIGURATION( LABEL_TEXTS = LT_LABEL_TEXTS COLUMN_TEXTS = LT_COLUMN_TEXTS WINDOW_TITLE = LV_WINDOW_TITLE TABLE_HEADER = LV_TABLE_HEADER ). WHEN IF_WD_OVS=>CO_PHASE_1. WHEN IF_WD_OVS=>CO_PHASE_2. SELECT EBELN FROM EKKO INTO TABLE LT_SELECT_LIST. I_OVS_DATA-M_OVS_CALLBACK_OBJECT->SET_OUTPUT_TABLE( OUTP UT = LT_SELECT_LIST ). WHEN IF_WD_OVS=>CO_PHASE_3. FIELD-SYMBOLS : <LT_SEL_OPT_RESULT> TYPE STANDARD TABLE. ASSIGN I_OVS_DATA-M_OVS_CALLBACK_OBJECT->SELECTION->* TO <L S_SELECTION>. IF <LS_SELECTION> IS ASSIGNED.
ASSIGN I_OVS_DATA-MT_SELECTED_VALUES->* TO <LT_SEL_OPT_RESU LT>. INSERT <LS_SELECTION>-EBELN INTO TABLE <LT_SEL_OPT_RESULT>. ENDIF. ENDCASE. Save and activate the whole component. Test the application. Output:
OVS Search help for multiple fields in Select options

Rate This Post
In the previous post we have seen how to set an OVS Search help for a select option field. The event handler method for event ovs will be called when the user presses the F4 help on the screen. Now suppose if we have more than one selection field and if
you want ovs search help for all of them how do you do it and this is what is this post is all about. Select options component only have one event ON_OVS for ovs search help and the event handler method for this event will be called when the User presses the f4 help from any input field created using the select options component. You cannot create a select options component usage for each input field and it will be performance intensive. Now let us see how to create an ovs search help for multiple fields in a select option. For more information on how to set the OVS Search help for select option refer to the post http://webdynproabap.wordpress.com/2012/10/27/ovs-select/ Before going through this document I strongly recommend you to go through the post OVS Search help for select options. Assume that we have two fields on the screen PO document number and Vendor number and we want to provide OVS Search help for them.
Set the search help mode for the select options field as ovs search as shown in the previous post. Below is the code in DOINIT method for setting select options field.
data lo_cmp_usage type ref to if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_select( ). if lo_cmp_usage->has_active_component( ) is initial. lo_cmp_usage->create_component( ). endif. DATA lo_INTERFACECONTROLLER TYPE REF TO IWCI_WDR_SELECT_OP TIONS . lo_INTERFACECONTROLLER = wd_this->wd_cpifc_select( ).
DATA lv_r_helper_class TYPE ref to if_wd_select_options. lv_r_helper_class = lo_interfacecontroller->init_selection_screen( ). data : rt_ebeln TYPE REF TO data. CALL METHOD lv_r_helper_class->CREATE_RANGE_TABLE EXPORTING I_TYPENAME = EBELN * I_LENGTH = * I_DECIMALS = RECEIVING RT_RANGE_TABLE = rt_ebeln . CALL METHOD lv_r_helper_class->ADD_SELECTION_FIELD EXPORTING I_ID = EBELN IT_RESULT = rt_ebeln I_VALUE_HELP_TYPE = IF_WD_VALUE_HELP_HANDLER=>CO_PRE FIX_OVS . data : rt_lifnr TYPE REF TO data. CALL METHOD lv_r_helper_class->CREATE_RANGE_TABLE EXPORTING I_TYPENAME = LIFNR * I_LENGTH = * I_DECIMALS = RECEIVING RT_RANGE_TABLE = rt_lifnr . CALL METHOD lv_r_helper_class->ADD_SELECTION_FIELD EXPORTING I_ID = LIFNR IT_RESULT = rt_lifnr I_VALUE_HELP_TYPE = IF_WD_VALUE_HELP_HANDLER=>CO_PRE FIX_OVS . CALL METHOD lv_r_helper_class->SET_GLOBAL_OPTIONS EXPORTING I_DISPLAY_BTN_CANCEL = ABAP_FALSE I_DISPLAY_BTN_CHECK = ABAP_FALSE I_DISPLAY_BTN_RESET = ABAP_FALSE I_DISPLAY_BTN_EXECUTE = ABAP_FALSE .
Step 1: Create an event handler method for the OVS Event of Select options.
In the Event handler method for the OVS event of select option first identify the field from where the F4 help for the select option is triggered. If you see the structure of the importing parameter I_OVS_DATA it contains a field called m_selection_field_id which will contain the field id from where the F4 help is triggered.
Now using this we will be able to identify the field from where the F4 help is triggered. Therefore we will create an individual methods for each field with the importing paratmeter I_OVS_DATA and call these method based on condition. Create a method for EBELN input field.
Create an Importing parameter for the method.
Write the Coding for OVS Search help in that method. Refer the following link for more information: http://webdynproabap.wordpress.com/2012/10/27/ovs-select/ types: begin of lty_stru_input, ebeln type ebeln, end of lty_stru_input. types: begin of lty_stru_list, ebeln type ebeln, end of lty_stru_list. data: ls_search_input type lty_stru_input, lt_select_list type standard table of lty_stru_list, ls_text type wdr_name_value, lt_label_texts type wdr_name_value_list, lt_column_texts type wdr_name_value_list, lv_window_title type string, lv_table_header type string. field-symbols: <ls_query_params> type lty_stru_input, <ls_selection> type lty_stru_list. case I_OVS_DATA-M_OVS_CALLBACK_OBJECT->phase_indicator. when if_wd_ovs=>co_phase_0. ls_text-name = ÈBELN`. ls_text-value = `PO NUMBER`. insert ls_text into table lt_label_texts.
ls_text-name = ÈBELN`. ls_text-value = `PO NUMBER`. insert ls_text into table lt_column_texts. I_OVS_DATA-M_OVS_CALLBACK_OBJECT->set_configuration( label_texts = lt_label_texts column_texts = lt_column_texts window_title = lv_window_title table_header = lv_table_header ). when if_wd_ovs=>co_phase_1. when if_wd_ovs=>co_phase_2. select ebeln from ekko INTO TABLE lt_select_list. I_OVS_DATA-M_OVS_CALLBACK_OBJECT->set_output_table( output = lt_sele ct_list ). when if_wd_ovs=>co_phase_3. FIELD-SYMBOLS : <LT_SEL_OPT_RESULT> TYPE STANDARD TABLE. assign I_OVS_DATA-M_OVS_CALLBACK_OBJECT->selection->* to <ls_selectio n>. if <ls_selection> is assigned. ASSIGN I_OVS_DATA-MT_SELECTED_VALUES->* TO <LT_SEL_OPT_RESU LT>. INSERT <LS_SELECTION>-EBELN INTO TABLE <LT_SEL_OPT_RESULT>. endif. endcase. Similarly create a method for the LIFNR. Step 2: In the event handler method for the OVS event of select options do the
following. Code:
if i_ovs_data-m_selection_field_id = EBELN. WD_THIS->OVS_EBELN( I_OVS_DATA ). ELSEIF i_ovs_data-m_selection_field_id = LIFNR. WD_THIS->OVS_LIFNR( I_OVS_DATA ). ENDIF. Save and activate the whole component. Test the application.
Business Graphics
Rate This Post Scenario : Let us create a table with some records in it. Based on the selected record, the data in the selected row should be displayed in a Graphical format. The graphical format by default will be Column type which we can change later. Step 1: Create a webdynpro component as shown below
Step 2: Create a Context node EKPO with some attributes.
Step 3: Insert a table UI element and bind the context node to the table.
Step 4 : Populate the context node in the WDDOINIT method.
Step 5: Save and activate the whole component and test the application. Output:
Step 6: Create a context node similar to that of the node EKPO to bind the values to the Graphics UI element. You can create a node in a similar you created the EKPO or you can create a context node by copying a similar node.
Copy the context node from the view.
Select the node from the popup which you want to copy.
Rename the context node and save it.
Enter the name for the node.
Step 7 : In the layout tab of the view controller insert the Business graphics UI element.
In the layout tab, Insert the business graphics UI element.
For the X axis, Insert the category UI element in the Business graphics.
For Y axis, Insert Simple series UI element.
Similiarly create series for all the Context attributes.
Bind the category X axis to the PO number.
Similiarly bind the series1 and series2 to menge and netpr(Y Axis).
Map the properties of the Business UI element to the series source property.
Select the UI element table and create an action for onlead.
In the action onlead, read the row which is selected and set it back to the context node business which is mapped to the business graphics UI element. method ONACTIONONLEAD . DATA LO_ND_EKPO TYPE REF TO IF_WD_CONTEXT_NODE. DATA LO_EL_EKPO TYPE REF TO IF_WD_CONTEXT_ELEMENT. DATA LS_EKPO TYPE WD_THIS->ELEMENT_EKPO. * navigate from <CONTEXT> to <EKPO> via lead selection LO_ND_EKPO = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_EKPO ). * get element via lead selection LO_EL_EKPO = LO_ND_EKPO->GET_ELEMENT( ). * get all declared attributes LO_EL_EKPO->GET_STATIC_ATTRIBUTES( IMPORTING STATIC_ATTRIBUTES = LS_EKPO ). DATA LO_ND_BUSINESS TYPE REF TO IF_WD_CONTEXT_NODE. DATA LT_BUSINESS TYPE WD_THIS->ELEMENTS_BUSINESS. * navigate from <CONTEXT> to <BUSINESS> via lead selection LO_ND_BUSINESS = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THI S->WDCTX_BUSINESS ). append ls_ekpo to lt_business. * LO_ND_BUSINESS->BIND_TABLE( NEW_ITEMS = LT_BUSINESS SET_INITI AL_ELEMENTS = ABAP_TRUE ). endmethod. Step 8: Save and activate the whole application. Test the output. Output :
Select the lead, you ll be able to see the graph for the lead selected values.
About these ads
Progress Indicator and Timed trigger UI element

Rate This Post The ProgressIndicator UI element shows how much progress an activity has made in the form of a horizontal bar, along with the value that you have assigned to the percentValue property. You can use the displayValue property to display a text in the ProgressIndicator on the left side of the UI element. This makes it possible to provide
descriptions with specific percentage values. You can hide the DisplayValue value using the showValue property. You can display the ProgessIndicator UI element in different colors using the barColor property. You can assign a popup menu to a ProgressIndicator. You can use the ProgressIndicator UI element to display, for example, a project status in percent. Example of the Display
Step 1 : Create a webdynpro component as shown below.
Step 2 : Go to the view layout and insert a Progress indicator UI element.
Step 3 : In the context node declare the attribute count, and bind it to the progress indicator UI element.
Step 4 : Go to the layout and bind the context attribute to the Percent value property of the UI element.
Step 5 : Go to actions tab and Create a method and write the following code to increment the count so that the percentage value of the progress indicator will increase.
Inside the method read the context attribute which we wants to increment using the code wizard.
Increment the count attribute and set it back to the context.
Setting the context attribute count.
Remove the declaration part which has been already declared, and set the attribute with an if condition that you have to set only if it is less than or equal to 100 else the progress indicator bar will return back once it reaches the hundred.
Codings in the method increment. method ONACTIONINCREMENT . * Read the context attribute Count. DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT. DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT. DATA LV_COUNT TYPE WD_THIS->ELEMENT_CONTEXT-COUNT. * get element via lead selection LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ). * @TODO handle not set lead selection IF LO_EL_CONTEXT IS INITIAL. ENDIF.
* get single attribute LO_EL_CONTEXT->GET_ATTRIBUTE( EXPORTING NAME = `COUNT` IMPORTING VALUE = LV_COUNT ). * Increment the count lv_count = lv_count + 10. * Set the context attribute count. if lv_count LE 100. * set single attribute LO_EL_CONTEXT->SET_ATTRIBUTE( NAME = `COUNT` VALUE = LV_COUNT ). endif. endmethod. Step 6 : Now go to the layout and insert a timed trigger UI element, which is used to trigger an event in a regular interval. Timed trigger UI element. The TimedTrigger UI element automatically and periodically triggers an event with a specified delay. The TimedTrigger UI element is not displayed on the user interface. Therefore, it ignores the tooltip and the visibiltyproperty. However, in specific layouts such as the matrix layout it takes up space. To trigger an action, you must bind the onAction property to an action. You use the delay property to specify the delay in seconds.
In the property of timed trigger, add the onaction event as the method which we created previously and and set the delay property as 1 sec so that the method will get called every one second and our count will get increase and the view gets refreshed so that we can see the progress bar moving.
Save and activate the whole component. Create an application to test the component. Note : timed trigger UI element will not be visible in the screen. Create a webdynpro application.
Output :
Reading the application parameter from the Portal

Rate This Post In this blog we will learn how to read the application parameter from the portal. Let us see how to read a parameter from the URL in an already created component. Lets see how to read the user who is logging into the portal and triggering the link for our application. Pre-requisites: The portal must be configured in a way to pass the parameter. Step 1: Go to the window of the component and select the method handle default. This is the first method which is triggered when a component load, even before the DOINIT method.
Step 2: In Handle default method create a importing parameter to get the value from the portal the importing parameter must be created in a same name that the portal passes the parameter.
Step 3: Go to the application. In parameters tab add the variable declared in Handle default method using F4 help.
Step 4: Whatever the value that comes in the portal will be captured by the parameter we declared. It can be used only within the windows, to use that variable in our view we have to move it to the controller. To move it to the controller, create a variable in the component controller as shown below.
Step 5: Now move the application parameter to the variable declared in the component controller. Wd_component_controller is the object referring to the component controller. Using that object access the attribute of the component controller and assign the importing parameter of the handle default method to it. Now value is passed from window to the controller.
Step 6: Now we have to set the value in some variable so that the value can be used across
any nos of views. Create a node in the component controller with an attribute to hold the value.
Step 7: Handle default method is executed after the method wddoinit. Hence we can make use of method wddomodifyview to set the value to the context node.
Code: method WDDOMODIFYVIEW . data : lv_user type uname. * Move the value from component controller attribute to the variable. lv_user = wd_comp_controller->lv_user. * set the value to the context node. DATA lo_nd_uname TYPE REF TO if_wd_context_node. DATA lo_el_uname TYPE REF TO if_wd_context_element. DATA ls_uname TYPE wd_this->Element_uname. * navigate from to via lead selection lo_nd_uname = wd_context->get_child_node( name = wd_this->wdctx_uname ). * get element via lead selection lo_el_uname = lo_nd_uname->get_element( ). * set single attribute lo_el_uname->set_attribute( name = `LV_USER` value = lv_user ). endmethod. Now Parameter has been set in the context node and can be accessed in any number of views.
A Simple ALV Report

Rate This Post Step 1: Go to the Tcode SE80 and create a webdynpro component.
Assign the component to the package or save it in the local object. Step 2: In the main component, Add the component SALV_WD_TABLE to the used components table and provide a component use name and press enter. You can now see the component usage created for the component.
Step 3: Go to the context tab of the component controller and create a context node and attributes as shown below.
Enter the node properties as below and click on add attribute from the structure.
Choose the required attributes and press enter.
Context node and its attributes will be created as below.
Step 3: In the properties tab of the view controller create a controller usage for the used component.
Double click on the interface controller to create a component usage with controller access.
Controller usage will be created as below.
By doing so it will create two methods in the interface for the view controller.
The first method wd_cpifc_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference for the interface controller of the ALV component. The second method wd_cpuse_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference component usage for the ALV component created in our controller. By the above step you would now be able to see the component usage for the ALV component created in our component which will not be earlier adding the interface controller to our view controller.
Step 4 : Go to the layout tab of the view controller and create a view container UI element as shown below.
The purpose of this view container UI element is to hold the view of the another component or another view of the same component. Since we are reusing the functionality of the standard webdynpro component the result will be displayed in the view of that component. In order to display the result in our window we created a view container element and bring the view of the ALV component in our window. Step 5: Go the window tab of the window controller, to add the view of the ALV component to the view container UI element which we have created earlier. Right click on the view container and select embed view to add the view.
Select the view to be embedded as table from the pop up.
Table view of component SALV_WD_TABLE will be embedded in the view container as below.
Step 6: Go to the Interface controller usage of the component usage. Here you will see a context node called data. This context node is of generic type and it is being binded with the ALV table. If we map the data in our context node to this context node it will
be displayed in the ALV table which can be seen in our view container.
Click on the controller usage button and choose component controller as the controller usage.
Drag and drop the context node EKPO of component controller to the DATA node of the ALV table.
You can now see the binding created between these two nodes.
Step 7: Go to the Do init method of the component controller and initialize some values to the context node to be displayed in the table.
Note: I have removed the unwanted code. Initialize some values as shown below.
Code: DATA lo_nd_ekpo TYPE REF TO if_wd_context_node. DATA lt_ekpo TYPE wd_this->Elements_ekpo. lo_nd_ekpo = wd_context->get_child_node( name = wd_this->wdctx_ekpo ). SELECT * from ekpo into CORRESPONDING FIELDS OF TABLE lt_ekpo UP TO 5 ROWS. lo_nd_ekpo->bind_table( new_items = lt_ekpo set_initial_elements = abap_true ). Save and activate the whole component.
Step 8: Create a webdynpro application to test the component.
Output:
Changing the header of the Column ALV Report

Rate This Post The Output of the ALV report which we created in the earlier post is as below. Link: http://webdynproabap.wordpress.com/2012/10/28/a-simple-alv-report/
Now let us see how to change the standard text for the header that comes from the dictionary. Go to the doinit method of the view controller and set the properties for the ALV table. We can also do it in the doinit method of the component controller by adding the alv controller usage to the properties of the component controller.
Step 1: Instantiate the used component.
This coding calls the method created for the component usage for ALV Component. It checks for the active component usage and if there is no active component usage then it creates one. Step 2: Method call in the used controller. The ALV table has an interface method called get_model which will return the ALV configuration model.
Call the get model method of the ALV component using the code wizard method call in used controller.
The object reference for the ALV configuration table class is now contained in the variable LV_VALUE.
This class now contains a number of interfaces which contains method for setting the different properties of the ALV table.
In order to change the header text of the column, we will use the method get_column of the interface if_salv_wd_column_settings. This method will return the object reference to the column.
Using pattern call the method get_column of the interface.
Modify the coding as below.
Now we have obtained the object reference for the column. Using the object reference for the column get the object reference for the header of the column. Call the method
get_header of the class to get the object reference of the header.
Coding will be generated as below. Change the coding as below.
Now we have obtained the object reference of the header. Using the method set_text of the class for header set the user defined text for the column.
Coding will be generated as below. Change the default binding value for the column as none as shown below.
Save and activate the whole component. CODE: * Instantiate the used component. DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE. LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV( ). IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL. LO_CMP_USAGE->CREATE_COMPONENT( ). ENDIF.
* Method call in the used controller DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABL E. LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ). DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE. LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL( ). * Getting the object reference of the column. DATA LO_EBELN TYPE REF TO CL_SALV_WD_COLUMN. CALL METHOD LV_VALUE>IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN EXPORTING ID = EBELN RECEIVING VALUE = LO_EBELN. * Getting the object reference for the header DATA : LO_HEADER TYPE REF TO CL_SALV_WD_COLUMN_HEADER. CALL METHOD LO_EBELN->GET_HEADER RECEIVING VALUE = LO_HEADER. * Setting the user defined text CALL METHOD LO_HEADER->SET_TEXT EXPORTING VALUE = PO Number. LO_HEADER->SET_PROP_DDIC_BINDING_FIELD( PROPERTY = IF_SALV_WD_C_DDIC_BINDING=>BIND_PROP_TEXT VALUE = IF_SALV_WD_C_DDIC_BINDING=>DDIC_BIND_NONE ). Output:
Coloring the column cell ALV

Rate This Post The Output of the ALV report which we created in the earlier post is as below. Link: http://webdynproabap.wordpress.com/2012/10/28/a-simple-alv-report/
Now let us see how to change the color of the column. Go to the doinit method of the view controller and set the properties for the ALV table. We can also do it in the doinit method of the component controller by adding the alv controller usage to the properties of the component controller.
Step 1: Instantiate the used component.
This coding calls the method created for the component usage for ALV Component. It checks for the active component usage and if there is no active component usage then it creates one. Step 2: Method call in the used controller. The ALV table has an interface method called get_model which will return the ALV configuration model.
In order to change column properties, we will use the method get_column of the interface if_salv_wd_column_settings. This method will return the object reference to the column.
Now we have obtained the object reference for the column. Using the method set cell design of the column change the background color of the cell.
Change the generated coding as below.
Save and activate the whole component. Test the application. Code: * Instantiate the used component. DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE. LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV( ). IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL. LO_CMP_USAGE->CREATE_COMPONENT( ). ENDIF. * Method call in the used controller DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABL E. LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ). DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE. LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL( ).
* Getting the object reference of the column. DATA LO_EBELN TYPE REF TO CL_SALV_WD_COLUMN. CALL METHOD LV_VALUE>IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN EXPORTING ID = EBELN RECEIVING VALUE = LO_EBELN. CALL METHOD LO_EBELN->SET_CELL_DESIGN EXPORTING VALUE = CL_WD_TABLE_COLUMN=>E_CELL_DESIGN-POSITIVE . Output:
ALV With Link to Action

Rate This Post
The Output of the ALV report which we created in the earlier post is as below. Link: http://webdynproabap.wordpress.com/2012/10/28/a-simple-alv-report/
Now let us see how to create a link to action in the ALV table. Go to the doinit method of the view controller and set the properties for the ALV table. We can also do it in the doinit method of the component controller by adding the alv controller usage to the properties of the component controller. Step 1: Instantiate the used component.
This coding calls the method created for the component usage mentioned earlier in the post. It checks for the active component usage and if there is no active component usage then it creates one. Step 2: Method call in the used controller.
The ALV table has an interface method called get_model which will return the ALV configuration model.
In order to change column properties, we will use the method get_column of the interface if_salv_wd_column_settings. This method will return the object reference to the column.
Now we have obtained the object reference for the column using which we can set the cell editor of the column using the method set_cell_editor of the class cl_salv_wd_column. This method requires an importing parameter with the generic type for the cell editor. We need to create a object of type of cell editor required and pass it to this method so
that the corresponding type will be set as a cell editor to the column.
Every type of UI element has a class associated with it which begins with the name cl_salv_wd_uie_* . Create an object for that class and pass it to the set cell editor method of the class.
Call the method set text of the class for link to action to set the text for the hyper link.
Call the set cell editor method and pass the object for link to action to that method.
Pass the object to it. Save and activate the whole component and test the application.
Output:
Code: * Instantiate the used component. DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE. LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV( ). IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL. LO_CMP_USAGE->CREATE_COMPONENT( ). ENDIF. * Method call in the used controller DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABL E. LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ). DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE. LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL( ). * Getting the object reference of the column. DATA LO_EBELN TYPE REF TO CL_SALV_WD_COLUMN. CALL METHOD LV_VALUE>IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN EXPORTING ID = EBELN RECEIVING VALUE = LO_EBELN. * Creating an object of cell editor type required.
DATA : LO_LINK TYPE REF TO CL_SALV_WD_UIE_LINK_TO_ACTION. CREATE OBJECT LO_LINK. * Set the text for hyperlink CALL METHOD LO_LINK->SET_TEXT_FIELDNAME EXPORTING VALUE = EBELN . * Setting the cell editor of the CALL METHOD LO_EBELN->SET_CELL_EDITOR EXPORTING VALUE = LO_LINK. To proceed with the action of what has to happen next on the click of link we need to know the where exactly or what value the user has selected. Once we get to know that we can proceed with the action we want. Be it display the item details on a separate table or whatever the requirement is. Now let me throw a message on what value the user has selected. Go to the methods tab of the View controller and create an event handler method.
Assign the event handler method to the ON_CLICK event of the ALV component. Because this is the event triggered by the system when the user click on the Cell in the ALV component. By registering this event to our event handler method, our event handler method will be called when the user performs the action on the cell and what
has to happen next can be controlled here.
If you see the importing parameter of this event handler method there will be an importing parameter call r_param which is a reference variable of some ALV
Interface.
The attributes of this interface will provide us with the sufficient information which we need to know like which row, particular column in the ALV table the user has performed. Attributes of this interface is as below.
The attribute Value will gives us the value of the cell that the user has selected. This attribute is of type data reference variable and we can get it in a field symbol. Code as below in the event handler method:
Now the field symbol will be containing the value of the selected cell. Display the message as shown below.
Using code wizard generate the codes.
Modify the generated code as below.
Save and activate the whole component. Output:
About these ads
ALV Cell Editable

Rate This Post In the previous blog we have seen how to display a simple ALV report, In this blog we will see how to make a column of an ALV Table as a Editable. We will proceed with the same component which we created in the previous blog. Go to the method WDDOINIT and at the end of the business logic we have written in this method do the following. Step 1 : Instantiate the used component to ensure that the component usage of the ALV is active. Go to code wizard and select the radio button instantiate the used component and provide the component using F4 help.
From the F4 help choose the component which we need to instantiate.
The following code will be generated as below.
Whenever a component has been added to the interface controller of the view, a method will be created in the interface of the view whose naming convention will be wd_cpuse_ followed by the component name which we provided. You can see the interface created for the view in the attributes tab, the name of the interface will be if_ followed by the view name. This method will return the object reference for the component usage. Using this object reference we are checking the method has active component which will return x in case if the component is active and space in case there are no active components. If there is no active component in that case we will create the component using create component method. Step 2 : Call the method in the used controller. Choose the radio button Method call in the used controller.
Select the interface controller of the ALV.
Choose the method get_model and press enter.
Following code will be generated.
Similar to that of the method which returns the component usage object reference, a method with naming convention wd_cpifc_ will be generated in the interface for the view which returns the object reference for the interface of the ALV Component. Using the interface object reference, calling the method get model will give the object reference for the class CL_SALV_WD_CONFIG_TABLE. CL_SALV_WD_CONFIG_TABLE : Is the class where the standard functionalites of the ALV component can be modified. In previous step we have created object to this class name lv_value. Using this object now we can access the method of this class and modify the functionality. Step 3:
Now to make the column editable we need to get the columns in the ALV table. To access the columns do the following. Click on pattern, then choose the radio button abap object patterns and press enter. Enter the class name CL_SALV_WD_CONFIG_TABLE.
Choose the get_columns method which belongs to an interface if_salv_wd_column_settings using the F4 help.
Following codes will be generated.
Do the following modifications in the code. Replace the object reference me with the object that was generated earlier to the configuration table class. Replace the object reference me with the object lv_value we created for the class cl_salv_wd_config_table. Create a table similar to the receiving parameter of the method IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMNS. You can see this by double clicking on the method and seeing the associated type of the parameter value.This methods return the values of type SALV_WD_T_COLUMN_REF which is a table type and SALV_WD_S_COLUMN_REF is a line type for the same. Create an internal table of this type and receive the values using the method.
* Call the method Get_coulms of Interface if_wd_table_column_settings * to change the property of the columns. data : lt_columns type SALV_WD_T_COLUMN_REF, ls_columns type SALV_WD_S_COLUMN_REF. CALL METHOD LV_VALUE>IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMNS RECEIVING VALUE = lt_columns. The received parameter line type consist of two fields.
The field ID stores the value of the Column ID which is nothing but the attribute names of the context which we are binding say for Example BUKRS. The second field R_COLUMN refers to the class CL_SALV_WD_COLUMN which actually contains the methods related to the column of alv. This class CL_SALV_WD_COLUMN contains a method call SET_CELL_EDITOR which is used to Set the type of UI element that column should posses. This method require an object as an Importing parameter and that object should point to a UI element class for ALV. If you go to the Tcode SE24 and search with CL_SALV_WD_UIE* you will be able to find the list of classes available for different UI element for ALV. Create a reference variable for the class CL_SALV_WD_UIE_INPUT_FIELD. data : lo_bukrs type ref to cl_salv_wd_uie_input_field. loop at lt_columns into ls_columns. case ls_columns-id. when bukrs.
* Creating an object for the class passing the input parameter for the constructor of the class create object lo_bukrs exporting value_fieldname = ls_columns-id. * Passing the object to the set cell editor method. ls_columns-r_column->set_cell_editor( lo_bukrs ). endcase. endloop. Still we will not be able to see the column as editable because the table read only property will shade the input mode property which we have set for out column. So we have to change the property of the ALV table using the interface IF_SALV_WD_TABLE_SETTINGS. Call the method set_read_only and set the exporting parameter value as ABAP_FALSE which would previously be ABAP_TRUE.
Modify the code as shown below.
Now save and activate the component. Test the application. Codings In WDDOINIT Method. method wddoinit . data lo_nd_ekko type ref to if_wd_context_node. data lt_ekko type wd_this->elements_ekko. lo_nd_ekko = wd_context->get_child_node( name = wd_this->wdctx_ekko ). select * from ekko into corresponding fields of table lt_ekko up to 5 rows. lo_nd_ekko->bind_table( new_items = lt_ekko set_initial_elements = abap_true ). * making and column editable. * instantiate the used component alv. data lo_cmp_usage type ref to if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_alv( ). if lo_cmp_usage->has_active_component( ) is initial. lo_cmp_usage->create_component( ). endif. * call the method in the current controller data lo_interfacecontroller type ref to iwci_salv_wd_table . lo_interfacecontroller = wd_this->wd_cpifc_alv( ). data lv_value type ref to cl_salv_wd_config_table. lv_value = lo_interfacecontroller->get_model( ). * call the method get_coulms of interface if_wd_table_column_settings * to change the property of the columns. data : lt_columns type salv_wd_t_column_ref, ls_columns type salv_wd_s_column_ref. call method lv_value->if_salv_wd_column_settings~get_columns receiving value = lt_columns. data : lo_bukrs type ref to cl_salv_wd_uie_input_field. loop at lt_columns into ls_columns. case ls_columns-id.
when bukrs. create object lo_bukrs exporting value_fieldname = ls_columns-id. ls_columns-r_column->set_cell_editor( lo_bukrs ). endcase. endloop. call method lv_value->if_salv_wd_table_settings~set_read_only exporting value = abap_false. endmethod. Output:
In the output we can see the company code in Editable mode.
Drop down by Index and Button in ALV

Uncategorized August 3, 2012
Rate This Post
Introduction: In this topic we are going to discuss how to set a drop down and button in the ALV report using Webdynpro ABAP. SALV_WD_TABLE is a standard webdynpro component which can be reused in our component to create a ALV report. This component by default will have the columns of the report as a text view UI element. Now let us see how to access these column and convert it into a drop down UI element. Scenario : Like in the post drop down by index in table we will create a report which displays the observation and set the status field as drop down containing values open and close. Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to a package or save it in a local object. Step 2: To reuse the functionality of the standard webdynpro component into our component include the standard webdynpro component SALV_WD_TABLE in the used component of the component framework.
For the methods of the used external component to be accessed in our view add the interface controller of the alv component to our component. Actually, there are ways of using the external component. 1. Component usage with the controller access. 2. Component usage without the controller access. Component usage without the controller access. If we only wants to display the external component without modifying the data of its interface controller or use its functions we can omit the declaration of the interface controller in our controller.
Component usage without the controller access. If we wants to modify the data or use its function then we have to declare the interface controller of the external component in the properties tab of our view.
In our case as we are going to access the functionality of the external component we need the interface controllers access. Click on create controller usage.
Double click on the interface controller in the popup to add the interface controller of the ALV to our view.
Doing so will create a two methods in the interface created for the view at the time of creation of component. You can see the view in the attributes tab of the view controller if_ followed by the name of the view.
The two methods are namely,
The first method wd_cpifc_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference for the interface controller of the ALV component. Remember, three type of interface will be created at the time of creation of any component with naming conventions namely. If_ This type of interface is created in every controller followed by the controller name and the methods in this interface can be accessed only within those controller. IG_ this type of interface are created in the component controller and the methods in this interface are accessible across the controller. This interface is used for the cross controller communication within the component. These methods cannot be accessed via other components. IWCI_ followed by the name of the component avoiding z in case of custom component will be created at the time of creation of component. This interface is used for the cross component communication. The first method which I indicated earlier will provide me the object reference for the ALV components interface controller using which component which we are creating now will communicate with the ALV component and access the methods of the ALV component to use its functionality. The second method wd_cpuse_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference component usage for the ALV component created in our controller. By the above step you would now be able to see the component usage for the ALV component created in our component which will not be earlier adding the interface controller to our view controller. Step 3 : Go to the layout tab of the view controller and create a view container UI element as shown below.
The purpose of this view container UI element is to hold the view of the another component or another view of the same component. Since we are reusing the functionality of the standard webdynpro component the result will be displayed in the view of that component. In order to display the result in our window we created a view container element and bring the view of the ALV component in our window. Step 4 : Now go the window tab of the window controller, to add the view of the ALV component to the view container UI element which we have inserted earlier. Expand the view embedded in the window and right click on the view container UI element to embed a view.
Select the view to be embedded using F4 help.
Select the Table View of the ALV component.
Now we have added the Table view of the ALV component which displays the output to the view in our window. Now when the component executes it display the output and it will be displayed in our window. So far we have created the means to display the data in our window. Before that we have to pass the data to the external component so that it will process the data and display it in the table view of the component which can be viewed in our window. To pass the data create a context node in the component controller of required structure. In this scenario I am going to display the serial number, observation and status of which status will be a drop down. Step 5: Create the context node in the component controller as shown below.
Enter the name for the node and choose the cardinality and press enter.
Add attributes to the context node as shown below.
Enter the attribute name and type of attribute and press enter.
Similarly create two other attributes observation and status of type string.
Now go to the context tab of the view controller and drag and drop the context node of the component controller in the view controller to be accessible by the view.
Now pass the data to the external component via component usage. If you see in the interface controller usage which we created for the ALV component, it has a context node call data. Mapping the context node observation which contains our data to the data node of the interface controller will facilitate the data transport to external component. (Note : See binding concept for more clarity on this).
Click on the create controller usage.
Choose the component controller from the Pop-Up.
Map the context node to the data context node.
You will now be able to see the change in the binding direction of the context node data.
Step 6: In the doinit method of the view controller add some records to the context node to be displayed in the ALV output table. Set the node as table operation.
Note : I have removed the unwanted code. Modify the code as below.
Save and activate the whole component. Step 7: Create an application and test the component.
Output:
In this result let us make the status column to be drop down. Step 8 : Go to the context tab of the component controller and add a attribute to the context node to hold the values of the drop. The type of the attribute must be of a table type that holds n no of records for the drop down list. SAP has provided with a standard table type for setting the drop down. WDR_CONTEXT_ATTR_VALUE_LIST This table type has the structure that contains fields.
Value field of the structure is the key indicator and the text field holds the value for the drop down. Create an attribute in the component controller as shown below.
Update the context node in the view controller.
Delete the external mapping to the data node of ALV component usage and redefine it again.
Redefine the mapping by dragging and dropping the context node of the component controller to the data node of the alvs component usage as we did earlier. Step 9 : Go to the doinit method of the view controller and do the following to change the settings of the ALV component. Instantiating the used component:
Regardless of whether we are using the component usage with or without the controller access it has to be instantiated to check whether the component usage is active or not. In the general tab of the code wizard, select the radio button instantiate the used component and select the component use using the F4 help and click on enter button.
This code get the object reference of the component usage using the method which was created in the at the time of adding the interface controller access to the properties tab of my view. Method call in the current controller: To access the functions of the interface controller of the ALV component and to utilize these functions I need the object reference to the interface controller of the ALV component. In the general tab of the code wizard, click on the radio button method call in the current controller and select the interface controller of the alv using the F4 help. Call the method get model to get the object reference for the configuration class of ALV table.
Using the object reference to the configuration call CL_SALV_WD_CONFIG_TABLE all these below mentioned settings to the alv table can be configured. Code from the code wizard will be generated as below.
This code gets the object reference of the alv interface controller using the method which was created in the interface of the view which I mentioned earlier. Using the object reference to the interface controller of the select option it access the method get_model of the cross component interface IWCI_SALV_WD_TABLE which in turn returns the object reference to the configuration class of the ALV table. Now we got the access to the table, we need the object reference of the column in the table to modify that column with the cell editor we want. The table configuration class consist of a interface IF_SALV_WD_COLUMN_SETTINGS which contains a method get_column which will return the object reference to the column.
Using pattern call the get column method of the class for the ALV table.
Code will be generated as follows.
Replace the object reference me with object reference referring to the class and pass the attribute of the context node which will be the ID of the column and get the object reference that the method is returning by creating a variable of returning type. Modify the code as below.
This will now contain the object reference for the column of type cl_slav_wd_column. Using the methods of this class we can modify the settings of the column.
This class contains a method called set cell editor which determine the type of UI element the column is supposed to have. By default it will be a text view. To change the cell editor of the column we need to pass the object reference of class belonging to the UI element type to the importing parameter of this method.
Let us create an object reference for the drop down UI element class. In tcode SE24 for class builder, if you search with CL_SALV_WD_UIE* it will list you the list of class for the cell editor available. Choose the class CL_SALV_WD_UIE_DROPDOWN_BY_IDX for the drop down by index UI element. The constructor method of the class for drop down has an importing parameter selected_key_fieldname to which we need to pass the attribute of the field for which we are going to set the drop down.
Write the coding as below.
Now the object has been created, now we have to specify the valueset for the drop down. There is a method SET_VALUESET_FIELDNAME in the class for the drop
down which determines which attribute of the context node contains the values for the drop down In our case it the valueset attribute. Let us set the valueset attribute to the SET_VALUESET_FIELDNAME so that it will pick the drop down values what we populate in the valueset attribute and display it.
Then set the type of the drop down using the same class method set_type.
This will determine what kind of dropdown is to be displayed in the screen. Now let us pass this object to the set cell editor method of the column and change the cell editor to drop down.
Using the object reference to the column we have now set the cell editor of the column. The ALV table which was displayed by default will be an read only and it will overshade the drop down UI element which was created so let us disable the read only property of the table. The the object reference of the configuration class for the table set the read only property of the table to be false.
Now put the value set for the drop down in the attribute valueset and bind it to the context node.
Load the drop down valueset in the internal table of type which we have provided for valueset attribute and pass it to the valueset attribute and bind it. Save and activate the whole component and test the application. Output :
Codings in DOINIT method. DATA LO_ND_OBSERVATION TYPE REF TO IF_WD_CONTEXT_NODE. DATA LT_OBSERVATION TYPE WD_THIS->ELEMENTS_OBSERVATION. DATA LS_OBSERVATION TYPE WD_THIS->ELEMENT_OBSERVATION. * Getting the object reference of the context node observation LO_ND_OBSERVATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_OBSERVATION ). data : ls_valueset type WDR_CONTEXT_ATTR_VALUE, lt_valueset type WDR_CONTEXT_ATTR_VALUE_LIST. ls_valueset-VALUE = 01. ls_valueset-TEXT = OPEN. append ls_valueset to lt_valueset. clear ls_valueset. ls_valueset-VALUE = 02. ls_valueset-TEXT = CLOSED. append ls_valueset to lt_valueset. clear ls_valueset. * Populating some records in the context node. ls_observation-sno = 1. ls_observation-observation = Material not in shape. ls_observation-status = . ls_observation-valueset = lt_valueset. append ls_observation to lt_observation. clear ls_observation.
ls_observation-sno = 2. ls_observation-observation = Material finishing done. ls_observation-status = . ls_observation-valueset = lt_valueset. append ls_observation to lt_observation. clear ls_observation. * Bind the datas to the context node. LO_ND_OBSERVATION->BIND_TABLE( NEW_ITEMS = LT_OBSERVATION SET_INITIAL_ELEMENTS = ABAP_TRUE ). * ALV Settings. * Instantiating the used component. DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE. LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV( ). IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL. LO_CMP_USAGE->CREATE_COMPONENT( ). ENDIF. * Method call in the current controller. DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE . LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ). DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE. LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL( ). * Get the column address of the table whose cell editor we need to change as drop down. data : lo_status type ref to CL_SALV_WD_COLUMN . CALL METHOD LV_VALUE>IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN EXPORTING ID = STATUS RECEIVING VALUE = lo_status. * Creating an object for UI element. data : lo_drop type ref to CL_SALV_WD_UIE_DROPDOWN_BY_IDX. create object lo_drop exporting selected_key_fieldname = STATUS. * Set the valueset of the field name
CALL METHOD LO_DROP->SET_VALUESET_FIELDNAME EXPORTING VALUE = VALUESET. * Set type CALL METHOD LO_DROP->SET_TYPE EXPORTING VALUE = IF_SALV_WD_C_UIE_DRDN_BY_INDEX=>TYPE_KEY_VALUE. * Making the cell as a drop down CALL METHOD LO_status->SET_CELL_EDITOR EXPORTING VALUE = LO_DROP. * Setting read only CALL METHOD LV_VALUE>IF_SALV_WD_TABLE_SETTINGS~SET_READ_ONLY EXPORTING VALUE = ABAP_FALSE. Now in the same applicaton let us introduce a column which contain a button UI element for each row and based upon the selected drop down value it submits the data in the database table. Go to the context tab of the component controller and add an attribute button of type string.
Go to the view controller and update the mapping. Alse delete the external mapping in the interface controller of the component usage and map it again. Like in similar way we got the object reference of the status column, get the object reference of the button column.
Create a object for the button UI element and set it to the cell editor of the column like we did before. CL_SALV_WD_UIE_BUTTON is the class for the button UI element and the constructor method of this class does not have any importing parameters.
Using the object reference for the button class set the lable and other property for the button using the methods of the class for button UI element.
Using the object reference for the column set the cell editor of the column.
Save and activate the whole component and test the application.
Now when a button is being click a certain action has to be triggered. We need an event handler method associated with the button which is to be executed on the click of the button and we execute our logic. Go to the methods tab of the view controller and create an event handler method as shown below.
Now register this event handler method to the event of the ALV because we have place the button in the alv table and when we click on the button it will be known only to the alv component. From the F4 help choose the event for the button click in the ALV.
Now we have registered our method for the on_click event of the alv component. Whenever a button has been clicked in the screen it will now call our event handler method. If you double click on the event handler method and go inside the method you will see two importing parameters for the method.
The importing parameter r_param is an object reference to the interface if_salv_wd_table_click and this interface consist of the required attributes.
The attribute of this interface provides various of information like the index where the button has been clicked in the column, attribute id and so on. To get to know the row item from the the button ui element has been triggered we can make use of the index attribute. Do the following to get the row item of the selected button. Using code wizard read the node observation without table operation.
Note : I have removed the unwanted codes. Pass the index to the get element method to get the element object reference for the row which has been selected.
Now by passing the index we got the element object reference for the selected index and by accessing the method get static attributes using the element object reference we got the row item for the selected index in the work area ls_observation.
Save and activate the whole application.Test the application, in debugger we will see the whether we are getting the selected row item.
I am selecting the drop down of the second row as open and clicking on submit button.
If you see the work area it will contains the values of the selected button row. The status field will not contains the direct text open or close it will get the value which we have provided at the time of binding like 01 for open. Passing that to the internal table containing the valueset will give us the exact datas. With these information we can further proceed and process our data and store it in the table. Codings in the doint method for button. * Get the object reference of the column button. data : lo_button type ref to CL_SALV_WD_COLUMN . CALL METHOD LV_VALUE>IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN EXPORTING ID = BUTTON RECEIVING VALUE = lo_button. * Create a object for the button data : lo_but TYPE REF TO CL_SALV_WD_UIE_BUTTON. create object lo_but. LO_BUT->SET_ENABLED( ABAP_TRUE ). LO_BUT->SET_IMAGE_SOURCE( ICON_SUBMIT ). LO_BUT->SET_TEXT( SUBMIT ). * Setting the cell editor of the column as button.
CALL METHOD LO_BUTTON->SET_CELL_EDITOR EXPORTING VALUE = LO_BUT. Codings in the onsubmit method. DATA LO_ND_OBSERVATION TYPE REF TO IF_WD_CONTEXT_NODE. DATA LO_EL_OBSERVATION TYPE REF TO IF_WD_CONTEXT_ELEMENT. DATA LS_OBSERVATION TYPE WD_THIS->ELEMENT_OBSERVATION. LO_ND_OBSERVATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_OBSERVATION ). LO_EL_OBSERVATION = LO_ND_OBSERVATION>GET_ELEMENT( R_PARAM->INDEX ). LO_EL_OBSERVATION->GET_STATIC_ATTRIBUTES( IMPORTING STATIC_ATTRIBUTES = LS_OBSERVATION ). There may be a scenario in which a particular user will wants the column to be visible and invisible for certain users. Now let us see how to hide the columns. The class for the column contains a method called set visible using which we can set the visibility of the column.This method by default will have the visible property as visible which we have to make none in order to make the column invisible. We have already obtained the object reference to the column button using which I am going to hide the column.
Using the object reference to the column call the method set visible and set the visible property as none.
Test the output:
Creating a Tcode for a Webdynpro component

Rate This Post
In this tutorial we will see how to create a tcode for a webdynpro application. The output of the webdynpro application can not only viewed in the browser but also in the SAP GUI itself. We can also create a tcode for opening the webdynpro application in the browser also by calling the tcode. In this tutorial I am going to create a Tcode for the webdynpro component ZCSK_TABLE_LINK which was created in earlier posts. Step 1: Go to the Tcode SE93 and create the transaction code. Enter the name for the Tcode and click on create button.
Enter the short description and choose the radio button transaction with parameters.
Enter the default values for the transaction as WDYID and check the checkbox skip initial screen.
Enter the default values for the screen field parameters as below.
Save and assign the object to a package or a local object. Press F8 to test the Tcode. Output:
If you set the start mode as browser then calling the Tcode will display the output in the browser. Possible parameter entries:
Context change log

Uncategorized November 1, 2012 Leave a comment
Rate This Post In many applications it is necessary to capture the changes made by the user in the screen. Imagine you have a number of UI elements in the screen and the user changes the value of only one field and click on some action. We may not exactly which UI element he has made the changes. We will read all contexts binded to the UI element and process the data. This may cause a negative impact on the performance as you process the huge amount of data even though the user has not done any actions on those data. Imagine I have a table that displays the data in a editable mode and the user has the provision to update the data in the table and update it back on the database table on the click on submit button.
At this point of time we may not know which row he has exactly edited. We simply read all the records in the table and process it in the loop and also update the records which are not modified back in the database table. Hence it is necessary to optimize the performance. Each context node has the provision to store the information about itself. We dont have to process all the context nodes that are available in the controller; instead there is a Webdynpro framework which provides which particular context has been changed using change log function. Within the controller all the information about the changes made to the context nodes of the controller is stored in a single internal table. At runtime we can access this table and based on the values in the table we can process the data. It is like a recorder that records the user entries with relevant informations. Note: This only captures the changes made by the user in the screen. It does not capture the changes to context element made through programming. Context Changes are recorded only for the original nodes in that controller and not for the mapped nodes. In the case of OVS value helps and freely programmed value helps, the new value is not entered automatically into the table but must be entered actively using method ADD_CONTEXT_ATTRIBUTE_CHANGE of interface IF_WD_CONTEXT, provided an entry is desired. By default the change log function in any controller will be disabled. We need to activate the change log function in order to use its functionality. We activate it through the interface if_wd_context in any controller. This interface in contrast to if_wd_context_node not only refers to the root context but also to the context as the whole. Methods of the interface if_wd_context and its uses:
The internal table that contains the user defined types is of type WDR_CONTEXT_CHANGE_LIST. The component of internal table is as follows.
Example program given by SAP: DEMO_CONTEXT_CHANGES. Now let us see an example on how to use the change log function. Step 1: Create a table that displays the data in the editable mode. Refer the below link for how to create a Table with input field. http://webdynproabap.wordpress.com/2012/07/16/table-with-input-field/ Create a table as in the link that displays the flight detail as below.
Output:
Code in the method doinit:
Step 2: Create a context node with structure of the internal table WDR_CONTEXT_CHANGE_LIST that the change log function returns the output.
Enter the name for the node and provide the dictionary structure as the line type WDR_CONTEXT_CHANGE of the table type WDR_CONTEXT_CHANGE_LIST.
Click on add attribute from structure and choose all the fields and press enter.
Change the type of attribute as string for node, old_value and new_value. Step 3: We will proceed from here. Go to the layout tab of the view controller and
insert a button UI element. Provide ID and Type for the UI element.
Change the Text property of the Button UI element and create an action for the button UI element.
Step 4: Insert a table UI element. Right click on the table and select create binding.
Choose the context node as changes and press enter.
Step 5: As I mentioned earlier the change log function by default will be deactivated in the controller. Lets activate the change log function to capture the changes made by the user. Go to the doinit method of the view controller and activate the change log. We need the object reference to the interface if_wd_context to activate the change log. There is a method called get_context in the interface if_wd_context_node which returns the reference variable of type if_wd_context.
Using pattern call the method to get the interface of the context.
Using the object for context call the method enable change log of the interface to activate the change log function.
Now we have activated the change log function. Step 6: Now there is a method called get_change_log which will return the changes in the user entries in the form of the internal table specified. This method cannot be called inside a event handler method. Hence we will create a method and call this method inside it to get the change log.
Go to the methods tab of the view controller and create a method get_log.
Inside the method get the data reference for the context as we did before in the doinit method and call the method get_change_log of the interface to get the change log in
the form of internal table. Call the method get_change_log.
Now the change log has been captured in the internal table. Export this internal table contents so that these change log can be accessed inside an event handler method.
Code in the method GET_LOG: DATA : LO_CONTEXT TYPE REF TO IF_WD_CONTEXT. CALL METHOD WD_CONTEXT->GET_CONTEXT RECEIVING CONTEXT = LO_CONTEXT. CALL METHOD LO_CONTEXT->GET_CONTEXT_CHANGE_LOG RECEIVING
CHANGE_LIST = IT_CHANGES. . Step 7: Go to the event handler method created for the button and get these changes and bind it on the context for the changes.
Get the changes in the event handler method as below. Set the internal table content to the node changes.
Modify the generated code as below.
Code in the event handler method is as below.
DATA : IT_CHANGES TYPE WDR_CONTEXT_CHANGE_LIST. IT_CHANGES = WD_THIS->GET_LOG( ). DATA LO_ND_CHANGES TYPE REF TO IF_WD_CONTEXT_NODE. DATA LT_CHANGES TYPE WD_THIS->ELEMENTS_CHANGES. DATA LS_CHANGES TYPE WD_THIS->ELEMENT_CHANGES. DATA : WA_CHANGES LIKE LINE OF IT_CHANGES. FIELD-SYMBOLS : <FS_VALUE> TYPE ANY. FIELD-SYMBOLS : <FS_VALUE_NEW> TYPE ANY. LO_ND_CHANGES = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_CHANGES ). LOOP AT IT_CHANGES INTO WA_CHANGES. LS_CHANGES-NODE_NAME = WA_CHANGES-NODE_NAME. LS_CHANGES-SEQUENCE = WA_CHANGES-SEQUENCE. LS_CHANGES-NODE_PATH = WA_CHANGES-NODE_PATH. LS_CHANGES-CHANGE_KIND = WA_CHANGES-CHANGE_KIND. LS_CHANGES-ELEMENT_INDEX = WA_CHANGES-ELEMENT_INDEX. LS_CHANGES-ATTRIBUTE_NAME = WA_CHANGES-ATTRIBUTE_NAME.
ASSIGN WA_CHANGES-OLD_VALUE->* TO <FS_VALUE>. LS_CHANGES-OLD_VALUE = <FS_VALUE>. ASSIGN WA_CHANGES-NEW_VALUE->* TO <FS_VALUE_NEW>. LS_CHANGES-NEW_VALUE = <FS_VALUE_NEW>. APPEND LS_CHANGES TO LT_CHANGES. CLEAR LS_CHANGES. ENDLOOP. LO_ND_CHANGES->BIND_TABLE( NEW_ITEMS = LT_CHANGES SET_INITIAL_ELEMENTS = ABAP_TRUE ). Note: Do not pass any value to the attribute node as it is a reference variable it will cause dump as it of reference variable type. I have converted the data reference variable old_value and new_value into string and binded to the table. Save and activate the whole component and test the output. Output:
Change some values in the table and click on get changes. I am changing the values of the first record.
About these ads

Webdynpro

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Webdynpro

Uploaded by

Copyright:

Available Formats

Webdynpro: SAP Standard UI technology for developing web applications in ABAP Environment. Advantages: 1. Reduces implementation effort. 2.

Different controllers of Webdynpro

Context in Webdynpro ABAP

A Simple webdynpro Application

Enter the node name and press enter.

Create an attribute for the node as shown below.

After creating your screen will appear like below.

Insert a label UI element.

Now save and activate the whole application.

Save the application.

Test the application.

Reading the user input and setting the output

Rate This Post

Enter the description in the text property of the Button UI element.

In the properties you will be able to see the method.

Right click on the context node and update the mapping.

System will prompt you to match the node. Select Yes.

Now we can see the attributes reflected in the view controller.

In the layout of the view controller insert a textview UI element.

Press enter to generate the code.

Code will be generated as below.

Codes will be generated as below.

Enter the name and click on submit.

Navigation between views.

Create an attribute for the node as shown below.

Enter the attribute name, choose a type and press enter.

Provide the ID and type of UI element.

Step 5 : In a similar way insert a input field UI element.

Create an event handler for the UI element.

Enter the name for the view and press enter.

Properties of the lable.

Assign the label for property to the text view.

In outbound plug tab of the second view create an outbound plug.

Right click on the outbound plug to create the navigation link.

Create a navigation link from second view to the first view.

Choose the first view as destination.

Code will be generated as below.

Codes will be generated as below.

Create an event handler method for the button UI element.

Step 13: Save and activate the whole component.

Step 14 : Create an application and test the component.

Enter the name and press submit.

Passing data between the views using plugs

Rate This Post

In a similar way insert a input field UI element.

Create an action on enter for the input field UI element.

Step 4: Right click on the view controller and create a view.

Bind the property of text view to the attribute created.

Create an action for the button UI element.

Choose the view to be embedded as second view and press enter.

Coding will be generated as below.

Coding will be generated as below.

Pass the value to the parameter of the outbound plug.

Coding will be generated as below.

Note: I have removed the unwanted codes.

Change the coding as below:

Coding will be generated as below.

Enter the name and press enter.

Press back button to navigate back to the first view.

Step 2: Insert a message area UI element.

Code will be generated as below.

Save and activate the application. Test the component.

Enter Submit without entering name.