Tuesday, 18 June 2013

63.TREE VIEW



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. 











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.





18 comments:

  1. Very useful for beginners. Thank you and keep up the good work.

    Cheers
    Jag

    ReplyDelete
  2. Very helpfull. Thank you..

    ReplyDelete
  3. Thanks for your clear Explanation . . .
    Cleared my doubts on TREE VIEE

    Regards
    Dinesh Gurram

    ReplyDelete
  4. Hi Mannala

    I have one doubt ..
    By using above code we can expand a row in table view . .
    Can we expand only single field ??? ( I mean a single column )

    Is there any way for this

    Regards
    Dinesh Gurram

    ReplyDelete
  5. very helpful .can u provide any middleware documents to this mail id v.prasadbabu2009@gmail.com

    ReplyDelete
  6. Hi Mannala,

    I would request u to post new concept its been more than a month to receive new post, am eargly waiting to get the knowledge from ur upcoming post... Send CRM concepts to v.anandakumar86@gmail.com.. It will be more helpful for me....

    Regards,
    Anand V

    ReplyDelete
  7. Good blog for beginners. Thanks it helped me.

    ReplyDelete
  8. SUppose i have traversed from the search result page to tree view and from this page i clicked on an account id to go to an account details page. But when i click back button on the right corner the page which is showing up is the search view page. Now i have fixed this issue by calling history_trigger in wd_destroy method of the tree view but now when i click view on the back button of account details its going blank ....in the tree view. could you please help in this matter..

    ReplyDelete
  9. man your are amazing , keep posting please

    ReplyDelete
  10. Amazing work . I have an question plz answer me.
    Is it possible for create Tree view for Value Node?

    ReplyDelete
  11. Hi mannala,
    amazing work u done.it is very helpful for me.can u plz send any crm badi material to this mail id velpulahari@gmail.com

    ReplyDelete
  12. Hi Mannala

    Its not fair to go without a word of appreciation.
    Fantastic Job!! I have gone through all the materials of the blog.They are extremely useful and thanks a lot for all of them. I definitely look forward for more such materials.Keep up the good work! God Bless!!

    Cheers!!!!!

    ReplyDelete
  13. V V helpful!

    Thanks a lot.

    Regards,
    Devashish

    ReplyDelete
  14. Hi,
    The tutorials are very helpful in understanding the basics of CRM Technical. Appreciate the efforts spent on explaining the tutorials step by step.

    Hoping to see new tutorials soon on other dimensions of CRM as well.

    Thanks and Regards
    Vignesh

    ReplyDelete
  15. Really helpful, much appreciated!

    One remark though:
    I had some problems getting the tree column name right until I noticed that the name used in the .htm file should be present in the get_table_line_example method as well, otherwise if you use NODE_NAME for example, the tree would be displayed, the name of the last column in your line example would be used though.

    Just in case anyone else missed this ;)

    Regards

    ReplyDelete
  16. Hi,

    Is there any option to color just one specific row in the tree view and how it can be.

    thanks

    ReplyDelete
  17. Very Helpful .... Thanks

    ReplyDelete
  18. Amazing work..!!! Congratulation!!!

    ReplyDelete