SAP Webdynpro ABAP Guide

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

Different controllers of Webdynpro 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_ 2. IG_ 3. IWCI_ 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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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 controller(WD_COMP_CONTROLLER).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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 component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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: www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page

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__PLG.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 10

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 11

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 12

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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 13

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. Note : At run time all the controller instances are singleton.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 14

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 15

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 16

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 17

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 18

Enter the node name and press enter.

Create an attribute for the node as shown below. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 19

Provide the attribute name and data type and then press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 20

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 21

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 22

Right click on the root UI container and select insert element to insert a UI element.

Insert a label UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 23

The properties with red shadow are the mandatory properties to be filled.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 24

Provide a text for the label and you can see it on the layout.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 25

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. In a similar way create an input UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 26

While the obligatory bindings for the UI elements are missing you can see them grayed out.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 27

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 28

Select the attribute which you want to bind and double click on it. And now you can see the input field highlighted.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 29

Double click on the lable UI element and in the property “Label for” assign this input field to the lable property.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 30

From the drop down select the input field. Now you can see the label UI element also gets highlighted.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 31

Now save and activate the whole application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 32

Part 2: Creating a webdynpro Application. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 33

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 34

Save the application.

Test the application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 35

OUTPUT

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 36

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 by www.onlinewebdynprotraining.com

You can see the button UI element in the Layout with no description.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 37

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 38

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 39

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 40

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 41

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 42

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

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 43

System will again prompt you to copy the attributes. Press yes.

Now we can see the attributes reflected in the view controller. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 44

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 45

To arrange the layout double click on the rootuielementcontainer and change the property of layout to matrix layout.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 46

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 47

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 48

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 49

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 50

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”.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 51

Codes will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 52

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 53

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.

Enter the name and click on submit.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 54

You can see the entered name in the text view, we placed.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 55

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. Step 1 : Go to the tcode SE80 and create a webdynpro component as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 56

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 57

Create an attribute for the node as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 58

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

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 59

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 60

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 61

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 62

Set the label for property of the lable UI element to our Input field.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 63

Step 6 : Insert a button UI element and create an event handler method for it.

Create an event handler for the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 64

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.

Enter the name for the view and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 65

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 66

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 67

Assign the label for property to the text view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 68

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 69

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 70

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 71

You will now be able to see both the views under our window.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 72

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 73

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 74

Choose the first view as destination.

Now navigation link from the second view to the first view is created.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 75

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.

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 76

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 77

In the code wizard general tab, choose the radio button start navigation and select the outbound plug using f4 help.

Codes will be generated as below. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 78

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 79

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 80

Step 14 : Create an application and test the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 81

Output:

Enter the name and press submit.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 82

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 83

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 84

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 85

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

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 86

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 87

Go to the context tab of the view created and create a context attribute as shown below.

Enter the name and type for the attribute and press enter.

Go to the layout tab of the view controller and create a text view UI element and bind the attribute to it. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 88

Bind the property of text view to the attribute created.

Insert a button UI element and create an action for the button UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 89

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 90

Similarly go to the second view and create the inbound and outbound plugs.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 91

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 92

Create a navigation link between the second view and first view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 93

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 94

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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 95

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.

Coding will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 96

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 97

Coding will be generated as below.

Save and activate the whole component. Step 9: Create the application for the component and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 98

Output:

Enter the name and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 99

Press back button to navigate back to the first view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 100

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. Step1 : Go to the view and change the property of the input field.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 101

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 102

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 103

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 104

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 105

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 106

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 107

Enter the ID and Type for the UI element as shown below.

Set the text property of the Button UI element as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 108

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 109

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 110

Step 4: In the window controller, Create a window and embed the view for the Pop Up in it.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 111

Embed the pop up view to the pop up window as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 112

Choose the view to be embedded and press enter.

Activate the whole webdynpro component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 113

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 114

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 115

Test the application. Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 116

Thus we have now generated and displayed a pop up.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 117

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. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 118

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 119

Code will be generated as below.

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 120

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 121

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 122

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 123

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 124

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. Using pattern call the method of the class Cl_wd_utitlites as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 125

Codings will be generated as below.

Pass the webdynpro application name and receive the url using the importing parameter out_absolute_url.

Codings in the method: www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 126

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 127

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 128

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 129

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 130

Provide the ID and type for the UI element.

Bind the Checked attribute to the checked property of the checkbox UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 131

Insert the text view UI element.

Enter the text property of the text view UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 132

Save and activate the whole component and test the application. Step 4: Create a application for the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 133

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 If value = 02 UI element is visible

Bind the visibility attribute to the visible property of the text view UI element. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 134

Step 6: Go to the layout tab of the view controller and create an action for the check box UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 135

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.

Codings will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 136

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 137

Since we haven’t 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 138

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 139

Choose the image to be uploaded from the pop up.

Provide the name and description for the image.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 140

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 141

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 142

Save and activate the whole component. Step 4: Create an application to test the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 143

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 144

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. Step 1 : Go to the Tcode SE11 and create a webdynpro component. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 145

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 146

Provide the node name the pop up and press enter.

Node will be created as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 147

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 148

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 149

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 150

In a similar way bind the key to select property to the key to select attribute.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 151

Provide text for the radio button.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 152

Create an event handler method for this radio button as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 153

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 154

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.

Modify the code generated by the system as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 155

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 156

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 157

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 158

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 159

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 160

Step 8: Save and activate the whole component. Create an application for the component to test the component. Activating the component

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 161

Create an application for the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 162

Output :

Click on read value.

Select the radio button 2 and click read value.

Note : Refer to the standard component WDR_TEST_UI_ELEMENT.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 163

Select a radio button and click on read value.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 164

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 165

Create an attribute for the node RADIO.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 166

Step 3 : Go to the layout of the view controller and place the UI element Radio button group by index.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 167

Bind the texts property of the radio button to our attribute.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 168

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 169

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 170

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 171

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 172

Save and activate your whole component. Step 5: Create an application to test your component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 173

Test your application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 174

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 175

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 176

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 177

Bind the lable for property to the text view which we are going to create now. Step 8: Create a UI element text view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 178

Bind the property of the text view “TEXT” to the attribute text which we created earlier.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 179

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 180

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 181

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 182

Double click on the action On toggle and write the following codings.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 183

Read the context node using the code wizard. (Note : Not as table operation ) . Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 184

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 185

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 186

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 187

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.

Domain fixed values for the data element BSTYP.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 188

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 189

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.

Enter the node name and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 190

Context node will be created as shown below.

Create an attribute for the context node of type BSTYP.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 191

Enter the attribute name and type and press Enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 192

Step 3 : In the layout tab of the view controller, Insert a radio button Group by key UI element as shown below.

Provide the ID and type for the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 193

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 194

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 195

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 196

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 197

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 198

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.

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 199

Modify the code as below to set the text according to the radio button selected.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 200

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 201

Step 7 : Activate the whole component.

Step 8 : Create an application and test the component. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 202

Output :

Select a radio button and click on read value.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 203

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 204

Check Box 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 205

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 206

Context node will look like.

Step 3 : Go to the layout of the view container and insert a check box UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 207

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 208

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 209

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 210

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 211

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 212

Step 6 : Create an application for the component and test the application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 213

Output:

Select the check box.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 214

Remove the tick then the output is

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 215

Check Box Group 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 216

Assign the component to the package or save it in the local object. This tutorial is brought to you by www.onlinewebdynprotraining.com 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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 217

Add attribute to the context node as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 218

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 219

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 220

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 221

Step 5 : Create an context attribute text of type string to be binded to the text view UI element.

Context node will look like.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 222

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 223

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 224

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 225

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 226

Step 8 : Save and activate the whole component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 227

Step 9 : Create an application and test the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 228

Output :

Select the check boxes and click on read value.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 229

Drop Down By Key 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 230

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 231

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 232

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 233

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 234

Create an event hanlder for the drop down UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 235

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 236

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 237

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 238

Step 5: Save and activate the whole component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 239

Step 6 : Create an application and test the application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 240

Output :

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 241

Drop down by Index 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 242

Enter the node name and choose a cardinality. Press enter.

Add an attribute text to the context node drop.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 243

Create one more attribute in the root context node to be binded to the text view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 244

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 245

Bind the binding text property of the UI element drop down to the text attribute of context node drop.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 246

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 247

Step 4 : Initialize the values for the drop down in doinit method.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 248

Step 5 : In the event handler method, write the following codes.

Step 6 : Save and activate the whole component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 249

Step 7 : Create an application and test the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 250

Output :

Choose a value from a drop down.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 251

Read the context node as table operation 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_ 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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 252

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 253

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 254

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 255

Table UI Element 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. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 256

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 257

Select the attributes required and press enter. Context node will be created as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 258

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 259

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 260

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 261

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 262

Press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 263

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 264

Step 5 : Save and activate the component. Create an application and test the application.

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 265

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 266

Table with input field 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 267

Enter the name for the node and choose the cardinality and press enter.

Add attributes to the node as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 268

Enter the attribute name and type and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 269

Attributes will be created as below.

Similarly create the other attributes as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 270

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 271

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 272

Provide the ID and type of the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 273

Right click on the table UI element and select create binding.

Choose the context node observation by right clicking on the context.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 274

Change the cell editor of the table column as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 275

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 276

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 277

Using the code wizard, set the node as table operation.

Code will be generated as below.

Modify the code as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 278

Save and activate the component and test the application. Output:

Enter the values.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 279

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 280

Table with drop down In that we made the table column as editable for user to input values. In this section 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. Pre-requisites : Must have created the component in the above mentioned section 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 section (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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 281

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 282

Enter the attribute name and provide the type.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 283

Step 2: Go to the layout tab of the view controller. Right click on the table UI element and select create binding.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 284

Change the cell editor of the status field from input field to drop down by index.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 285

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 286

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.

Code will be generated as below. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 287

Modify the code as below.

Save and activate the whole component and test the application. Output: www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 288

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 289

Table with link to action UI element 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. This tutorial is brought to you by www.onlinewebdynprotraining.com 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 290

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 291

Choose the fields required from the popup and click on enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 292

Context node will be created as below with the required attributes.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 293

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 294

Provide ID and type for the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 295

Right click on the Table UI element and click on create binding.

Click on the context button to choose the context node.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 296

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 297

Change the cell editor of the column for the EBELN field as link to action.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 298

Change the label text as the PO number for the field EBELN.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 299

Step 4: Now create an action for the link to action UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 300

Enter the name and description for action and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 301

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 302

Code will be generated as 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 303

Test the application. Output:

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 304

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 305

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 306

Modify the code as below.

Right now I am passing the name as name as we don’t 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 307

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 308

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.

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 309

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 310

Save and activate the whole component and test the application. Debug to understand the flow. Output:

Click on the link to action.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 311

Table with cell variant In the following section 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 312

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 313

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 314

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 315

Enter the ID and the type for the cell variant.

Right click on the variant and insert editor to add the cell editor.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 316

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 317

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 318

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.

Code will be generated as below.

Note: I have removed the unwanted codes. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 319

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 320

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 321

Filtering in table UI element Unlike ALV, we don’t have the default filtering option when we are displaying the data using the Table UI element. Filtering options needs to be done manually. All we need to do is to trigger the apply filter method of the interface if_wd_table_method_hndl to set the filter option to the table. This method will take care of comparing the filter value with all other values in the column and Every column in the table UI element is provided with a property called filterValue. The value passed to this attribute will be the filter criteria. The value is compared with all the other values in that column and only the matching rows are displayed. In case many no of columns are set with filtering option, the rows with the combination of values will only be displayed. When a filtering option is set a row will be introduced in the top of the table with input box or drop down to the column where the column filtervalue attribute is binded to the context attribute and non enabled field to the rest of the columns. There are two types of input for filtering is possible. 1. When you bind the property filtervalue of the column to a context attribute whose type does not have a fixed domain values then the input field UI element will be provided. However an attribute without fixed domain values can be made displayed as a drop down instead of input box by adding valueset to the attribute which will be covered in the following section. 2. When the attribute with fixed domain values is binded to the filtervalue property then drop down UI element will be provided as a selection option.

For more refer to the SAP Help portal links: http://help.sap.com/saphelp_nw73/helpdata/en/58/f80d7cd805406d8b5647b7bb2444e1/content.h tm http://help.sap.com/saphelp_nw2004s/helpdata/en/2d/390e422dfcde2ce10000000a1550b0/frame set.htm Now let’s see how to set the filter option in the table UI element. Pre- Requisite: Knowledge on how to display the data’s using table UI element. Refer to the link to learn how to display the data using Table UI element. I have created a simple webdynpro component that displays some records from the EKKO table. The Output of the table is as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 322

Now let us provide filter option for this table in the column company code. Let’s say that I want to display the data only for the company code 1019. Firstly, we are going to see how to set the filter with an input field and drop down later on. Steps to do: 1. Create a context attribute to be binded to the filter value property of the company code column. 2. Create a context attribute to switch on and switch off the filter. 3. Create a toolbar in the table UI element and button with an event handler method to switch on and switch off the filter. 4. Create an action to be triggered when the filter is selected.

Procedure: In this blog, let’s replicate the code implemented by the SAP in the demo component for table UI element DEMO_TABLE. Lets create the context node, attributes and method with the same name so that we can copy paste the code as it is. Step 1: Go to the context tab of the view controller and create a context node with the name FILTER and cardinality 1..1 and attribute BUKRS of type BUKRS.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 323

Step 2: Go to the layout tab of the view controller and bind the filter value property of the table column BUKRS to the context attribute created.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 324

Step 3: Create an attribute IS_FILTER_ON to set the filter option on or off.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 325

Step 4: Right click on the table UI element and insert a toolbar in the table to add the filter button.

Right click on the toolbar and insert a right aligned toolbar element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 326

Provide the ID and choose the type as toolbartogglebutton.

Bind the checked property of the toolbar element to the IS_FILTER_ON attribute created by us. When the button is clicked the IS_FILTER_ON will be provided with value X.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 327

Create an action switch filter for the toolbar button created.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 328

Step 5: In the attributes tab of the view controller create a reference variable of type if_wd_table_method_hndl to store the object reference to the table handler.

Now let’s move into the coding part. To change the properties of the table we need a handler to the table. Write the following code in the domodify view of the view or copy paste the code from the demo component. Note: Dont forget to change the value passed to the get element with the ID of the table UI element. Otherwise you will get a dump. Code explanation: Getting the value IS_FILTER_ON binded to the toolbar button and getting the handler for the table. If the IS_FILTER_ON is provided with value X which means the user have clicked the table toolbar element we created and the value is set to space when we click it again. Using that we are instructing the table handler to call the action FILTER (which we are going to create) when the user click on filter button and in other case no action.

DATA: l_table TYPE REF TO cl_wd_table, l_is_filter_on TYPE wdy_boolean. * Find out whether filter is on wd_context->get_attribute( EXPORTING name = ‘IS_FILTER_ON’ IMPORTING value = l_is_filter_on ). * Get reference of the table view element l_table ?= view->get_element( ‘TAB_EKKO’ ). * Get reference to the Filter & Sorting API wd_this->TABLE_METHOD_HNDL ?= l_table->_method_handler. * Set or cancel the table’s filter action IF l_is_filter_on = abap_true. l_table->set_on_filter( ‘FILTER’ ). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 329

ELSE. l_table->set_on_filter( ” ). ENDIF. Write the following code in the SWITCH_FILTER action created for the table toolbar element. This following code is to invalidate the value binded to the filtervalue property so that the line inserted in the table for the filter will be invalidated.

DATA: l_node TYPE REF TO if_wd_context_node. * in any case clear the table’s filter strings l_node = wd_context->get_child_node( if_v_main=>wdctx_filter ). l_node->invalidate( ). * if the filter is off: show the whole table back wd_this->table_method_hndl->apply_filter( ).

Step 6: In the action tab of the view controller create an action FILTER.

Write the following code in the event handler for the FILTER. wd_this->table_method_hndl->apply_filter( ). Output: The output of the application is as below. Selecting the Filter button mark (toolbar element) will trigger the switch_filter method setting the value of IS_FILTER_ON as X. When the domodify view method is called it will set the action FILTER as a method to be called when the user presses filter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 330

You can now see a line inserted in the table with company code as a Input filed and a filter button in the left which will trigger the action FILTER.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 331

As i mentioned earlier, binding the filter value property of the column with the attribute with fixed domain values will show a drop down as a filter and in the other case an input field. Now let us see how to make the filter option as a drop down even though the attribute binded does not have fixed domain values. This can be achieved by adding an value set to the attribute. Write the following code in the DOINIT method of the view controller to add a value set to the attribute.

DATA lo_nd_filter TYPE REF TO if_wd_context_node. DATA lo_nd_status_info TYPE REF TO if_wd_context_node_info. DATA it_valset TYPE STANDARD TABLE OF wdr_context_attr_value. DATA wa_valset TYPE wdr_context_attr_value. lo_nd_filter = wd_context->get_child_node( name = wd_this->wdctx_filter ). CALL METHOD lo_nd_filter->get_node_info RECEIVING node_info = lo_nd_status_info. * Valuset for company code

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 332

wa_valset-value = space. APPEND wa_valset TO it_valset. CLEAR wa_valset. wa_valset-value = ’1019 . wa_valset-text = ’1019 . APPEND wa_valset TO it_valset. CLEAR wa_valset. wa_valset-value = ’1045 . wa_valset-text = ’1045 . APPEND wa_valset TO it_valset. CLEAR wa_valset. CALL METHOD lo_nd_status_info->set_attribute_value_set EXPORTING name = ‘BUKRS’ value_set = it_valset. Ouput:

There may be a certain scenario where you wanted to reset the filter. Say for example you are clicking a button search and you filter the company code value to 1045 then the next time you click on search again only the records for 1045 will be displayed in the table. In that case we need to reset the filter. Below is the peice of code which resets the filter. * Resetting the filter option DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT. DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT. DATA LV_IS_FILTER_ON TYPE WD_THIS->ELEMENT_CONTEXT-IS_FILTER_ON. LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 333

lv_is_filter_on = abap_false. LO_EL_CONTEXT->SET_ATTRIBUTE( NAME = `IS_FILTER_ON` VALUE = LV_IS_FILTER_ON ). wd_this->table_method_hndl->apply_filter( ).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 334

Table Popin 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. This tutorial is brought to you by www.onlinewebdynprotraining.com

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 335

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 336

Refer to the URL for more details on Table Popin. http://help.sap.com/saphelp_erp2005/helpdata/en/23/5e9041d3c72e7be10000000a1550b0/conten t.htm Now let us see a simple application to demonstrate the table popin. Part I www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 337

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 338

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 339

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 340

Similiarly create another node EKPO with cardinality 0..n.

Step 3:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 341

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 342

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 343

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 344

Step 5: Right click on the table UI element and select create binding to add the columns to the table from the context node.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 345

Click on the context button to choose the context node.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 346

Select the context node EKKO and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 347

Keep the cell editor as the text view and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 348

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 349

You ll now be able to see the every column binded except the one which we have created for the table popin.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 350

Step 6 : Go to the method DOINIT to initialize some values for the node EKKO.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 351

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 352

Select some records form the EKKO table and bind it.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 353

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 354

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 355

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 356

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 357

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 358

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 359

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 360

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 361

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 362

Bind the node EKPO to the table created inside the container.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 363

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 364

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 365

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 366

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 367

The table popin doesn’t 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 368

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 369

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 ).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 370

* @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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 371

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 372

Exporting content of table to Excel sheet In this section 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. 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.

Provide the ID and type for the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 373

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 374

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 375

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 don’t understand oo abap codings can write the coding in a following way.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 376

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 377

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 378

Click on the export button.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 379

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 380

Roadmap UI element 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 381

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 382

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 383

Provide the ID and type for the UI element.

Right click on the road map UI element and select insert step.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 384

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 385

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 386

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 387

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 388

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 389

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 390

First embed all the views created first, second and third in the view container of the main view as

shown below. Choose the view to be embedded and press enter.

Similarly embed second and third view to the view container.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 391

Create the navigation links to each view as shown below.

Choose the destination view as the first view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 392

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

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 393

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( ). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 394

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 ). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 395

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 396

Step 9: Save and activate the whole component. Create an webdynpro application and test the component.

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 397

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 ). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 398

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 399

File Upload UI Element 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 400

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 401

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 402

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 don’t have an action for the file Upload UI element insert a button UI element to trigger the action.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 403

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.

Code will be generated as below.

Note : I have removed the unwanted codes. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 404

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 405

Click on browse to search the file from the directory and choose the file.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 406

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 section.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 407

OVS Search help 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. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 408

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/9ef8c99b5e3c5ce10000000a421937/content.h tm 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 ).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 409

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 410

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: www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 411

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 412

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 413

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

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 414

Output: Press the F4 help button, you will get the below popup.

Enter the search criteria and press start search.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 415

Double click on the values or select the lead and click ok. The selected value will sit on the appropriate fields.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 416

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, www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 417

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: type lty_stru_input, 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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 418

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 . if not 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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 419

if ovs_callback_object->selection is not bound. ******** TODO exception handling endif. assign ovs_callback_object->selection->* to . if is assigned. ovs_callback_object->context_element->set_attribute( name = ’KUNNR’ value = -KUNNR ). ovs_callback_object->context_element->set_attribute( name = ’CUSTOMER_NAME’ value = -NAME1 ). * or * ovs_callback_object->context_element->set_static_attributes( * static_attributes = ). endif. endcase. endmethod.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 420

Freely programmed search help Webdynpro Framework allow us to create our own webdynpro component and use that component to provide and input help to the field. This type of providing search help is called freely programmed search help. How to use the component as a search help component to an attribute? One pre-requisite for the webdynpro component to be used as search help is that it should implement the webdynpro component interface IWD_VALUE_HELP. By the time we are implementing the interface an window will be created in our component with the name WD_VALUE_HELP. We need to embed the View of our component to window WD_VALUE_HELP so that our view will be displayed as search help when the user triggers the F4. Later on this component created for providing search help can be added as a used component and its component usage can be assigned to the attribute for which search help type is assigned as freely programmed search help. Where to write the processing logic to display the list of possible values? The view which is embedded to the window WD_VALUE_HELP will be displayed when the user triggers the F4 help. Hence we can design the layout and the processing logic to display the data based on input can be implemented in the view itself. The list of possible values will be displayed in the view that is embedded to the window WD_VALUE_HELP. How to transport the user selected value back to the place from where F4 help is called? When the User selects a particular value and clicks on ok button the user selected value has to be written in the input field from where the F4 help is called. The interface IWD_VALUE_HELP consist of two key attributes called F4_CONTEXT_ELEMENT and F4_ATTRIBUTE_INFO. This attribute F4_ATTRIBUTE_INFO consist of information on attribute from where the F4 help is triggered and the attribute F4_CONTEXT_ELEMENT consist element object reference for the attribute from where the input help is triggered. Using these information in the attribute we can transport the user selected value to the attribute from where the F4 help is called. Will the values selected to an attribute using the freely programmed search help be captured in the Context change log? No, Just like in OVS Search help we need to write the record explicitly to the context change log table. Refer to the SAP Link for More information on freely programmed search help: http://help.sap.com/saphelp_nw70/helpdata/en/47/9ef8cc9b5e3c5ce10000000a421937/frameset. htm www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 421

Let us see an simple scenario that implements the freely programmed search help. Scenario: Provide the freely programmed search help to the attribute CARRID. Design a webdynpro component that provides the list of possible airline ID and use that component to provide search help for the attribute CARRID. This tutorial is split into two parts. 1) Creating a freely programmed search help component 2) Using the component to provide the search help

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 422

Select-Options – Creating a selection field in the screen 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. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 423

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 424

From the popup choose the interface controller of the select-options component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 425

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 426

Provide the ID and Type for the UI element and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 427

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 428

Choose the view WND_SELECTION_SCREEN in which selection parameters will be displayed.

Press Enter after choosing the View. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 429

You can see the view embedded to the view container.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 430

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 431

Choose the component select_options.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 432

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 433

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 434

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 435

Double click on the select options component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 436

Now choose the method INIT_SELECTION_SCREEN which will return you the reference to the select options interface if_wd_select_options.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 437

Select the method INIT_SELECTION_SCREEN.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 438

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 439

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 440

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).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 441

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 442

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 443

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 444

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 445

Call the Method add selection field using the same procedure as mentioned above to set the selection field on the screen.

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 446

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 447

Step 10 : Save and activate the component and create an application to test the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 448

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 449

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 450

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 don’t 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 451

Remove the comments and set the buttons you don’t need as ABAP_FALSE.

Here I had disabled the buttons check and execute. The Output will look like.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 452

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 = www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 453

*

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 .

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 454

Reading the values entered in select option In the previous section, 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. This tutorial is brought to you by www.onlinewebdynprotraining.com

Enter the text for the Button UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 455

Create an action for the Button UI Element as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 456

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 457

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 458

Choose the required attributes and press Enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 459

Context node will be created as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 460

Drag and drop the context tab to the view controller.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 461

Right click on the table UI element and select create binding.

Select the context button to choose the node.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 462

Choose the context node and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 463

By default the cell editor of the column will be text view. If not choose the column editor as text view and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 464

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 465

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 466

Call the method call in the current controller using the code wizard.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 467

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 468

Call the method get range table of the select option interface if_wd_select_options.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 469

Code will be generated as below

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 470

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 471

Now write the codings to fetch the data and set it in the context node.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 472

Save and activate. Test the application. Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 473

OVS Search help for select option field In this section 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 don’t 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: 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 474

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_OPTIONS . 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 = www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 475

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_PREFIX_N ONE . 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 . 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 476

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 477

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, www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 478

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: type lty_stru_input, 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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 479

* 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 . if not 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 . if is assigned. * ovs_callback_object->context_element->set_attribute( * name = `COLUMN1` * value = -column1 ). * or * ovs_callback_object->context_element->set_static_attributes( * static_attributes = ).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 480

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 481

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_DATAM_OVS_CALLBACK_OBJECT.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 482

Change the Phase 0 Coding as below:

As I don’t 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 don’t 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 483

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: TYPE LTY_STRU_INPUT, TYPE LTY_STRU_LIST. CASE I_OVS_DATA-M_OVS_CALLBACK_OBJECT->PHASE_INDICATOR. WHEN IF_WD_OVS=>CO_PHASE_0. LS_TEXT-NAME = `EBELN`. LS_TEXT-VALUE = `PO NUMBER`. INSERT LS_TEXT INTO TABLE LT_LABEL_TEXTS. LS_TEXT-NAME = `EBELN`. LS_TEXT-VALUE = `PO NUMBER`. INSERT LS_TEXT INTO TABLE LT_COLUMN_TEXTS. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 484

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_SELECT_LIST ). WHEN IF_WD_OVS=>CO_PHASE_3. FIELD-SYMBOLS : TYPE STANDARD TABLE. ASSIGN I_OVS_DATA-M_OVS_CALLBACK_OBJECT->SELECTION>* TO . IF IS ASSIGNED. ASSIGN I_OVS_DATA-MT_SELECTED_VALUES->* TO . INSERT -EBELN INTO TABLE . ENDIF. ENDCASE. Save and activate the whole component. Test the application. Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 485

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 486

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 487

OVS Search help for multiple fields in Select options In the previous section 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 section 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. Before going through this document I strongly recommend you to go through the section 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 section. 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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 488

lo_cmp_usage->create_component( ). endif. DATA lo_INTERFACECONTROLLER TYPE REF TO IWCI_WDR_SELECT_OPTIONS . 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_PREFIX_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_PREFIX_OVS . www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 489

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 490

Create a method for EBELN input field.

Create an Importing parameter for the method.

Write the Coding for OVS Search help in that method. 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, www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 491

lt_column_texts type wdr_name_value_list, lv_window_title type string, lv_table_header type string. field-symbols: type lty_stru_input, type lty_stru_list. case I_OVS_DATA-M_OVS_CALLBACK_OBJECT->phase_indicator. when if_wd_ovs=>co_phase_0. ls_text-name = `EBELN`. ls_text-value = `PO NUMBER`. insert ls_text into table lt_label_texts. ls_text-name = `EBELN`. 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_select_list ). when if_wd_ovs=>co_phase_3. FIELD-SYMBOLS : TYPE STANDARD TABLE. assign I_OVS_DATA-M_OVS_CALLBACK_OBJECT->selection->* to . if is assigned. ASSIGN I_OVS_DATA-MT_SELECTED_VALUES->* TO . INSERT -EBELN INTO TABLE . endif. endcase. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 492

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 493

Business Graphics 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 494

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 495

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 496

Copy the context node from the view.

Select the node from the popup which you want to copy. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 497

Rename the context node and save it.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 498

Enter the name for the node.

Step 7 : In the layout tab of the view controller insert the Business graphics UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 499

In the layout tab, Insert the business graphics UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 500

For the X axis, Insert the category UI element in the Business graphics.

For Y axis, Insert Simple series UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 501

Similiarly create series for all the Context attributes.

Bind the category X axis to the PO number.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 502

Similiarly bind the series1 and series2 to menge and netpr(Y – Axis).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 503

Map the properties of the Business UI element to the series source property.

Select the UI element table and create an action for onlead.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 504

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 to 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 to via lead selection LO_ND_BUSINESS = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_BUSINESS ). append ls_ekpo to lt_business. * LO_ND_BUSINESS>BIND_TABLE( NEW_ITEMS = LT_BUSINESS SET_INITIAL_ELEMENTS = ABAP_TRU E ). endmethod. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 505

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. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 506

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 507

Progress Indicator and Timed trigger UI element 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 508

Provide the ID and type for the UI element and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 509

Step 3 : In the context node declare the attribute count, and bind it to the progress indicator UI element.

Enter the attribute name and type and press Enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 510

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 511

Step 4 : Go to the layout and bind the context attribute to the Percent value property of the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 512

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 513

Codes will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 514

Increment the count attribute and set it back to the context.

Setting the context attribute count.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 515

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 516

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 517

* 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 518

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 519

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 520

Output :

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 521

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 522

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 523

Reading the application parameter from the Portal 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 524

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 525

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 526

Step 6: Now we have to set the value in some variable so that the value can be used across any no’s 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 527

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 528

A Simple ALV Report 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. This tutorial is brought to you by www.onlinewebdynprotraining.com 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 529

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 530

Choose the required attributes and press enter.

Context node and its attributes will be created as below.

This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 531

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 532

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 533

Step 4 : Go to the layout tab of the view controller and create a view container UI element as shown below.

Provide the ID and type for the UI element.

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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 534

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 535

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 536

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 537

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.

Code will be generated as below.

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 ). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 538

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 539

Changing the header of the Column – ALV Report The Output of the ALV report which we created in the earlier section is as below.

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 540

Step 1: Instantiate the used component.

Coding will be generated as

below. This coding call’s 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 541

Call the get model method of the ALV component using the code wizard method call in used

controller. Coding will be generated as below.

The object reference for the ALV configuration table class is now contained in the variable LV_VALUE.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 542

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 543

Using pattern call the method get_column of the interface.

Coding will be generated as below.

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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 544

class to get the object reference of the header.

Coding will be generated as below. Change the coding as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 545

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 546

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_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( ). * 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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 547

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 548

Coloring the column cell – ALV

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.

Coding will be generated as

below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 549

This coding call’s 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. Coding will be generated as below.

The object reference for the ALV configuration table class is now contained in the variable LV_VALUE.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 550

This class now contains a number of interfaces which contains method for setting the different properties of the ALV table.

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 551

Using pattern call the method get_column of the interface.

Coding will be generated as below.

Modify the coding as below.

Now we have obtained the object reference for the column.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 552

Using the method set cell design of the column change the background color of the cell.

Change the generated coding as

below. activate the whole component. Test the application.

Save and

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_TABLE . LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 553

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 554

ALV With Link to Action

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.

Coding will be generated as

below. This coding calls the method created for the component usage mentioned earlier in the section. It checks for the active component usage and if there is no active component usage then it creates one. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 555

Step 2: Method call in the used controller. This tutorial is brought to you by www.onlinewebdynprotraining.com

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. Coding will be generated as below.

The object reference for the ALV configuration table class is now contained in the variable LV_VALUE.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 556

This class now contains a number of interfaces which contains method for setting the different properties of the ALV table.

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 557

Using pattern call the method get_column of the interface.

Coding will be generated as below.

Modify the coding as below.

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 558

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 559

Call the set cell editor method and pass the object for link to action to that method.

Coding will be generated as below.

Pass the object to it. Save and activate the whole component and test the application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 560

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_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( ). * 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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 561

* 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

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 562

the user performs the action on the cell and what has to happen next can be controlled here.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 563

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 564

Using code wizard generate the codes.

Modify the generated code as below.

Save and activate the whole component.

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 565

ALV Cell Editable 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 566

From the F4 help choose the component which we need to instantiate.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 567

The following code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 568

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 569

Select the interface controller of the ALV.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 570

Choose the method get_model and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 571

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 572

Following code will be generated.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 573

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 574

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 575

Following codes will be generated.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 576

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 577

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 578

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 579

Modify the code as shown below.

Now save and activate the component. Test the application. Codings In WDDOINIT Method. method wddoinit . www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 580

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 581

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 582

Drop down by Index and Button in ALV 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 section 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 583

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 584

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 585

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 586

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 587

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 588

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.

Provide the ID and type for the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 589

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 590

Select the Table View of the ALV component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 591

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 592

Enter the name for the node and choose the cardinality and press enter.

Add attributes to the context node as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 593

Enter the attribute name and type of attribute and press enter.

Similarly create two other attributes observation and status of type string. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 594

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). www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 595

Click on the create controller usage.

Choose the component controller from the Pop-Up.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 596

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 597

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.

Code will be generated as below.

Note : I have removed the unwanted code. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 598

Modify the code as below.

Save and activate the whole component. Step 7: Create an application and test the component.

Output: www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 599

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 600

Update the context node in the view controller.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 601

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 alv’s 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: www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 602

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.

Codes will be generated as below.

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 603

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 604

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 605

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 606

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 607

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 : www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 608

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 609

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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 610

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 611

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 612

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 613

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 614

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 615

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.

Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 616

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 617

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 www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 618

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 619

Using the object reference to the column call the method set visible and set the visible property as none.

Test the output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 620

Creating a Tcode for a Webdynpro component 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. This tutorial is brought to you by www.onlinewebdynprotraining.com

In this tutorial I am going to create a Tcode for the webdynpro component ZCSK_TABLE_LINK . 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 621

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 622

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:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 623

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 624

Context change log 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 don’t 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. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 625

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 626

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. Create a table as in the link that displays the flight detail as below.

Output: Code in the method doinit:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 627

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 628

Click on add attribute from structure and choose all the fields and press enter.

Context node will be created as below.

Change the type of attribute as string for node, old_value and new_value.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 629

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 630

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. Let’s 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 631

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.

Coding will be generated as below.

Modify the code as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 632

Using the object for context call the method enable change log of the interface to activate the

change log function. Coding will be generated as below.

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 633

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 634

Call the method get_change_log. Coding will be generated as below.

Modify the code as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 635

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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 636

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( ).

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 637

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 : TYPE ANY. FIELD-SYMBOLS : 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 . LS_CHANGES-OLD_VALUE = . ASSIGN WA_CHANGES-NEW_VALUE->* TO . LS_CHANGES-NEW_VALUE = . 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.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 638

Output: Change some values in the table and click on get changes. I am changing the values of the first

record.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 639

Service Call With the help of the service call function it is possible to call an existing function module from within a Webdynpro component. To simplify the creation process we have a wizard. Using the wizard automatically creates the required context elements and the methods that call the function module with required parameters in the controller we choose. A Simple Example You wish to read data from a database table and display it in a view with the help of an existing function module. For this purpose, you have created a service call for the function module in your Webdynpro component. The global controller that you have chosen or created during the creation procedure now contains the required context nodes and attributes as well as a method for calling the function module.

Now let us see a simple example of creating a service call. Scenario: I have a remote enabled function module BAPI_FLIGHT_GETDETAIL which will return me the availability of the seats for the airline given the inputs like airline id, connection id and flight date. I want to make use of this function module in my webdynpro component. Let’s see how to create a service call for this function module. The interface of the function module is as below. It gets the importing parameter airline id, connection id and flight data and returns the availability of seats.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 640

Step 1: Go to the Tcode SE80 and create a webdynpro component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 641

Assign the component to the package or save it in the local object. Step 2: Right click on the component and choose service call to start the wizard for service call.

Wizard for the service call will be opened. Click on continue it will ask for the controller.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 642

Choose the radio button use existing controller and select the component controller using f4 help. This step is to choose the controller where you wanted the nodes and method to be created. If you want you can create a new controller and assign the nodes and methods there.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 643

Select the service type as Function module as we wanted to get the functionality of the function module. We can also create a service call for the methods of the class.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 644

Enter the name of the function module and click on continue. This step is to provide the name of the function module for which you want the attributes nodes or method to be created. Provide the destination name if this RFC is to be called from another server.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 645

Choose the object type as the context so that context node will be created in the controller. Do the same for all importing parameter airline id, connection id and flight date and exporting parameter availability.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 646

Specify the name for the method to be created and click on continue.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 647

Click on complete to complete the wizard.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 648

In the context tab of the component controller you will now be able to see the context nodes created.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 649

In the methods tab of the component controller you will see the method created with the functionality inside it. It will get the value of the importing context node and pass it to the function module and get the result and bind it back to the exporting parameter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 650

Step 3: Go to the context tab of the view controller and drag and drop the nodes generated in the component controller to make the node accessible to the view controller.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 651

Step 4: Go to the layout tab of the view controller and create the UI elements to get the input and display the output. Click on the code wizard to generate the layout using the wizard.

Select the form and press enter to continue.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 652

Choose the node importing form the context and select the checkbox to create the UI element in the new container and select the layout as matrix layout.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 653

Layout will be created as below.

Step 5: Create a button UI element and an action for the button UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 654

Enter the text for the button and create an action for the button UI element.

Step 6: Choose the code wizard again to set the output table.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 655

Select the table and click on continue.

Choose the context node exporting and the cell editor as text view and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 656

Table will be created as below in the layout.

Step 7: Go to the action for the button UI element and call the method created in the service call using the instance provided in the view controller to call the component controller objects.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 657

Save and activate the whole component. Step 8: Create an webdynpro application to test the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 658

Output:

Enter the input details and click on get details button to see the output. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 659

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 660

Supply function with singleton concept Supply Function: Supply functions are assigned to the context node of the controller. This function is called by the runtime when the context node is accessed. Supply functions are called when: 1. One or more elements of the context node are accessed. 2. Context node is not filled yet or Initial 3. Context node has been invalidated in previous step Why should one go for supply function when they can even initialize the values for the node in the DOINIT method of controller? DOINIT method is called only at the time of initialization of the component where as supply function is called each and every time the element of the context node is accessed. Say for example you have a parent node and a child node. If you wanted to initialize the values of the child node based on the values of the parent node then you can use supply function to do the job. Supply function is especially useful in combination with singleton nodes. The values of child node elements of the type Singleton depend on the element of the parent node to which the lead selection is currently assigned. If the lead selection is changed by the user, the supply function can access the new lead selection element and recalculate the values of the child node elements accordingly. Singleton Node: Singleton node property specifies that the elements of the node are instantiated only for the element that bears the lead selection. If the lead selection was initialized automatically then the first element gets initialized automatically. For more information on singleton property and lead selection refer to sap link: http://help.sap.com/saphelp_nw70ehp2/helpdata/en/47/45641880f81962e10000000a114a6b/fram eset.htm Let’s us create an example that explains the supply function and singleton property.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 661

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 layout tab of the view controller and create a context node as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 662

Enter the name for the node and press enter.

Create a child node for the node as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 663

Enter the name, choose the cardinality for the node and provide the name for the supply function

and press enter. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 664

Create an attribute for the node “TYPES” of type string.

Enter the name and type for the attribute and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 665

Create a Sub node for the node “TYPES” as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 666

Enter the name, cardinality and name for the supply function.

Create an attribute to the sub node of type string.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 667

Your context node structure will now look like.

Step 3: Go to the layout tab of the view controller and insert a tree UI element.

Provide the ID and type for the UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 668

Bind the data source property of the Tree UI element to the Node “NODE”.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 669

Fill the properties of the Tree UI element as shown below.

Right click on the tree UI element and choose insert node type.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 670

Provide the ID and type.

Bind the data source property to the node “TYPES” and text property to the text attribute of the node “TYPES”.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 671

Again right click on tree UI element and select insert node type.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 672

Provide ID and type. This time choose the node type as Item to be displayed as the subtype.

Bind the data source property to the node “SUBTYPE” and text property to the text attribute of the node “SUBTYPE”.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 673

Step 4: Go to the methods tab of the view controller. Write the following code in the supply created for the node “TYPES”.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 674

The importing parameter node will contain the object reference for that node.

Code: DATA ls_types TYPE wd_this->Element_types. DATA lt_types TYPE wd_this->Elements_types. ls_types-text = ‘Type1 . append ls_types to lt_types. clear ls_types. ls_types-text = ‘Type2 . append ls_types to lt_types. clear ls_types.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 675

ls_types-text = ‘Type3 . append ls_types to lt_types. clear ls_types. node->bind_table( new_items = lt_types set_initial_elements = abap_true ). In the supply function method created for the node “SUBTYPE” Write the following code.

Code: DATA ls_subtype TYPE wd_this->Element_subtype. DATA lt_subtype TYPE wd_this->Elements_subtype. ls_subtype-text = ‘Sub Type1 . append ls_subtype to lt_subtype. clear ls_subtype. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 676

ls_subtype-text = ‘Sub Type2 . append ls_subtype to lt_subtype. clear ls_subtype. ls_subtype-text = ‘Sub Type3 . append ls_subtype to lt_subtype. clear ls_subtype. node->bind_table( new_items = lt_subtype set_initial_elements = abap_true ). Save and activate the whole component. Step 5: Create an application for the component and test the component.

Output: Set the break point on the both the supply function methods and check when the methods are being called.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 677

By the time of executing the component the supply function for the type will be called once and the subtype will be called thrice as we have three elements (Three records) in the “TYPE” node.

Expand the nodes. You can see all the nodes filled with values.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 678

Now go to the context tab of the view controller and set the singleton property for the child node subtype and check the output.

Check in the debugger you can see the supply function for the subtype is called only once i.e for the first element for which the lead is initialized.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 679

Supply function Summary: This document will help in learning the Supply Function Method usage in Web Dynpro Application. This will explain its usage with one simple application in easy steps Steps: 1) Go to transaction SE80 and create the new WebDynpro Application by selecting it in the drop down list.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 680

2) Double click on the COMPONENT CONTROLLER, to create context nodes/attributes, which are used in anywhere in the WebDynpro Application.

3) Create a node/attribute as shown below.

4) A pop up will display on the screen, fill the attribute name (VKORG), type and then click on ‘Additional Attribute’ to add another attribute AUART. These two attributes will be used as

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 681

inputs provided by the user.

5) In a similar way, create the node HEADER and fill the dictionary name and other properties. Click on the ‘Add Attribute from Structure’.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 682

6) Select few fields from VBAK structure, which are attributes of the node HEADER.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 683

7) Create a node ITEM under node HEADER as shown below where the HEADER is the source of supply for the node ITEM.

8) Fill the details for node ITEM and choose few fields from the VBAP structure similarly as we did for node.In our case, the supply function method is get_itemdata.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 684

After that screen looks like as below.

9) The next step is to create a view. In our case we make use of default MAIN view. Go to the context tab.

10) In this step context mapping happens. Map the specific context nodes from COMPONENT CONTROLLER with the view context. Just drag and drop from the right side to the left side

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 685

view context or right click on the view context and choose ‘Copy Nodes of Different Context’.

11) In the pop up display, choose controller name using F4 help and set the context elements to be copied as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 686

12) Go to the LAYOUT tab and right click on the ROOTELEMENTCONTAINER and click insert element.

13) A pop up will appear, fill the details for first input field VKORG.

14) Create on the similar line the second input field AUART and captions for both these input fields.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 687

15) Then create a button for action and in the properties of the button, type on the TEXT property to get caption.

In the properties, click on the create button of the EVENT property. Fill the details in the pop up display.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 688

16) Create the element for HEADER with type as TABLE.

Create the binding for the fields in the HEADER table with context node HEADER.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 689

17) Similarly repeat the steps for binding the ITEM node with the view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 690

18) After saving the MAIN view, click on the component name and add the ALV component ‘ALV_TAB’ as shown.

19) Now go to the CONTROLLER USUAGE and then INTERFACECONTROLLER_USUAGE.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 691

20) Click on the CONTROLLER USUAGE button and drag & drop the HEADER node into the DATA node to create mapping with ALV component added.

21) Now click on the WINDOWS and here the step is to embed the Table view of the ALV_TABLE over the View.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 692

22) Then choose the ‘ALV_TAB’ component after clicking on the F4 help for ‘View TO BE Embedded’.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 693

23) After saving, create the application and enter the details as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 694

24) Coding for the methods, which are created.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 695

Code for Supply function method.

The ‘parent_element’ is a reference to the lead selection element of the parent node. When user selects any different element , the value of the ’parent_element’ changes . The Supply function is called to fill new elements into the table Item based on the selected element from the Header table. 25) Activate the whole application if there are no errors. Check the output below for the input given.The Header table is bounded to context node HEADER, and item table to the node ITEM.When the user inputs and clicks on ‘Fetchdata’, the method ‘Onactiongetdata’ fills the header node from the VBAK table. The lead selection of the context node has been created on the first element of the node. All the line items for the Sales Document selected are populated on www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 696

the second table Item from the table VBAP.This is done by the Supply function ‘get_itemdata’.

When the user selects another record from the HEADER table. The content of the Item table changes automatically.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 697

Contextual Panel Contextual panel UI element belongs to the layout category. This UI element is used to structure the layout of the webdynpro screen. This contextual panel provides navigation with view switch. The navigation can be included in more than three levels. Below is the sample visual of how contextual panel looks on screen.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 698

How it works? The view switch is not automatically toggled. There is an INDEX parameter containing the index of the selected view switch (counting from 1 upwards). When you click on a link in the navigation list, the ON_SELECT event is triggered. You can find the link you clicked on in the event parameter WDEVENT. This object refers to a class which contains an internal table parameters which will contain the event at runtime. Pass the value CONTEXT_ELEMENT to the internal table and read the element object reference which is of type IF_WD_CONTEXT_ELEMENT. Using the object reference you can access the navigation list selected. There are three types of elements which can be embedded inside the contextual panel they are. 1. Free contextual Area 2. Navigation list 3. View Switch

Free Contextual Area: Any UI element can be placed inside the free contextual area. Example display of Free contextual area:

Navigation List: Navigation list provides the navigation area and is used inside the contextual panel. The data source property of the navigation list is to be binded to the recursive node. Example display of navigation list.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 699

View switch: View switch is used to toggle between views in the contextual panel. Example display of view switch:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 700

Navigation List in contextual panel Navigation list provides the navigation area and is used inside the contextual panel. The data source property of the navigation list is to be binded to the recursive node. Example display of navigation list:

Exercise: Let us see an simple example that demonstrates how to use the contextual panel with navigation list. Scenario: Display a navigation list and on select of navigation list throw a message of which navigation link was selected. This tutorial is brought to you by www.onlinewebdynprotraining.com Step 1: Go to the Tcode SE80 and create a Webdynpro component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 701

Assign the component to the package or save it in the local object. Step 2: As mentioned earlier, Navigation list must be binded to the recursive context node. Create a recursive context node as shown below. Create a context node with cardinality 0..N.

Create a recursive node for the context node created as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 702

Enter the name for the recursive node and click on select.

Choose the context node as the recursive node from the list.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 703

Create an attribute for the context node ‘Navigation’ to store the list of the navigation values.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 704

Step 3: Go to the layout tab of the view controller and insert the contextual panel UI element.

Right click on the contextual panel UI element and select insert element.

Enter the id and type for the element. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 705

Bind the item source property to the Context node Navigation and item text property to the context attribute list.

Create an action for the event onselect of the navigation panel with transfer UI parmeters.

Right click on the navigation panel and select insert header.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 706

Enter the title for the navigation.

Step 4: Go to doinit method of the view controller and initalize some value for the context node as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 707

Code: DATA LO_ND_NAVIGATION TYPE REF TO IF_WD_CONTEXT_NODE. DATA LT_NAVIGATION TYPE WD_THIS->ELEMENTS_NAVIGATION. DATA LS_NAVIGATION TYPE WD_THIS->ELEMENT_NAVIGATION. LO_ND_NAVIGATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_NAVIGATION ). LS_NAVIGATION-LIST = ’LIST 1 . APPEND LS_NAVIGATION TO LT_NAVIGATION. CLEAR LS_NAVIGATION. LS_NAVIGATION-LIST = ’LIST 2 . APPEND LS_NAVIGATION TO LT_NAVIGATION. CLEAR LS_NAVIGATION. LS_NAVIGATION-LIST = ’LIST 3 . APPEND LS_NAVIGATION TO LT_NAVIGATION. CLEAR LS_NAVIGATION. LO_ND_NAVIGATION>BIND_TABLE( NEW_ITEMS = LT_NAVIGATION SET_INITIAL_ELEMENTS = ABAP_T RUE ). Step 5: Go to the event handler method for the onaction and do the following to display a message on the link selected.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 708

The event handler method contains a importing parameter context_element which contains the object reference for the navigation link selected. Using get static attribute method of interface if_wd_context_element get the value selected.

Code will be generated as below.

Modify the code as below.

Now the component ls_navigation-list will contain the value of the naviagtion link select. Concatenate it with a string variable and display the message.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 709

Code: DATA : LV_STRING TYPE STRING. CONCATENATE ’You have selected the link’ LS_NAVIGATION-LIST INTO LV_STRING. DATA LO_API_CONTROLLER TYPE REF TO IF_WD_CONTROLLER. DATA LO_MESSAGE_MANAGER TYPE REF TO IF_WD_MESSAGE_MANAGER. LO_API_CONTROLLER ?= WD_THIS->WD_GET_API( ). CALL METHOD LO_API_CONTROLLER->GET_MESSAGE_MANAGER RECEIVING MESSAGE_MANAGER = LO_MESSAGE_MANAGER. CALL METHOD LO_MESSAGE_MANAGER->REPORT_MESSAGE EXPORTING MESSAGE_TEXT = LV_STRING. Save and activate the whole component. Create an application and test the output. Ouput:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 710

View switch in contextual panel View switch is used to toggle between views in the contextual panel. Example display of view switch:

The procedure for the veiw switch is no way different from the navigation list in the contextual panel except that the provide the index as importing paramter instead of context_element. Step 1: In the layout tab of the view controller swap the navigation element into view switch element as shown below.

Provide the type as the view switch UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 711

Step 2: Go to the Actions tab and synchronize the UI parameters transferred from the browser. For the action on select, select the parameter from the UI select the index and press enter. This parameter will be added as an importing parameter to the event handler method. This parameter will provide the index selected based on which we can trigger the outbound plug of the veiws.

Modify the code in the method as below. DATA : LV_STRING TYPE STRING. LV_STRING = INDEX. CONCATENATE ’You have selected the index ’ LV_STRING into lv_string. DATA LO_API_CONTROLLER TYPE REF TO IF_WD_CONTROLLER. DATA LO_MESSAGE_MANAGER TYPE REF TO IF_WD_MESSAGE_MANAGER. LO_API_CONTROLLER ?= WD_THIS->WD_GET_API( ). CALL METHOD LO_API_CONTROLLER->GET_MESSAGE_MANAGER RECEIVING

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 712

MESSAGE_MANAGER = LO_MESSAGE_MANAGER . CALL METHOD LO_MESSAGE_MANAGER->REPORT_MESSAGE EXPORTING MESSAGE_TEXT = lv_string. Output:

This example is only for you to know how to use view switch in contextual panel and which index in the view switch have been selected.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 713

Dynamically creating the UI element Each UI element in the Webdynpro ABAP consists of a class using which we can place the UI elements dynamically on the screen. Now lets see how to create these UI element dynamically. Step 1: Go the Tcode SE80( Object Navigator ) and create a webdynpro component.

Assign the component to the package or save it in the loacl object. Step 2: Go to the context tab of the view controller and create the context node as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 714

Enter the name for the node and press enter.

Create an attribute in the context node as shown below. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 715

Enter the name and type for the attribute and press enter.

Node and attribute is now created. Step 3: Go to wddomodifyview method of the view controller. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 716

In the method, check the importing variable first_time to avoid repeated calling of the codings and creating UI elements each time the method is called. The codings written within the condition will be executed only for the first time the method domodify view is called.

Step 4: Get the object reference for the root ui element container.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 717

There is an importing parameter in the method do modify view called view referring to the interface of type if_wd_view. Calling the method get_element of this interface will provide the Specific elements of the view.

Also we have a class for the root container ui element cl_wd_uielement_container. Create a reference variable of that type obtain the reference for the root container UI element. The method get_element is returning the object reference of type if_wd_view_element.

In the below diagram, you will be able to see the interface if_wd_view_element being implemented by the class cl_wd_uielement_container which indirectly makes the interface as the super class and the implementing class as the subclass.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 718

Since we are assigning a object of type more genric(Superclass) to the target variable of type specific (Subclass). Hence we must assign the object using the widening cast. Write the codings as below.

Thus now we have got the controller of the root container UI element in the reference variable lo_container using which we can add UI elements. Step 5 : Before adding an UI element to the root container UI element we need to create it. Now let us create an Input field UI element using the class of the input field cl_wd_input_field. There is a public static method call new input field in the class cl_wd_input_field using which we will be able to create an input field. This method will also return the control to the input field created.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 719

Create the input field as below.

Using the object reference in lo_input we can now control the properties of the input field created. Step 6: Set the layout property of the input field. There is a method call set_layout_data in the class for the input field cl_wd_input_field. This method will help you to set the layout of the input field. Set the layout property of the root container ui element as matrix layout.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 720

Create an object of type matrix layout and pass it to the set layout data method of the input field.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 721

Step 7: Add the input field to the UI Element container as shown below.

Codings in the wddomodifyview if first_time = ABAP_TRUE. *———————————————————————————————* Step1: Get the object reference of the ROOTUIELEMENTCONTAINER. *———————————————————————————————* Create a reference variable to the type of class cl_wd_uielement_container. data : lo_container type ref to cl_wd_uielement_container. * Getting the element reference for the root container UI element. * since the class cl_wd_uielement_container has implemented the interface IF_WD_VIEW_ELEMENT * which makes the interface like a super class and cl_wd_uielement_container as its subclass. * Hence assigning the object from the more general view to variable of less specific view * we are going for widending cast. (According to version less than 7.0) lo_container ?= view->get_element( ‘ROOTUIELEMENTCONTAINER’ ). *———————————————————————————————*———————————————————————————————* Step 2: Setting an input field on the view *———————————————————————————————* There is a class for input field called CL_WD_INPUT_FIELD which contains a public static method * called new_input_field which creates an input field and return the control of the input field UI * element in a reference variable of the type CL_WD_INPUT_FIELD with which we will be able to contol * all the attributes of the input field. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 722

data : lo_input type ref to cl_wd_input_field. CALL METHOD CL_WD_INPUT_FIELD=>NEW_INPUT_FIELD EXPORTING BIND_VALUE = ‘NODE.ATTRIBUTE’ ID = ‘INPUT1 RECEIVING CONTROL = lo_input . *———————————————————————————————* Step 3: setting the layout for the input field. *———————————————————————————————*If we dont set a layout for the input field we will get a dump stating that the no layout exists * for the following UI element. * To set a layout to the input field there is a method called set_layout_data which sets the layout * data for the input field. This method require a control for the type of layout which is of the type * CL_WD_LAYOUT_DATA * There exists a different class for the layouts and there will be method which will return the control * of the required type. * Getting the control of the required type using the class for matrix head data. data : lo_matrix type ref to cl_wd_matrix_head_data. CALL METHOD CL_WD_MATRIX_HEAD_DATA=>NEW_MATRIX_HEAD_DATA EXPORTING ELEMENT = lo_input RECEIVING CONTROL = lo_matrix . * Set the layout data for the input field. CALL METHOD lo_input->SET_LAYOUT_DATA EXPORTING THE_LAYOUT_DATA = lo_matrix . *———————————————————————————————* Step 4: Adding the input field to the UI Element contanier *———————————————————————————————-

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 723

* Using the control of the root contanier ui element add the input field to the root container UI * element passing the control of the input field. CALL METHOD lo_container->ADD_CHILD EXPORTING index = 1 THE_CHILD = lo_input . endif. Save and activate the whole component. Create an application and test the component. Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 724

Enhancement in Webdynpro ABAP In many cases, it will be necessary to modify the standard application components which are being delivered by the SAP. Any unstructured changes in the source code or layout of the Webdynpro component are called Modifications. Modifications may cause conflicts during the upgrade and to avoid such conflicts we can create Enhancements. These enhancement implementations are individual objects and can be managed separately. These enhancements are integrated in ABAP Workbench from release SAP AS 7.0. Enhancement implementation for Webdynpro ABAP: ABAP Webdynpro components cannot be implemented using BADI. SAP has provided the explicit anchor points called Enhancement Options are implemented in the source code at suitable points during the development of the Webdynpro components. Using these enhancement options we can insert a separately developed BADI into the flow of the program and therefore each BADI is an explicit enhancement. In addition to source code we can add. 1. Enhancements in a View 2. Enhancements in a Controller 3. Enhancements in a Component and Window

Note: Several Enhancement implementations can be created for the Webdynpro component and all are independent of one another.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 725

Implementing an Enhancement in a View Implementing an Enhancement in a view is nothing but the modifying the layout of the view or changing the properties of the existing UI elements. Take any standard component and if you go to the layout tab of any view you can see the list of UI elements available in those views and the way they are formatted in the layout. You cannot edit any of these and hence to modify you need an enhancement. Is enhancing a Webdynpro component is a big deal? Does it require a lot of efforts? The answer is no, you just create an enhancement object and start doing whatever you want just like the way you work on with the component you created. All the modifications which you are doing will be recorded in the independent object developed for the Enhancement. What kind of enhancement we can do in the view is as below. 1. Creating a new UI element 2. Suppressing existing UI element 3. Add Actions, Inbound Plugs and Outbound Plugs.

Creating a UI element: You can create new UI elements and the procedure is no different. You can simply insert a new UI element in the layout and process it as usual. Suppressing Existing UI element: We cannot remove the existing UI element from the hierarchy. Instead if we don’t want the UI element to be displayed we can suppress its visibility. Choose the UI element you want to hide, right click on the UI element and select remove UI element. The UI element will not disappear in the hierarchy instead in the property of the UI element a new line gets added with the following

information.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 726

The properties of the UI element before removing it from the hierarchy.

The properties of the UI element after removing it from the hierarchy.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 727

Actions, Inbound and Outbound plugs: For each view we can additionally create plugs and an action for the UI elements. Now let us see an example program on how to enhance a view. Let us take a standard component demotree and enhance it. The output of the component is as

below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 728

Lets hide the subtype of petrol and add a button UI element create an action for it and on click on the button we will display a message that view has been enhanced. Step 1: Go to the Tcode SE80 and Choose the component DEMOTREE.

Go to the layout tab of the view controller and click on the enhance button in the application tool bar to create the enhancement.

System will prompt for enhancement name and description. Enter the name and description for the enhancement and provide the name for composite enhancement framework and click on

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 729

create. Else provide the name for composite enhancement and click on enter.

Enter the description for the composite enhancement framework and press enter.

After the composite enhancement implementation is created press enter again for the enhancement implementation for the Webdynpro component to be created. After creating the enhancement you can see the status of the view changed as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 730

Now to remove the subtype, right click on the node of the tree UI element type and choose remove node element.

Once you have done that you will be now able to see the properties of the node type changed as below. However these elements do not disappears in the UI elements hierarchy as I explained

above in the section.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 731

Right click on the root UI element container and select insert element to add the button UI element.

Create an action for the button UI element.

In the event handler method for the button write the coding to display the message. DATA LO_API_CONTROLLER TYPE REF TO IF_WD_CONTROLLER. DATA LO_MESSAGE_MANAGER TYPE REF TO IF_WD_MESSAGE_MANAGER. LO_API_CONTROLLER ?= WD_THIS->WD_GET_API( ). CALL METHOD LO_API_CONTROLLER->GET_MESSAGE_MANAGER RECEIVING MESSAGE_MANAGER = LO_MESSAGE_MANAGER . * report message CALL METHOD LO_MESSAGE_MANAGER->REPORT_MESSAGE EXPORTING www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 732

MESSAGE_TEXT .

= ’View Have been enhanced’

Save and activate the component and test the application for output. Output: You can see the subtype for petrol and diesel now been hidden.

Click on display.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 733

Enhancing a controller Controller parts created in the original component cannot be changed or deleted using the enhancement implementation. Controller parts include the nodes, controller attributes and the methods. Context node and Attributes: For each existing context, Context node and attributes can be added to the component. If you wish to add an attribute to the existing node then there arise a two kind of situations. 1. If the context node is without a dictionary structure then the attributes can be added to the node without any restrictions. 2. If the context node is with dictionary structure you can only add attributes from the dictionary structure.

The nodes and attributes will be created with an additional property enhancement implementation.

Methods: It is possible to create and implement a new method in the enhancement. In addition to that we can also modify the functionality of the existing method in the following three ways. 1. Pre-Exit 2. Section-Exit 3. Overwrite-Exit

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 734

Technically, here we do not modify the source code of the existing method. Instead when we opt for the exit method a new method will be created and it’s just the sequence in which they are executed differs. However the new method created will have the same interface as the existing method. (Importing, returning and exporting parameters etc.) Pre-Exit: This method will be called before the execution of the existing method. This method will first called by the controller using wd_this reference and later on original method of the controller will be called after the execution of pre-exit method using me object reference. Section-Exit: In contrast to the pre-exit, the section exit method will be called after the execution of the original method. Overwrite Exit: The overwrite exit method replaces the execution of original method by itself. In the previous two types of exit the original method gets executed either before or after the exit method whereas in overwrite exit execution of original method is replaced by the method created and controller will not call the existing method. Attribute: In addition to the methods and context nodes, controller attributes can also be created and used within the methods. Now let us see a simple example on enhancing a controller.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 735

In the previous section enhancing a view we gone through how to enhance a view, now let’s see an example of how to enhance a controller of the same component demotree.

Scenario: We have a supply function method in the controller supply_motor_kind which provides the value for the context node kind. Let’s create an exit method to add our own values to the context node.

Step 1: We will proceed with the same component in the section enhancing a view and modification will be done on same enhancement project. If not create a new enhancement implementation and proceed. Step 2: Go to the methods tab of the view controller and click on overwrite exit method. This tutorial is brought to you by www.onlinewebdynprotraining.com

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 736

A overwrite method of an existing method will be created with the same interface as the original

method. Write the coding to fill in the context node.

Code: DATA LT_MOTOR_KIND TYPE WD_THIS->ELEMENTS_MOTOR_KIND. DATA LS_MOTOR_KIND LIKE LINE OF LT_MOTOR_KIND. LS_MOTOR_KIND-NAME = ’CAR’. LS_MOTOR_KIND-VALUE = ’CAR’. APPEND LS_MOTOR_KIND TO LT_MOTOR_KIND. CLEAR LS_MOTOR_KIND. LS_MOTOR_KIND-NAME = ’BIKE’. LS_MOTOR_KIND-VALUE = ’BIKE’. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 737

APPEND LS_MOTOR_KIND TO LT_MOTOR_KIND. CLEAR LS_MOTOR_KIND. NODE>BIND_TABLE( NEW_ITEMS = LT_MOTOR_KIND SET_INITIAL_ELEMENTS = ABAP_ TRUE ). Save and activate the component and test the application.

Output: In a similar way try to create pre-exit and section exit method and add some values to the context node. I think these two documents (Enhancement for view and controller) will suffice to understand the concept of implementing enhancement. You can now try to create a node and bind it to the UI elements created as the part of enhancement and create action for UI element and process the nodes in it.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 738

Enhancing a component and window Enhancing a component: In the previous two sections enhancement for view and controller we studied what are the options can be done by enhancing a view and a controller. If you see the first two examples the modifications can only done in that view. In order to create a new view or window we need to enhance a component. We can also add component usage to the component by enhancing a component. Enhancing a Window: Enhancing a window includes adding a view in the window. Creating a new navigation link and suppressing the existing link are the part of the enhancement in window. Note: Creating a window comes under the enhancement of component. Now let’s see an example which will demonstrates how to enhance a component and a window. Scenario: We will create a view and embed it in the view by creating a view container UI element in the window. In this section also we will use the same component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 739

Step 1: Go to the Tcode SE80 and select the root of the component demotree and click on

enhance button. Since we have already created an enhancement for the component, we will use the same enhancement.

Note: Enhancement is just an individual object in which we put the modifications we do in the component it is not that necessary that the we need to enhance view in a different enhancement object and component in a different enhancement object. The benefits of putting every kind of enhancement in a separate enhancement object will be when you want to reverse the enhancement you cannot deactivate it instead you have to delete the enhancement. When kept separately that particular enhancement alone can be deleted. Once you have enhanced the component then you can start working on the component just like the custom one you have developed. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 740

Step 2: Right click on the view controller and create the view as enhancement.

Choose the enhancement and press enter.

Provide the name and description for the view and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 741

You can see the view created in the enhancement and not in the component itself.

Insert text view UI element and add the text property as enhanced view.

Step 3: Go to the view controller and add a view container UI element by clicking on enhance button.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 742

Step 4: Go the window controller and click on enhance button. Assign the enhancement project we develop and press enter.Right click on the view container and press embed view.

Add the view to be embedded as view2 which we created as the part of the enhancement. Make you activate you enhancement project before doing this step otherwise your view will not be

displayed. Save and activate the whole component and test the application.

Output: Recap: View enhancement: www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 743

Hiding or adding UI element, Creating action for UI element, Inbound plug and outbound plug. Controller Enhancement: Methods, Attributes and context. Component enhancement: Adding a view, window and component usage Window enhancement: Embedding a view in a window, Creating the navigation link or suppressing the existing one. Practice the following scenario which includes the all the enhancement types. Take the standard component WDT_FLIGHTLIST. The output of the component is as below.

1. Add the flight date as the Input criteria and modify the method for the search accordingly. 2. Make the column airline as link to action and on the click of the link the details of the airline

must be displayed in the popup. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 744

Introduction to floor plan manager Before starting Floor plan manager let us have a little recall on what exactly a webdynpro application as it got something to do with the floor plan manager. Webdynpro Application: A webdynpro application is an application that can be called by the user from the browser using the URL generated for a webdynpro application. It is an independent program that connects the URL which can be accessed by the user to the Window of the webdynpro component.

Technically the webdynpro application is connected to the interface view of the window by an inbound plug and it does not contain any corresponding information about any elements of the corresponding component. It just act as the carrier of the webdynpro component and triggers the execution of the component when the URL is being called. Note: Inbound plug of the window has to be of type start up plug. Coming to the topic what a floor plan manager is and how it is related to an webdynpro application as mentioned earlier, the explanation is as below. Floor Plan Manager: Floor plan manager is an framework using which we can create and configure the webdynpro applications of the webdynpro abap. Using the configuration editor of the floor plan manager we can combine different application specific view of the different component into a single new floor plan manager application. This floor plan manager application can be integrated into the portal for accessing this component. This is something similar to view where in view we have our application data distributed across different tables and we combine it in a view where as here different components which are required to do a particular functionality are assembled using a FPM application. Advantages of Floor plan manager: 1. This design follows the SAP UI guidelines. 2. User of this application benefits by quicky and easily familarize themselves with the new applications. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 745

3. The integration of Floor plan and GUIBB in the FPM accelerates the creation of UI and ensure that all the UI element behave in a same way. 4. Time consuming user interface programming is greatly reduced by application programming. 5. Simple applications are adjusted by configuring the FPM instead of modifying the webdynpro component. (Reduced development effort). [E.g hiding a view of container in the view.] 6. Any such adjustment made to the application using the configuration editor of the FPM are called modification free changes. 7. FPM Uses the webdynpro adjustment concept. 8. Integration of different webdynpro components in one FPM application. SAP UI guidelines says the use of FPM is preferred instead of Webdynpro application as it increases the consistency of UI elements.

Adjustment concept is nothing but fitting the webdynpro application according to your needs which again classified into implicit and explicit configurations. Role of Floor plan manager: Floor plans are nothing but a design template for the application that represent the certain task or process where as floor plan manager implements this floor plan to maintain the uniformity across the applications. Some of the Available floor plans for creating and confguring the Applications are: 1. Object instance floorplan(OIF) 2. Guided activity floor plan(GAF) 3. Quick activity floor plan(QAF) 4. Overview page floor plan(OVP) The floor plan manager automatically implements the following areas of the floor plan. 1. Identification area 2. Navigation region 3. Message area 4. Content area www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 746

Content area: Content area is the areas of FPM where the system displays the application specific view. We can call and change these areas directly using the configuration editor whereas floor plan manager checks whether these changes are leading to any technical errors. Floor plan manager also supports in creating and configuring the application specific view using UIBB. (User interface building blocks). Some UIBBs are: 1. Form component 2. List component 3. Tabbed component 4. Search component 5. Hierarchical list component We have a special configuration editor for configuring these UIBBs. An this configuration editor can be started from the FPM configuration editor. Pre-requisites: Some pre-requisites that the webdynpro application and component should posses in order to be configured by the floor plan manager are as below. 1. The webdynpro application must be assigned to the component of the floor plan or you can directly go and create an application to any one of these components. Some standard floor plan components: 1. FPM_OIF_COMPONENT – Object instance floor plan 2. FPM_GAF_COMPONENT – Guided activity floor plan 3. FPM_OVP_COMPONENT – Overview page floor plan Note: When assigning the webdynpro application to one of the first two components the webdynpro application is also automatically assigned to the FPM_IDR_COMPONENT using which we can configure the identification area of the floor plan. 2. The webdynpro component must have implemented the interface IF_FPM_UI_BUILDING_BLOCK. Configuration editor of floor plan manager:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 747

We can use FPM configuration editor to enhance application to fit the user needs. Navigation region: The navigation region is divided into two regions. 1. Control region 2. Hierarchy Control region: In this area we select which screen of the webdynpro application you would like to configure. Hierarchy: This area gives the hierarchical display of elements we can configure. Preview: The preview function shows you the user interface of the application. You can use the preview function to navigate within the user interface. However, not every element can be accessed. A selected element is highlighted in color in the hierarchy view and its attributes displayed in the attribute view. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 748

Action area The action area contains links to all the actions you can execute for the selected application user interface. The actions that can be selected depend on the concrete configuration of the application. This means that selection of actions can differ within a configuration. Attribute view When you select a configurable user interface element either in the preview or in the hierarchy, the attributes of these user interface elements are displayed in the attribute view. You can change these attributes here. The attributes you can change depend on the user interface element you selected. You can immediately see any changes made in the preview. Message area In this area, potential conflicts in the configuration, such as tabs with the same name, are immediately displayed. Floor plan manager application: A floor plan manager application is an application that calls one of the floor plan. We can use explicit configuration to assign additional webdynpro components as user specific views using UIBBs. Some generic webdynpro components are: FPM_LIST_UIBB – List component FPM_FORM_UIBB – Form component FPM_TABBED_UIBB – Tabbed component So far we have studied what is the floor plan manager, what are its roles and what is floor plan manager application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 749

FPM using Object instance floor plan The following section explains the creation of simple floor plan manager application using OIF (Object instance floor plan). Scenario: Executing a component using the Floor plan manager application. We will create a webdynpro component with two view and two windows with each view assigned to one window and we will display it using the OIF floor plan. Standard component for OIF: FPM_OIF_COMPONENT. Any floor plan manager application usually consists of two different components. 1. Floor plan specific component (FPM_OIF_COMPONENT or FPM_GAF_COMPONENT). 2. Component for header area. (FPM_IDR_COMPONENT) [Not available for OVP]

Step 1: Go to the Tcode SE80 and create the webdynpro component as shown below.

Assign the component to the package or save it in the local object. Step 2: In the implemented interfaces tab of the webdynpro component implement the interface (IF_FPM_UI_BUILDING_BLOCK) for the fpm which is essential for the component to participate in the FPM event. Enter the interface name and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 750

Click on the Re-implement button to implement the interface. This tutorial is brought to you by www.onlinewebdynprotraining.com

Once the interface has been implemented you can see the indicator turning into green. The methods of the interface can now be found in the methods tab of the component controller. In this example we are just going to display the view using FPM configuration and hence there is no need to code in the methods. We will see how to use those methods in the later sections. Step 3: Go to the layout tab of the view controller and Insert a text view UI element as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 751

Provide the ID and type for the UI element and press enter.

Enter the Text “First View” in the text property of the Text View UI element.

Step 4: By default the view created at the time of creation of component will be embedded in the window created at the time of component. Now let us create one more view and embed it in a new window. Right click on the view controller and choose create.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 752

Provide the name and description for the view and press Enter.

In the layout tab of the view created add a text view UI element as done before in the first view.

Add the Text property of the text view as “Second View”.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 753

Step 5: Create a window and embed the second view into that embed. Right click on the window and choose create.

Provide the name and description for the window and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 754

Right click on the window and select embed view to add the view to the window.

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

Save and activate the whole component. Step 6: Create an application and assign it to the component for the floor plan or directly create an application for the floor plan component FPM_OIF_COMPONENT.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 755

Provide the component, interface view and plug name as shown below.

Step 7: Go to the Component FPM_OIF_COMPONENT and expand the application and select the application you have created.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 756

Browser will open for the configuration editor of the floor plan. Enter the configuration name for the FPM and click on create.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 757

Assign the configuration to the package or save it in the local object.

Configuration for OIF will be created successfully. And as mentioned in the top we can see any FPM application will consist of two application specific components. Not applicable for OVP. Enter the name for the configuration of component FPM_OIF_COMPONENT and press enter you will see the go to component configuration button becomes enabled.

You will get an error configuration does not exists. Click on the create button.

Assign this configuration to the package or save it in the local object. Component configuration will be created. Expand the node main view on the left hand side in the navigation bar and choose the UIBB. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 758

Select add main view in the right hand side tool bar.

In a same way as above expand the node main view2 and add the component and second view.

If you want to change the name of the main view you can change it using the attributes. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 759

Save the configuration and test the configuration. You may get some default button of the FPM which we can disable it or delete it later. Now let’s test the configuration.

Output: Main view 1

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 760

Main view 2

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 761

FPM Using GAF(Guided Activity Floor plan) In the previous section we saw how to create an application using OIF for the component ZCSK_FPM_OIF. In this section we will study how to create the application using GAF for the same component.

Step 1: Go to the Tcode SE80 and open the standard component FPM_GAF_COMPONENT.

Right click on the component and create the webdynpro application for the component. In the previous section we created the application in the component we created and mapped it to the floor plan manager component. Anyway both are one and the same.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 762

Enter the name and description for the application and press enter.

Save the application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 763

Step 2: Right click on the application and select create/change configuration. It will open the application configuration editor for the FPM.

Provide the configuration ID and click on create to create the configuration.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 764

Assign the configuration to the package or save it in the local object. Enter the configuration name and click enter. Go to component configuration button will be enabled. Click on go to configuration button to Open the FLUID(Configuration editor for FPM).

The system will throw an error message as configuration does not exists. Click on create to create the configuration.

Assign the configuration to the package or save it in the local object.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 765

Step 3: Expand the node main step and choose the UIBB. Enter the component name and choose the view. Here I have chosen the component which we have created in the previous section for OIF Application.

In the right hand side you will be able to see a tool bar. Click on add main step to add the second window.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 766

Main step will be added as below.

Now expand the node for the main step 2 and choose the UIBB to add the component and view. I have added the second window of the component ZCSK_FPM_OIF.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 767

We can change the name of the mainstep using the attributes of the main step. Explore the configuration editor for more options.

Save the configuration. Go back to the application configuration using the breadcrumb available in the top and test the application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 768

Test the application configuration.

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 769

Click on next to move on to the next view.

Some standard buttons come along with the application with actions for it. We can hide or disable them as well as we can add toolbar elements and handle them using the events of the interface if_fpm_ui_building_block. We will see the usage of these events in the upcoming sections.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 770

A Simple Adobe Form In the following section we will see how to create a simple form Using an Adobe Form. Layout of the Form we are going to create:

Pre-requisites: Adobe life cycle designer. Step 1: Go to the Transaction SFP and create an Interface. An interface is mandatory for every form. The purpose of interface is to include the data in the form which was unknown at the time the form was created. These data’s can be: 1. Data from database tables 2. Data from SAP system like date. 3. Data that have been calculated or implemented.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 771

Enter the name for the interface and click on create.

Enter the description for the interface and press enter.

Assign the interface to a package or save it in a local object. Step 2: Now let us create the importing parameter to get the details from the user to be displayed in the form.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 772

In the import tab of the form interface, click on the create to add an importing parameter.

Add an importing parameter as shown below.

Save and activate the form Interface. A function module will be generated in the background which will pass the parameter values to the form. Step 3: Go back to the Tcode SFP (Form Builder) to create the form.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 773

Enter the name for the form and click on create.

Enter the description and interface for the form and press enter. Save the form in package or assign it to the local object.

Step 4: Drag and drop the importing parameters of the interface to the form as shown below. This is where the data’s obtained from the user in the interface are passed to the form through

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 774

context attributes.

Step 5: Design the layout for the form and bind these data’s in the form.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 775

Click on the layout button to open the form designer in the full screen mode.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 776

Step 6: Go to the palettes->object library to view the list of elements available.

You will get a small pop up toolbar which contains all the elements that can be placed in the

layout.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 777

Choose the Text element and place it on the layout. Place the text element in the required position on the page. Double click on the Text to add the user defined text.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 778

Similarly place the text field UI element.

Double click on the text field and change the caption of the text field as name.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 779

In the value tab change the type as read only.

Go to the binding tab and bind the attribute of the form to the text field so that the value in the context attribute will be displayed in the text field at execution.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 780

Bind the text field to the attribute name so that value passed to the name will be displayed here.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 781

In a similar way create a text field element for address and bind it to the respective attributes.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 782

Click on preview pdf to preview the look of the form.

Save and activate the whole form and execute the form. Output: Enter the input parameters and click on execute.

Provide the printer name LP01(Dummy Printer) and click on print preview.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 783

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 784

Microsoft silverlight integration in Webdynpro ABAP The Webdynpro UI elements like table, radio button etc are some of the Graphical User interface elements provided by the SAP for developing Webdynpro applications. Developers assemble these prescribed UI elements in their layout according to the requirement. Right now in Webdynpro ABAP there is no infrastructure like creating a customer specific UI element. In order to enable the scope of integration of different technologies and Customer specific UI blocks sap has provided the following. 1. Microsoft Silverlight 2. Adobe FlashIsland

We will study about the Adobe flash Island in the upcoming sections. Microsoft Silverlight: Microsoft Silverlight is a technology for developing Rich Internet Applications (RIA). The developed RIAs can be run on all common browser platforms and operating systems. These applications are executed within the browser with the Aid of Silverlight plug-in. To use your own Microsoft Silverlight component within Webdynpro, it must integrate the library provided by NetWeaver. This enables communication between the Microsoft Silverlight application and the Webdynpro framework. In Webdynpro the Silverlight UI element is generated in a View. Then this UI elements source is assigned with a Microsoft Silverlight application of format (.XAP). Also for the component to access it this Silverlight application must be added to the mime repository of the component. How to create a Microsoft Silverlight Application? The Microsoft Silverlight Application can be developed in a Microsoft Visual Studio Development environment. This project consists of three parts: 1. The Microsoft Silverlight library provided by SAP NetWeaver, and necessary for communication between the Microsoft Silverlight application and the Web Dynpro Framework. 2. Your own Microsoft Silverlight component 3. Application developers must call their self-developed Microsoft Silverlight components in the SilverlightIsland wrapper. The SilverlightIsland component provides methods to access data of the UI element and trigger events.

Prerequisites

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 785

To implement Microsoft Silverlight Island applications for Web Dynpro ABAP, you require the following: Microsoft Visual Studio and the Silverlight Add-on (development environment) Silverlight browser plug-in (for using Microsoft Silverlight Islands on the client) The Microsoft Silverlight library provided by SAP NetWeaver: o This library is stored in the MIME Repository under: o SAP/PUBLIC/BC/UR/nw7/SilverlightIslands o The Microsoft Silverlight application provided by the customer as an XAP file

Being an ABAP developer you don’t have to be worried about developing a Microsoft Silverlight component. Concerned person in the organization will take care of this. Just get to know how to use this Silverlight in a Webdynpro application. Now let us develop a simple Webdynpro application that demonstrates the Use of the Silverlight UI element. Step 1: For developing a Silverlight UI element we need a Microsoft Silverlight component. As we don’t have the silver light component let’s take one of the Silverlight component developed by the SAP. Go to the Tcode SE80 and open the Webdynpro component WDR_TEST_SILVERLIGHT developed by SAP. In the mime repository of the component you will be able to see the Silverlight component used by the SAP for that component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 786

Right click n the Silverlight simple.xap and choose download.

A pop up will trigger. Choose the file location and click on save.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 787

Step 2: Go to Tcode SE80 and create a Webdynpro component.

Assign the component to the package or save it in the local object. Step 3: Import the Microsoft Silverlight component in the Webdynpro component as shown below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 788

Choose the silver light component and select open.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 789

System will prompt for creating a mime type. Press save.

Now you can see the Silverlight component in the mime repository of your component.

Step 4: Go to the layout tab of the view controller and insert a view container UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 790

The purpose of this view container is to hold the silver light UI element. Remember I mentioned above in the section Silverlight UI element is generated in a view and this view container is required for us to hold that view. Step 5: To create a Silverlight UI element. Right click on the view controller and create a view.

Enter the view name and description and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 791

Whenever the View is created the root of all the UI elements “ROOTUIELEMENTCONTAINER ” will be of an UI element type transparent

container. For a view to be used as a Silverlight UI element we need to convert the Root UI element container to the type of Silverlight Island. To convert it, right click on the root UI element Container and Select Swap root element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 792

Provide the type as Silverlight Island and press enter.

As I mentioned earlier on the top of the section, the Silverlight UI element must be assigned to the Microsoft silver light component. Now assign the Silverlight component which we imported in the mime repository to the source property of the Silverlight island UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 793

Source, Height and Width are the important properties to be specified to the Silverlight Island. Step 6: Go to the window controller and embed the Silverlight view in the view container we have created in the main view.

Provide the view to be embedded as the Silverlight and press enter.

Save and activate the whole component. Step 7: Create a Webdynpro application to test the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 794

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 795

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 796

We can also pass the data to the Silverlight using it data source properties, create event for the Silverlight UI element. We will more of this like how to pass the data and handle events in the Upcoming sections Note: Ref to standard Webdynpro demo components for more information on this. Component Names: DEMO_SILVERLIGHT_SEATS WDR_TEST_SILVERLIGHT

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 797

Adobe FlashIsland in Webdynpro ABAP Pre-requisites: Read the document Microsoft Silverlight Island introduction part. Adobe Flash Island: Adobe Flash Island is based upon the Adobe flex. Similar to Microsoft Silverlight, Adobe flex is also used for developing rich internet applications. We can create new UI block as like we did in the Microsoft Silverlight in the form of view and embed it in the Webdynpro application. The usage of both the Silverlight and Adobe island in Webdynpro for ABAP is similar. The different is just the UI block component is created either with Microsoft visual component or Adobe flex. To integrate the flex-based or flash based application the application parameter wdlightspeed must be active. Flash Island UI element: Flash is a technology for the development of multimedia content. Adobe flash films are created with the Adobe Creative Suite development environment. Adobe Flex is a platform for Rich Internet Applications (RIAs). Adobe Flash and Flex applications are compiled as ShockWave Flash (SWF) files that can be executed with the Adobe FlashPlayer. The Adobe FlashPlayer is available as a Web browser plug-in for various browser versions and platforms. Note : In order to debug store the corresponding version of flash file with suffix –debug along with it in the mime repository of the component. Eg: Myflashapplication.swf – Flash file Myflashapplication –debug – For debugging. Prerequisites To implement Adobe Flash Islands applications for Web Dynpro ABAP, you require the following: Adobe Flex Builder 2 or 3 (development environment) Adobe Flash Player (to use Adobe Flash Islands on the client) Adobe Flex Library provided by SAP NetWeaver

This library is stored in the MIME repository under SAP/PUBLIC/BC/UR/nw7/FlashIslands Adobe Flash application provided by the customer in the form of a SWF file (together with associated Debug-SWF file) www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 798

The overall process of creation of the UI element using Flash Island is similar to that of the Microsoft Silverlight. Step 1: In order to create a flash island UI element we need a SWF file to be included in the mime repository of the component. This type of files will be developed in the Adobe flex and as we don’t have any knowledge or provision for that let us download one of the flash file created and embedded by SAP in a demo component. The purpose of flash file which we are going to download is to display the data in the barchart format. This tutorial is brought to you by www.onlinewebdynprotraining.com Go to the Tcode SE80 and enter the name of the Webdynpro component as

DEMO_FLASH_PROFIT.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 799

Right click on the file MyflexProj.swf and choose download to download that file to your PC.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 800

System will prompt for file save location. Specify the required location and save the file.

The flash file has been saved in your computer. Now let us create the component that demonstrates how to create a Flash Island UI element. Step 2: Go to the Tcode SE80 and create a Webdynpro component.

Assign the component to the package or save it in the local object.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 801

Step 3: For a view to be created as a Flash island UI element we need to have the required flash file in mime repository of the component so that it can be assigned to that view later. Hence Upload the flash file which we downloaded earlier in our new Webdynpro component.

System will prompt for file directory choose the file location and click on open.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 802

System will now prompt for creating a new mime type. Click on save.

Flash object will now be imported in the mime repository of the component as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 803

Step 4: Go to the context tab of component controller and create a context node as shown below.

Create three Attributes Company, Revenue, and Profit to the context node of type string under

the node.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 804

Step 5: Go to the context tab of the view controller and drag and drop the context node in the view controller.

Step 6: Go to the layout tab of the view controller and Insert a table UI element and bind the table UI element to the context node.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 805

In the layout tab insert a view container UI element to hold the Flash Island UI element.

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

Enter the name and description for the view and press enter.

Step 8: In order to create the flash island UI element the type of the Root UI element container must be of type Flash Island. Right click on the root UI element and select swap root element to

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 806

change the type.

Choose the type as flashisland and press enter.

Height, SWF File and Width are the important properties of the flash island UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 807

Right click on the flash island UI element and select insert data source to bind it to the context data. Before doing so drag and drop the context node created in the component controller in our

view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 808

Provide the name for the data source and Bind the data source property to the context node.

Note: Enter the name in the same case letter provided by me.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 809

Right click on the data source and choose insert property.

Provide the name and bind the value property to attribute company.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 810

Similarly create two more properties and bind the attribute revenue and profit.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 811

Step 9: Go to the window controller and embed the view for flash island in the view container of

the main view. Choose the view to be embedded as flash island view.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 812

Step 10: Let us populate some value in the context nodes. Go to doinit method of the view controller and initialize the values as shown below.

Code in the method: DATA LO_ND_CHART TYPE REF TO IF_WD_CONTEXT_NODE. DATA LT_CHART TYPE WD_THIS->ELEMENTS_CHART. DATA LS_CHART LIKE LINE OF LT_CHART. LO_ND_CHART = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_CHART ). LS_CHART-COMPANY = ’Lava Technologies’. LS_CHART-REVENUE = ’250 . LS_CHART-PROFIT = ’44 . APPEND LS_CHART TO LT_CHART. CLEAR LS_CHART. LS_CHART-COMPANY = ’Batman Enterprises’. LS_CHART-REVENUE = ’226 . LS_CHART-PROFIT = ’21 . APPEND LS_CHART TO LT_CHART. CLEAR LS_CHART. LO_ND_CHART>BIND_TABLE( NEW_ITEMS = LT_CHART SET_INITIAL_ELEMENTS = ABAP_TRUE ). Save and activate the whole component. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 813

Step 11: Create an Webdynpro application and test the component.

Output:

Select the lead and you can see the way the Flash UI element will be loaded on the screen. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 814

Closing a web browser through action There may be a requirement where you may display certain data’s in the pop up and by performing some action in the pop up the action has to be completed and the web browser has to be closed automatically. In the following section we are going to see how to close the web browser by the action on the window. Take any component which was previously developed by you and we will proceed from there. Step 1: In order to close the browser the application parameter close_window of the Webdynpro application has to be set to ‘X’. Go to the application created for your component and in parameters tab include the parameter close_window.

When the value of this parameter close_window is set to X the system will close the browser. Step 2: Go to the layout tab of the view controller and insert a UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 815

Provide the text and create an action for the UI element.

Step 3: Go to the window controller and created an outbound plug of type exit plug.

Step 4: In the event handler for the method do the following. 1. Get the reference of the view controller 2. Get the reference of the window in which the view is contained. 3. Set the parameter of the close_window as x and specify the outbound plug to be triggered.

Getting the reference variable of the view controller. Using code wizard generate the code for getting the getting the reference of the view controller. Call the wd_get_api method of the current controller to get the reference of the current

controller.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 816

Code will be generated as below.

Now the reference of the view V_MAIN will be in the variable lo_api_v_main. In the interface type of the reference variable there is a method called GET_EMBEDDING_WINDOW_CTLR which will return the reference of the window in which the current view has been embedded.

Call this method using pattern to generate the codes.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 817

Code will be generated as below.

Modify the code as below. Now using the reference of the window controllers set the application parameter and pass the plug to be triggered as shown below. Using the method fire_plug of the interface for window pass the application parameter value and the plug to be triggered.

Check the parameters of the method for better understanding of below code. This method contains two importing parameters.

If you check the table type wdr_event_parameter_list the value of the parameters is passed as the data reference variable. Hence format the data to be passed to the importing parameters “PARAMETERS” and pass it to the method. Populating an internal table to be passed to import parameter “PARAMETER”. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 818

Pass the data to the method as below. Code will be generated as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 819

Modify the code as below. Code in the method: DATA LO_API_V_MAIN TYPE REF TO IF_WD_VIEW_CONTROLLER. LO_API_V_MAIN = WD_THIS->WD_GET_API( ). DATA : LO_WINDOW TYPE REF TO IF_WD_WINDOW_CONTROLLER. CALL METHOD LO_API_V_MAIN->GET_EMBEDDING_WINDOW_CTLR RECEIVING RESULT = LO_WINDOW. DATA : IT_PARAMETERS TYPE wdr_event_parameter_list, WA_PARAMETERS TYPE wdr_event_parameter, LV_DATA TYPE REF TO DATA. FIELD-SYMBOLS : TYPE ANY. CREATE DATA LV_DATA TYPE C. ASSIGN LV_DATA->* TO . = ’X’. WA_PARAMETERS-NAME = ’CLOSE_WINDOW’. WA_PARAMETERS-VALUE = LV_DATA. INSERT WA_PARAMETERS INTO TABLE IT_PARAMETERS. CLEAR WA_PARAMETERS. CALL METHOD LO_WINDOW->IF_WD_VIEW_CONTROLLER~FIRE_PLUG EXPORTING PARAMETERS = IT_PARAMETERS PLUG_NAME = ’EXIT_PLUG’ . Save and activate the whole component test the application.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 820

Output: Click on the close link your browser will be closed.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 821

Page builder Webdynpro ABAP page builder is a framework that enables administrator to put together webdynpro applications without any programming required. Example display:

Typically, you use the Page Builder to design home pages that enable users to access their main tasks and that provide the option to adapt the page, for instance by adding CHIPs to it in which their favorite Web pages are embedded. This tutorial is brought to you by www.onlinewebdynprotraining.com

Page builder Concepts: Page builder are based on the webdynpro application configurations of the webdynpro component WDR_CHIP_PAGE. Creating configuration for the application of components allow us to add CHIP to these applications. The CHIP that are available to be configured in the application can be found in the Chip Catalog. Steps to build a page using page builder: 1. Creating a page with page builder 2. Implementing side panel 3. Creating webdynpro chips www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 822

CHIP in webdynpro ABAP CHIP stands for Collaborative human interface part and is introduced as a part of Netweaver 7 enhancement package 2. A CHIP is an encapsulated, stateful piece of software application that provides a functionality which can be used in collaboration with Page Builder page or Side Panel. All the available CHIPs are registered in the CHIP Catalog. CHIP Model: The chip model describes the capability of the CHIP. Technically a chip is nothing but a webdynpro component that implements a webdynpro component interface. Chip consists of: 1. Port 2. Wiring 3. Tags

Port: Communication with the chip is implemented through special interface called Ports. There are two kinds of Ports available in a CHIP. 1. Inports 2. Outports

Inports: Inports are used to receive information from other chips. Here you specify an importing parameter in which you get the data from the other chips or page builder or side panel. Typically inports are nothing interface method with importing parameters.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 823

Outport: Outport is used to expose the internal status of the CHIP. Basically Outports are nothing but the interface event of the component.

Wiring: Using wiring we can connect CHIPs so that they can interact with each other. Wiring between the two CHIPs is established via Outport of the sending chip and inport of the Receiving CHIP. Tags: Tags can be assigned to the port and parameters of the port. Basically a tag is a string. If a same tag is available in the application and the CHIP then they are automatically connected through wiring and data is transported between them.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 824

Creating a Webdynpro CHIP component Requirement: Create a chip that provides information about the Airplanes. The information about the airline carrier is available in the table SCARR. We need to create a webdynpro component that supply the information about the carrier and create a CHIP for it. Procedure: 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 component controller and create a context node for the table structure scarr. This tutorial is brought to you by www.onlinewebdynprotraining.com Enter the name for the node and provide the dictionary structure as scarr and click on add attributes from the structure to add attributes.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 825

Select all the attributes and press enter.

Context node will be created as below.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 826

Step 3: Go to the methods tab of the component controller and create a method to fill the context node. Note : Method has to be an Interface method

Create an importing parameter for the method.

Write the following code inside the method.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 827

Code: DATA LO_ND_CARRIER TYPE REF TO IF_WD_CONTEXT_NODE. DATA LO_EL_C ARRIER TYPE REF TO IF_WD_CONTEXT_ELEMENT. DATA LS_CARRIER TYPE WD_THIS->ELEMENT_CARRIER. LO_ND_CARRIER = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_CARRIER ). LO_EL_CARRIER = LO_ND_CARRIER->GET_ELEMENT( ). SELECT SINGLE * INTO LS_CARRIER FROM SCARR WHERE CARRID = IS_CARRIERS-CARRID. LO_EL_CARRIER->SET_STATIC_ATTRIBUTES( STATIC_ATTRIBUTES = LS_CARRIER ). Step 4: Go to the layout tab of the view controller and create the layout to display the airline details. In the context tab of the view controller Drag and drop the context node from the component controller to view controllers context.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 828

In the layout tab use the code wizard to create the form. Select the form and click on continue.

Specify the context node and press enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 829

Arrange the layout and activate the whole component.

Step 5: Right click on the component and create a webdynpro chip for the component.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 830

Usually we used to create an webdynpro application to run the component, instead of creating the webdynpro application we are creating the webdynpro chip which can be integrated in other application using page builder of side panel. Enter the name for the chip and press enter.

Enter the display name and description for the chip. Remember the display name of the chip. This will be required while adding the chip to side panel.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 831

Create a inport for the webdynpro component.

Select the interface method created and click on enter.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 832

Port will be created as below.

Click on create parameter to create a parameter to the port.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 833

Select the field carrid and press enter.

Click on show tag button to add a tag to the parameter and click on create to create the tag.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 834

Enter the name of the tag as carrid.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 835

Save the webdynpro CHIP. We have now created the webdynpro chip.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 836

Using a chip in side panel In the previous section we have see how to create the CHIP. In the following section let us see how to use the CHIP. In the following example I am going to use the chip to be displayed in the side panel. Step 1: Go to the Tcode SE80 and create the 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 for the table SFLIGHT of cardinality 0..N.

Step 3: In the layout tab of the view controller insert the page header UI element.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 837

Note: The name of the page header UI element should be PAGE_HEADER.

For more information on page header refer to the following link. http://help.sap.com/saphelp_nw70ehp1/helpdata/en/13/a0af4241d4b911e10000000a1550b0/cont ent.htm Step 4: Right click on the page header UI element and select insert title content.

Provide the ID, and type of the UI element as transparent container.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 838

Step 5: In the layout tab of the view controller, create a table UI element and bind the context node to the table.

Step 6: Create an object reference variable for the side panel in the attributes tab of the view controller. Here we get the reference of the side panel and store it in this attribute and use it across different methods in the view controller.

Step 7: Go to the do init method of the view controller and do the following. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 839

Initialize the values for the Context node:

Initialize the side panel.

Step 8: In the previous step we are initializing the side panel with action ‘OPEN_SIDE_PANEL’. This event handler method will be called when event occur in the side panel. Create an event handler method with the name OPEN_SIDE_PANEL and do the following.

Write the coding to open the side panel. www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 840

Step 9: Save and activate the whole component. Create the webdynpro application to test the component.

Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 841

Thus far, we have created a webdynpro component with page builder and side panel. The output of the application will be displayed as above. We now need to configure the side panel to add the webdynpro chip in it. Configuration Part: There are two options to open the side panel configuration tool. 1. Append to the URL: &sap-config-mode=X This is for the administrator, a client dependent customizing mode 2. Append to the URL: &sap-config-mode=config This is for the programmer, a client independent customizing mode

Now in this example let us open the side panel configuration in admin mode. In the URL of the application, add &sap-config=X and load the application.

You will now be able to see a link on the page header with the name set additional information.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 842

Click on the link. An configuration panel will be opened on the right hand side. Enter the name for the configuration and click on create/edit.

Side panel customizing window will be opened. Enter the description and select the link chip catalog on the right hand side of the window.

In the chip catalog, choose the chip which we have created. Drag and drop the chip in the side panel.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 843

Note: Display name we provided at the time of creation of chip will be displayed. You will able to see the view of the chip component loaded in the panel.

Save the configuration and close the window. Also save the additional information to open the side panel as soon as the application is started.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 844

Now we do wanted our chip in the side panel to respond to the changes in the application. Our next step will be wiring. Wiring in simple is nothing but transferring the data from the application component to the CHIP. When the tag name on both the side is same wiring will be done automatically by the system. In the previous section while creating the chip component we created the tag for the inport parameter with the name carrid. If we create a tag with the same name in the webdynpro application then the data from the application to the chip component will be transferred automatically. To configure the tag in the webdynpro application, open the webdynpro application in the &sapconfig-mode=X and do the following. Right click on the field which is to be transported and select manage tags.

Add the tag with the same name carrid to enable the auto transport.

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 845

Close the window and open the webdynpro application in normal mode to test the application. Output:

www.onlinewebdynprotraining.com One stop shop for all your training needs.

Page 846