Skip to Content

Create a Tree view display in CRM web UI

This blog gives the steps to create a Tree view display in CRM web UI. Below is a screen shot of the sample implementation. image  *Prerequisites*: The business objects used should be defined in the business object layer as well. Also the dependent objects should be defined via relations.      *Step 1: Context node for the tree*   First of all you need a context node for the tree, which holds the displayed entities and defines the tree columns. It basically reflects the complete UI state of the tree control in the model.image   In our example this is CASEHISTORY context node, which inherits from CL_BSP_WD_CONTEXT_NODE_TREE:  Its method GET_TABLE_LINE_SAMPLE defines the tree columns available for display:image   Here define a column as NODE_NAME which will be the node column (See screen shot for HTML Code). Of special importance is the REFRESH method of the tree, since it initializes the display:The built-in node factory is used here to create a root node for each BOL entity to be displayed in the tree.image    The BOL entities for tree display come from the tree context node itself.   *Step 2: Context nodes for the top level entries in the tree** *   In order to display entries in the tree you need a class which defines its top level and which inherits from the CL_BSP_WD_TREE_NODE_PROXY class. In the CRM workbench this class appears as “Tree Node Proxy” beneath the tree node “CASEHISTORY” under “Tree Structure”.   Besides the usual Getters and Setters used for display during runtime the context node offers a GET_CHILDREN method called when the user would like to seeimage    Redefine method GET_NODE_NAME to display the text for the NODE. Redefine method GET_ICON to display the required ICON.    *Step 3 : Basic Tag Tree* *Step 4 : Tree event handling*    When a node is collapsed on the UI for example a “collapse” event (see attribute “onCollapseNode” above) is raised; this is processed in the DO_HANDLE method of the controller:  It delegates the event to the tree context node.   *Collapse or expand tree node*Call the COLLAPSE_NODE method of the tree context node when a tree node is collapsed on the UI.  image    Eventually call EXPAND_NODE.  image
You must be Logged on to comment or reply to a post.
  • Nice blog.
    I would have been very happy to have had something like this when I started out with the WebClient. It took me almost three days to figure this thing out.

    Maybe two things:
    1. The attribute nodeTextColumn in the BSP tag recieves a GET_ method name. It can be any getter.
    2. Give your tree an ID that is different from "configTree". Otherwise it will render two additional columns

    • Hi Carsten

      I have developed a tree in CRM UI, my requirement is to have a OCA (On Click Action) on the first column of the Tree view.

      But in the .HTM page of tree view, I have mentioned "Vendor" as the NODETEXTCOLUMN. When I have added the ( thtmlb_oca  type crm_thtmlb_one_click_action. ) in GET_TABLE_LINE_SAMPLE method. I can see the ACTIONS tab in the configuration tab but its not visible in the 1st column.

      Please help me to achieve this functionality (to get the OCA on the 1st column of tree view).


  • Reall a very helpful Blog,

    Would like to know that , Is hyperlink property works fine under Tree.

    If so , then I am facing 1 issue . In Tree, I have implemented the Hyperlink functionality . But unfortunately Hyperlink is working for some set of Records , not for all records. If 10 records are displaying in Result Area then out of 10 I am getting an hyperlink for 5. Could you please suggest how to analyze the class which contains the record level Hyperlink  settings

    • HI,

      Even I faced the same issue. Hyperlink was not getting displayed for all the records.

      The solution is that , suppose u have a column called 'Sale Order ' in your tree column display and u want to have a hyperlink on this .

      THen no matter if you are displaying the data for a sales order in a tree node , you must create the P_getter(w/o any code) method for 'Sales Order'.

      So must create a P_Gettter method for 'sales order' for each and every node in tree class implementation.

      Hope this helps.


      • Hi Poonam,

        Thanks a Lot for Quick Reply.

        The code is properly placed in the GET_P method,

        CASE iv_property.
            WHEN if_bsp_wd_model_setter_getter=>fp_fieldtype.
              rv_value = cl_bsp_dlc_view_descriptor=>field_type_event_link.
            WHEN if_bsp_wd_model_setter_getter=>fp_onclick.
              rv_value = 'NAVIGATE'.

        My concern is , for some Records the hyper link functionality is working fine but for some records hyperlink is not working at all .. So i would like to know some Class / Methods which can be viewed at run time and can study the behaviour of diffrenet records.


        • Thanks for reply.

          I Just cross checked it . As mentioned by you P_getter are in place and Activated .
          Only for the Root Node P_getter method is activated but Code has been comment out for the Hyperlink .
          But in the next Order Number Node,  Hyperlink Coding is in Place under P_Getter method .

          Thanks in Advance.

  • Hi Poonam, thanks for the great explanation. Really helped.

    Quick question, say we want it the other way round i.e removing a tree structure (in Target group creation) and display only the root node, this is achievable. I am, however struggling with removing the small icon (the arrow)on the root node.

    Any suggestions?


  • Hi Poonam,

    I was trying to create a tree view and your blog helped me with initial steps.
    Actually my view is a table view and then i changed the super class to tree view,the structure is displayed but on the UI how do the data flow into the tree? what steps needs to be taken in the Get_NODE_NAME since the view was table view it is already connected to the ztable structure.

    I am new to MVC programming so, If you can give some more detials on this , it would be of great help.

    • Hi Jaya,

      The approach to getting the data and using it can be different as per the requirement, so I am givig you some generic pointers that can be helpful to you.

      1.  The data can be read and saved in the tree collection (parent node) like any other table. for ex. data present in the custom controller can be bound to the tree node , or you can read the data during the on_new_focus.

      Flow of data to the child node: for this you need to introduce a new attribute in the child nodes as 'OWNER' with type ref to you parent tree class ex.

      OWNER     Instance Attribute     Public     Type Ref To     /SCUK/CL_BP__SCCASEHISTOR_CN01.

      During the refresh method pass the reference to this attribute of the child node

      lr_tree_node->owner = me
      (also see screen shot above)

      3.Simillarly apply the same logic to other child nodes as well and keep passing on the reference of the parent node to the child node.

      4. Accessing the collection  in the child node :

      In the get_children method you can write the following code

      lr_owner  ?= owner.

      lr_iterator ?= lr_owner->collection_wrapper->get_iterator( ).
          lr_entity ?= lr_iterator->get_first( ).

      and start working with the


      Hope ths helps.


  • Hi ,

    I am working with tree view for value node ,while doing serch on some issuues for the above I found this blog .Hope i could get some help from you guys.

    I am not able to display the data in the child in more than one column .I am getting all the data but its getting displayed in only first column. Right now I am concatinating and dipalying the data in the first column. But it wont solve my problem. Please guide me how to achive the data in other columns also .
    I have generated the get methods for all the attributes.