Introduction to webdynpro ABAP
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
The different types of controllers in webdynpro abap are:1. Component controller 2. Custom controller 3. Interface controller 4. View Controller 5. 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 sections. 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 sections. 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
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 data’s and functions. It only make sense to create a custom controller if certain function and data’s 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
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:
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.
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.
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:
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:
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 window’s inbound plug differ from a view’s 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 sections.
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.
Context in Webdynpro ABAP
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:
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
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.
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.
Right click on the root UI container and select insert element to insert a UI element.
Label for property refers to which UI element we have created this label. As of now we don’t have any other UI elements created. Now let us create a UI element Input field and assign this label to the input field.
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.
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.
To create a webdynpro application, Right click on the component -> create-> webdynpro application.
Save the application.
Reading the user input and setting
the output
In the previous section 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 section 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.
This tutorial is brought to you bywww.onlinewebdynprotraining.com
Enter the description in the text property of the Button 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.
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.
In the layout of the view controller insert a textview UI element.
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.
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.
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.
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 = `ATTRIBUTE` 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 = `OUTPUT`
VALUE = LV_OUTPUT ). endmethod.
Save and activate the component. Test the application.
Navigation between views.
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.
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.
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.
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.
Step 6 : Insert a button UI element and create an event handler method for it.
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 haven’t 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.
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.
Lets assign the lable for property to the text view after creating the text view. Insert the text view UI element.
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.
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.
Right click on the outbound plug to create the navigation link.
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.
Choose the first view as destination.
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:
Passing data between the views using plugs
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.
Provide the ID and type for the UI element and press enter.
In a similar way insert a 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.
Go to the context tab of the view created and create a context attribute as shown below.
Bind the property of text view to the attribute created.
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.
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.
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.
Coding will be generated as 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 SEPARATED 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.
Coding will be generated as below.
Save and activate the whole component.
Output:
Message Handling
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.
Step 2: Insert a message area UI element.
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.
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
In this section 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.
Create an event handler method for the button UI element which is to be triggered when clicking on the button.
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.
Choose the view to be embedded and press enter.
Step 5: In the event handler method created for the button do the following to call 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.
Test the application. Output:
Calling an Web URL
In this section 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.
Code will be generated as below.
Instead of calling the method create_window call the method create_external_window to call the external URL.
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.
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
In the previous section we have seen how to call an Web URL. In this section 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.
Codings will be generated as below.
Pass the webdynpro application name and receive the url using the importing parameter out_absolute_url.
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
In this section 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.
Provide the ID and type for the UI element.
Insert the text view UI element.
Save and activate the whole component and test the application. Step 4: Create a application for the component.
Test the application. Output:
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
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 haven’t provided the default value, the visibility attribute values is taken as 01 (Invisible).
Adding an Image UI element
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: Import the image into the component as shown below.
Step 3: Go to the layout of the view controller and insert an image 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.
Radio Button
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.
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.
Provide the node name the pop up and press enter.
Right click on the node Radio and select create ->attribute to add the attributes.
Attribute for the node will be created as below.
In a similar way create two more attributes radio1 and radio2 of type string.
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.
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.
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 = ‘X’ (Selected Key property of radio button 1) Radio 2 = ‘ ‘ (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.
In the event handler for the radio button 1 write the following code.
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.
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.
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.
Code will be generated as below.
Note : I have removed the dead and unwanted codes.
Step 8: Save and activate the whole component. Create an application for the component to test the component.
Output :
Click on read value.
Select the radio button 2 and click read value.
Radio Button Group By Index
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.
Step 3 : Go to the layout of the view controller and place the UI element Radio button group by index.
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.
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.
Codes will be generated as below.
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.
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.
Bind the lable for property to the text view which we are going to create now. Step 8: Create a UI element text view.
Assign the text view as the lable for property of the label.
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.
Save and activate the whole component and test the application. Output:
Radio Button Group By Key
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.
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.
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.
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.
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.
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.
