Tuesday, 4 June 2013

57.VALUE NODE - DISPLAYING CUSTOM TABLE ON WEB UI



Let us display a Custom table on web ui using value node concept. 

In the starting chapters, we just told what a value node is.
A Value node is nothing but a context node which is not based on any BOL object. It is based on the data elements or fields that come from the DDIC. 

It is very common requirement in SAP CRM WEB UI to display data of a custom table.  Let us develop a table view that displays data of any custom table. 


I am not going to discuss table creation or records creation in the table. I assume that readers know how to create table in SE11 and insert records into it. 

I have created below table in se11 and records in it. I am going to create one table view which is based on this table. 





Data of that table.





Go to any UI component and right click on view and choose the option create. 





Give any suitable name to the view. We don’t want to create a model node here skip that step. Next come to the step VALUE NODE. Give any suitable name to the value node. 




Skip the next step Add model attributes and come to the step add value attributes. Click on the + symbol in this step.




It will bring one new dialog box.





Enter the table name in the field DDIC structure and press enter. All fields of table will be available in the list. Then select all rows by clicking on the select all button as shown in the above screen shot. Click on Continue.

Then skip the next step and come to the step SELECT VIEW TYPE. Select the view type as TABLE VIEW as we want show all records from the database and choose the option configurable. As already discussed for any table view, we need to specify the context node. Give the context node that we created in the previous steps.







Complete the wizard. We have created the view based on value node. Then our duty is to fetch the required data and display that data on the view. 

Here I am going to code in the DO PREPARE OUTPUT method. This method will be called every time when view is displayed. Here our purpose is to show the data on the view so we have chosen this method. 

Before coding, complete below two steps.
1.       Go to the view configuration tab and create one new configuration by moving fields to displayable section as I did below,





     You can change the column titles if you want.
 
1.     Assign this view to the window in the run time repository to make visible on the web ui. Refer the chapter Assigning view to window

      Now go to the view structure and expand the node request processing. Redefine the method DO PREPARE OUTPUT. 







        Once you redefine it. Icon will turn into green color. Double click on it and write the following code.





What we have done in the code.
First we queried the table and fetched the data. Next we created on collection object to hold the records. 

Then we are looping to visit each record in the internal table. For each record we create one value node with the same structure of the table. Technically a value node will be represented by the class CL BSP WD VALUE NODE. So we are creating object of this class by sending the structure of table as a base. One node is created we set the data using the method SET PROPERTIES. Then each value node is added to the collection. 

We repeated same process for all entries in the internal table and finally we set this collection to the required context node to make this data visible on web ui. 

Test the application.










4 comments:

  1. Thanks a lot praveen, your blog is amazing.

    ReplyDelete
  2. Thanks for the blog. How do you read data from the table? set_XXXX method returns only individual records, what is the right method to read the entire table so that we can store it somewhere.

    ReplyDelete
  3. Hi, I have issue in displaying the selected value in WebUI. have read many blogs and Wiki's but in vain. My search help for product id is displayed but after value selection, its not reflected in the WebUI field.

    Any idea what could be the issue?

    Thanks

    ReplyDelete
  4. how you created zclass "zvaluenode.
    checked above code data:lr_table type ref to zvaluenode.

    We are created ztable .

    ReplyDelete