TREE VIEW is used to represent hierarchical form of data.
Ex: organizational data in SAP CRM can be represented as tree view.
In WEB UI terminology, there is no special view type for tree view as we have form view and table view. We can consider tree view is a special form of table view. There is no wizard available to create a tree view. We need to adapt existing view into table view by following certain manual steps.
At first, it looks difficult, but the more number of times you do it, the more you understand it. In this chapter, I am going to create a tree view that looks like below.
As you see, it has two levels. First level will show the lead ID and next level will show its customer. I took this example for simplicity.
In order to follow this tutorial, we need to create one table view. I am not going to describe steps to create a table view as we had already covered it in the previous lessons. In this chapter,
I created one table view with base entity ‘BTQRLeadDoc’.
I created one context node with same type at component controller and I coded in the component controller’s method DO_INIT_CONTEXT to fetch the data.
Then I did component binding between the table view context node and the context node of component controller. So data have been fetched in to our table view. Below is the code that I wrote in the DO INIT CONTEXT method of component controller.
METHOD do_init_context.
DATA:lr_query TYPE REF TO cl_crm_bol_dquery_service,
I simply fetched first 10 lead records and feeding the context node LEAD with those records. As I did data binding between table view and context node of component controller, data will flow to the table view as well.
So we are all set and let’s begin the main part.
First, go to the table view context node implementation class and change its super class from ‘CL_BSP_WD_CONTEXT_NODE_TV’ to ‘CL_BSP_WD_CONTEXT_NODE_TREE’. If there is any Dialog box asking to redefinitions of certain methods, choose yes.
This class provides two important methods
GET_TABLE_LINE_SAMPLE and REFRESH.
First method will return one structure based on which columns of view are decided.
REFRESH method is generally used to generate the first level of nodes or root nodes.
Here I am using just two columns to display information. So go to GET_TABLE_LINE_SAMPLE and add two columns as required.
METHOD get_table_line_sample.
TYPES: BEGIN OF line,
id TYPE crmt_object_id,
prospect TYPE crmt_prospect,
END OF line.
CREATE DATA rv_sample TYPE line.
ENDMETHOD.
复制代码
Once this method is activated. Reopen the entire component using BSP_WD_CMPWB. Now you can see two columns in the view configuration tab. Move two columns from available section to displayable section and change the title accordingly and save the configuration.
We will come to REFRESH method later.
Now one important step is change the tag in .htm page. All tree views use the chtmlb: configTreeto display the tree view. Go to the .htm page and remove the existing CONFIGCELLERATOR or CONFIGTABLE tags and place the following tag and activate it.
xml = "<%= controller->configuration_descr->get_config_data( ) %>" />
复制代码
‘Lead’ in above tag is a context node.
Property nodeTextColumn is used to choose which attribute will act as root of tree or fist column of tree. Here I chose ID column according to my requirement.
For node table property, we will send LEAD->NODE_TAB after filling it with required nodes.
We specified event handlers ‘collapse’ when we collapse a tree and ‘expand’ when we expand the tree for properties OnCollapseNode and onExpandNode.
Next, we need to create one class in SE24 with super class ‘CL_BSP_WD_TREE_NODE_PROXY’. This class offers one method called GET_CHILDREN. This method is used to create child nodes.
Before activating the class, just redefine the GET_CHILDREN method and activate it.
Let us come back to the REFRESH method. Write the following code and activate it.
METHOD refresh.
CALL METHOD super->refresh.
DATA:lr_entity TYPE REF TO cl_crm_bol_entity,
lr_coll_wr TYPE REF TO cl_bsp_wd_collection_wrapper,
Here we are simply looping each record of context node i.e. lead record and creating one node for each record using the GET _PROXY method of NODE_FACTORY. Then we are adding the root node to tree using method ADD_ROOT_NODE. In my scenario, above loop will create 10 root nodes as I fetched 10 lead records.
I am giving the class name we just created in se24 for proxy type. We are done creating root node but not displaying it. We need to manually add GETTER methods to proxy class to display any attribute on the tree.
Go to the proxy class ‘ZCL_TREE_PROXY_MAIN’ and copy the method IF_BSP_MODEL_SETTER_GETTER~_GET_XYZ and check the filter check box and paste it in the empty row. This process will copy all required import export parameters of the method. Then change the name to GET_ID. We just copied the GETTER method template and renamed it according to the attribute name.
Write the following code to get the ID of lead.
METHOD get_id .
DATA:lr_entity TYPE REF TO cl_crm_bol_entity.
IF me->bo IS BOUND.
lr_entity ?= me->bo.
lr_entity->get_property_as_string( EXPORTING iv_attr_name = 'OBJECT_ID' RECEIVING rv_result = value ).
ENDIF.
ENDMETHOD.
复制代码
First level node is creation and display is done. Next we need to take care of child (here it is customer) node. In order to create second level node, we need to code in the get_children method first proxy class. We will use one more proxy class to create each child node. Go to SE24 and create one more class as we did above.
We need to display customer as well. Following the same procedure and add one getter method GET_PROSPECT and write the code as below.
METHOD get_prospect .
DATA:lr_entity TYPE REF TO cl_crm_bol_entity.
IF me->bo IS BOUND.
lr_entity ?= me->bo.
lr_entity->get_property_as_string( EXPORTING iv_attr_name = 'PARTNER_NO' RECEIVING rv_result = value ).
ENDIF.
ENDMETHOD.
复制代码
Main point, we need to remember is, we created GETTER methods in the proxy classes; they are not part context node class. Display of child node is done. We did not create it.
Now go to the first created proxy class ‘ZCL_TREE_PROXY_MAIN’ and code in the get children method.
What I did?
Here we need to use some BOL programming in order to fetch the customer of Lead. So I need to traverse through some relationships to reach the target entity BTPARTNER. Here I am reading all partners of Lead.
Once I fetched all partners, I am looping over each partner and creating child node for it using the NODE FACTORY method and proxy class ‘ZCL_TREE_PROXY_CUSTOMER’ we created above.
Here once I created child node, I am setting the IS_LEAF property as TRUE because in my scenario CUSTOMER is the last level and after that I am not displaying any child to customer. So there won’t be any arrow mark next to the folder icon for child nodes.
Next create two event handlers with name collapse and expand in the view implementation class and write the following code.
METHOD eh_oncollapse.
DATA:lr_event_ic TYPE REF TO cl_crm_ic_tree,
lr_event_thtmlb TYPE REF TO cl_thtmlb_tree.
FIELD-SYMBOLS:<fs_line> TYPE crmt_bsp_treetable_node.
As name suggests, these are triggered when you expand or collapse any node.
Last thing is we need to add little bit coding in the DO PREPARE OUTPUT method to call REFRESH method.
METHOD do_prepare_output.
IF me->typed_context->lead->node_tab IS INITIAL.
me->typed_context->lead->refresh( ).
ENDIF.
CALL METHOD super->do_prepare_output
EXPORTING
iv_first_time = abap_false.
ENDMETHOD.
复制代码
Now you can execute the application and see the output. When we learn it first time, it seems too many steps, but in actually, it is not that much difficult.
Here if I want to display ‘address’ as child to ‘customer’, Then I need to create one more proxy class and write the code in the GET CHILDREN method of CUSTOMER proxy class by using BOL relations from customer to address and need to add one GETTER method to that proxy class to display the address. Don’t forget add one more column ‘address’ in the GET_TABLE_LINE_SAMPLE.
You can try it on your own. Hope it helps you and do refer this site to your colleagues if you think it deserves it.
Ex: organizational data in SAP CRM can be represented as tree view.
In WEB UI terminology, there is no special view type for tree view as we have form view and table view. We can consider tree view is a special form of table view. There is no wizard available to create a tree view. We need to adapt existing view into table view by following certain manual steps.
At first, it looks difficult, but the more number of times you do it, the more you understand it. In this chapter, I am going to create a tree view that looks like below.
As you see, it has two levels. First level will show the lead ID and next level will show its customer. I took this example for simplicity.
In order to follow this tutorial, we need to create one table view. I am not going to describe steps to create a table view as we had already covered it in the previous lessons. In this chapter,
I created one table view with base entity ‘BTQRLeadDoc’.
I created one context node with same type at component controller and I coded in the component controller’s method DO_INIT_CONTEXT to fetch the data.
Then I did component binding between the table view context node and the context node of component controller. So data have been fetched in to our table view. Below is the code that I wrote in the DO INIT CONTEXT method of component controller.
What I did?
I simply fetched first 10 lead records and feeding the context node LEAD with those records. As I did data binding between table view and context node of component controller, data will flow to the table view as well.
So we are all set and let’s begin the main part.
First, go to the table view context node implementation class and change its super class from ‘CL_BSP_WD_CONTEXT_NODE_TV’ to ‘CL_BSP_WD_CONTEXT_NODE_TREE’. If there is any Dialog box asking to redefinitions of certain methods, choose yes.
This class provides two important methods
GET_TABLE_LINE_SAMPLE and REFRESH.
First method will return one structure based on which columns of view are decided.
REFRESH method is generally used to generate the first level of nodes or root nodes.
Here I am using just two columns to display information. So go to GET_TABLE_LINE_SAMPLE and add two columns as required.
Once this method is activated. Reopen the entire component using BSP_WD_CMPWB. Now you can see two columns in the view configuration tab. Move two columns from available section to displayable section and change the title accordingly and save the configuration.
We will come to REFRESH method later.
Now one important step is change the tag in .htm page. All tree views use the chtmlb: configTreeto display the tree view. Go to the .htm page and remove the existing CONFIGCELLERATOR or CONFIGTABLE tags and place the following tag and activate it.
‘Lead’ in above tag is a context node.
Property nodeTextColumn is used to choose which attribute will act as root of tree or fist column of tree. Here I chose ID column according to my requirement.
For node table property, we will send LEAD->NODE_TAB after filling it with required nodes.
We specified event handlers ‘collapse’ when we collapse a tree and ‘expand’ when we expand the tree for properties OnCollapseNode and onExpandNode.
Next, we need to create one class in SE24 with super class ‘CL_BSP_WD_TREE_NODE_PROXY’. This class offers one method called GET_CHILDREN. This method is used to create child nodes.
Before activating the class, just redefine the GET_CHILDREN method and activate it.
Let us come back to the REFRESH method. Write the following code and activate it.
Here we are simply looping each record of context node i.e. lead record and creating one node for each record using the GET _PROXY method of NODE_FACTORY. Then we are adding the root node to tree using method ADD_ROOT_NODE. In my scenario, above loop will create 10 root nodes as I fetched 10 lead records.
I am giving the class name we just created in se24 for proxy type. We are done creating root node but not displaying it. We need to manually add GETTER methods to proxy class to display any attribute on the tree.
Go to the proxy class ‘ZCL_TREE_PROXY_MAIN’ and copy the method IF_BSP_MODEL_SETTER_GETTER~_GET_XYZ and check the filter check box and paste it in the empty row. This process will copy all required import export parameters of the method. Then change the name to GET_ID. We just copied the GETTER method template and renamed it according to the attribute name.
Write the following code to get the ID of lead.
First level node is creation and display is done. Next we need to take care of child (here it is customer) node. In order to create second level node, we need to code in the get_children method first proxy class. We will use one more proxy class to create each child node. Go to SE24 and create one more class as we did above.
We need to display customer as well. Following the same procedure and add one getter method GET_PROSPECT and write the code as below.
Main point, we need to remember is, we created GETTER methods in the proxy classes; they are not part context node class. Display of child node is done. We did not create it.
Now go to the first created proxy class ‘ZCL_TREE_PROXY_MAIN’ and code in the get children method.
What I did?
Here we need to use some BOL programming in order to fetch the customer of Lead. So I need to traverse through some relationships to reach the target entity BTPARTNER. Here I am reading all partners of Lead.
Once I fetched all partners, I am looping over each partner and creating child node for it using the NODE FACTORY method and proxy class ‘ZCL_TREE_PROXY_CUSTOMER’ we created above.
Here once I created child node, I am setting the IS_LEAF property as TRUE because in my scenario CUSTOMER is the last level and after that I am not displaying any child to customer. So there won’t be any arrow mark next to the folder icon for child nodes.
Next create two event handlers with name collapse and expand in the view implementation class and write the following code.
As name suggests, these are triggered when you expand or collapse any node.
Last thing is we need to add little bit coding in the DO PREPARE OUTPUT method to call REFRESH method.
Now you can execute the application and see the output. When we learn it first time, it seems too many steps, but in actually, it is not that much difficult.
Here if I want to display ‘address’ as child to ‘customer’, Then I need to create one more proxy class and write the code in the GET CHILDREN method of CUSTOMER proxy class by using BOL relations from customer to address and need to add one GETTER method to that proxy class to display the address. Don’t forget add one more column ‘address’ in the GET_TABLE_LINE_SAMPLE.
You can try it on your own. Hope it helps you and do refer this site to your colleagues if you think it deserves it.