Let us learn how to reuse a view of different component as pop up. Before reading this chapter, kindly read the following chapters
what it takes to reuse a view
Reusing a view of another component.
In this example, I am going to provide a f4 help to the product field in the ITEMLIST assignment block that we created in the previous chapters.
I am going to reuse the view set ‘Search Help ’in the component PRD01QR. This view set has two views one is search and another one is result. So if reuse this view set, I will able to present two views together to the user. So he can search the products and select the results.
Step1.
First rule to reuse any view is to make a component usage. So here I am reusing the view from the component PRD01QR. Create one component usage in the target component in which you want to reuse a view.
In the Interface view field, I selected the option SearchHelpWindow as interface view. Because the viewset ‘SearchHelp’ which I want to reuse is assigned to the window ‘SearchHelpWindow’ and this window is exposed as interface view. You can see the below screen shot of run time repository of component PRD01QR.
You can see there are three entries under component interface node, that’s why I got three entries in field interface view while creating component usage.
Save the entries. Just press on continue if there is any another pop up.
Step2:
We need to generate the V getter method for the required field to give a value help. Here field is ORDERED_PROD. Go to the view and to context node under which attribute is located. Right click on the attribute and choose the option generate V-GETTER.
Once method is generated , write the following code inside method.
Here OP_SAERCHPRODUCTS is the outbound plug. Create one variable with GV_INDEX with type INT4 in the context node class of attribute for which we are providing this help.
Step3:
We need to create one outbound plug with the same name as above mentioned in the code. go to the view and create one outbound plug. Just give the name as SEARCHPRODUCTS. Prefix ‘OP’ will be automatically added by the framework.
Before going to code in this method, we need to change its visibility to public. Framework automatically creates outbound plugs in the super class with protected visibility so that we can redefine according to our requirements in the subclasses. However for our requirement, we need to change its visibility. As we know that we cannot change the visibility of a inherited method in the subclass. We need to go the super class.
Go to the view implementation class first, go to the properties tab. Double click on the super class.
Change into edit mode and open the methods tab. Change the visibility from protected to public for the created outbound plug. Save and activate the class.
We are not over. We need to change the visibility of this method in the subclass as well. Go back to the view implementation class. Change into edit mode and click on button SOURCE code based as shown below.
It will list the class code.
Move the code ‘methods OP_SEARCHPRODUCTS redefinition’ from protected section to the public section as below. Now Let us code in the method. Write the following code inside the method.
Now activate the class. While activating choose all entries in the list. Now you can see the visibility of this method as public in the view implementation class.
Here PRODUCT_POPUP is a public attribute of view implementation class.
Here we are using the method create popup of attributeWINDOW_MANAGER of component controller. The values which we are sending are the values that we used while creating component usage.
Next we are calling the method SET ON CLOSE EVENT of popup to set the event handler when popup is closed. So this event handler will be triggered when pop up is closed.
The next statement is optional; we use this method if we want to display any messages on the pop up. Generally messages won’t be shown up on the pop up unless we use the set display mode method.
The last statement, as the method name suggested, will open the pop up.
At this step, pop up is ready. As soon as user presses the F4 button on the field, first outbound plug will be triggered and the above code will be executed and pop up will be created.
On the pop up, user will be presented two screens to search the product and to see the results. Then user will choose any product. Once he chooses, control automatically goes the event handler that we set using the method SET ON CLOSE EVENT. So we need to get the product that user selected on the pop up , in this event handler.
Step4:
We need to create the event handler with the above mentioned name and need to code in that event handler.
Go to the view and create one event handler with the name PRODUCT.
Write the following code inside the event handler.
We need to know some points above this code.
LR_CONTEXT_NODE = PRODUCT_POPUP->GET_CONTEXT_NODE ( IV_CNODE_NAME = 'PRD' ).
What is ‘PRD’ here?
It is context node in the component ‘PRD01QR’ at component controller level. This has been exposed in the runtime repository. Only these types of context nodes are accessible outside of component. We are accessing this context node using the GET_CONTEXT_NODE method PRODUCT_POPUP.
But from where data is coming to the context node PRD in that component?
As we know, once user searched the products, he will choose one product from the result list. As soon as he selects the product, there is one event handler ‘EH_ONCHOOSE’ triggered in the result view of product component.
The code above will take user selected record from result list and feed to the context node PRD of component controller.
You can see the last method call outbound plug ‘RETURNRESULT’ in above event handler. This call closes the popup window. This is the outbound plug we have checked in the event handler EHONPRODUCT.
Remaining code is a bit straight forward in the event handler EHONPRODUCT; we are reading the product guid from selected record on the pop up. Next we need to set this on item view. In order to know for which record we need to set the value, we are reading the item record using find method by sending the index as GV_INDEX. Gv_index helps to find that record. That is why we have set this variable in the V-getter method of that field to the index of the record on which user has pressed f4.
Test the application.
what it takes to reuse a view
Reusing a view of another component.
In this example, I am going to provide a f4 help to the product field in the ITEMLIST assignment block that we created in the previous chapters.
I am going to reuse the view set ‘Search Help ’in the component PRD01QR. This view set has two views one is search and another one is result. So if reuse this view set, I will able to present two views together to the user. So he can search the products and select the results.
Step1.
First rule to reuse any view is to make a component usage. So here I am reusing the view from the component PRD01QR. Create one component usage in the target component in which you want to reuse a view.
In the Interface view field, I selected the option SearchHelpWindow as interface view. Because the viewset ‘SearchHelp’ which I want to reuse is assigned to the window ‘SearchHelpWindow’ and this window is exposed as interface view. You can see the below screen shot of run time repository of component PRD01QR.
You can see there are three entries under component interface node, that’s why I got three entries in field interface view while creating component usage.
Save the entries. Just press on continue if there is any another pop up.
Step2:
We need to generate the V getter method for the required field to give a value help. Here field is ORDERED_PROD. Go to the view and to context node under which attribute is located. Right click on the attribute and choose the option generate V-GETTER.
Once method is generated , write the following code inside method.
Here OP_SAERCHPRODUCTS is the outbound plug. Create one variable with GV_INDEX with type INT4 in the context node class of attribute for which we are providing this help.
Step3:
We need to create one outbound plug with the same name as above mentioned in the code. go to the view and create one outbound plug. Just give the name as SEARCHPRODUCTS. Prefix ‘OP’ will be automatically added by the framework.
Before going to code in this method, we need to change its visibility to public. Framework automatically creates outbound plugs in the super class with protected visibility so that we can redefine according to our requirements in the subclasses. However for our requirement, we need to change its visibility. As we know that we cannot change the visibility of a inherited method in the subclass. We need to go the super class.
Go to the view implementation class first, go to the properties tab. Double click on the super class.
Change into edit mode and open the methods tab. Change the visibility from protected to public for the created outbound plug. Save and activate the class.
We are not over. We need to change the visibility of this method in the subclass as well. Go back to the view implementation class. Change into edit mode and click on button SOURCE code based as shown below.
It will list the class code.
Move the code ‘methods OP_SEARCHPRODUCTS redefinition’ from protected section to the public section as below. Now Let us code in the method. Write the following code inside the method.
Now activate the class. While activating choose all entries in the list. Now you can see the visibility of this method as public in the view implementation class.
Here PRODUCT_POPUP is a public attribute of view implementation class.
Here we are using the method create popup of attributeWINDOW_MANAGER of component controller. The values which we are sending are the values that we used while creating component usage.
Next we are calling the method SET ON CLOSE EVENT of popup to set the event handler when popup is closed. So this event handler will be triggered when pop up is closed.
The next statement is optional; we use this method if we want to display any messages on the pop up. Generally messages won’t be shown up on the pop up unless we use the set display mode method.
The last statement, as the method name suggested, will open the pop up.
At this step, pop up is ready. As soon as user presses the F4 button on the field, first outbound plug will be triggered and the above code will be executed and pop up will be created.
On the pop up, user will be presented two screens to search the product and to see the results. Then user will choose any product. Once he chooses, control automatically goes the event handler that we set using the method SET ON CLOSE EVENT. So we need to get the product that user selected on the pop up , in this event handler.
Step4:
We need to create the event handler with the above mentioned name and need to code in that event handler.
Go to the view and create one event handler with the name PRODUCT.
Write the following code inside the event handler.
We need to know some points above this code.
LR_CONTEXT_NODE = PRODUCT_POPUP->GET_CONTEXT_NODE ( IV_CNODE_NAME = 'PRD' ).
What is ‘PRD’ here?
It is context node in the component ‘PRD01QR’ at component controller level. This has been exposed in the runtime repository. Only these types of context nodes are accessible outside of component. We are accessing this context node using the GET_CONTEXT_NODE method PRODUCT_POPUP.
But from where data is coming to the context node PRD in that component?
As we know, once user searched the products, he will choose one product from the result list. As soon as he selects the product, there is one event handler ‘EH_ONCHOOSE’ triggered in the result view of product component.
The code above will take user selected record from result list and feed to the context node PRD of component controller.
You can see the last method call outbound plug ‘RETURNRESULT’ in above event handler. This call closes the popup window. This is the outbound plug we have checked in the event handler EHONPRODUCT.
Remaining code is a bit straight forward in the event handler EHONPRODUCT; we are reading the product guid from selected record on the pop up. Next we need to set this on item view. In order to know for which record we need to set the value, we are reading the item record using find method by sending the index as GV_INDEX. Gv_index helps to find that record. That is why we have set this variable in the V-getter method of that field to the index of the record on which user has pressed f4.
Test the application.