二维码

[教程] VALUE NODE - DISPLAYING CUSTOM TABLE ON WEB UI

Twilight发表于 2016-02-05 22:44Twilight 最后回复于 2016-02-05 22:44 [复制链接] 1247 0

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.
value node 1.jpg

Data of that table.
value node 2.jpg

Go to any UI component and right click on view and choose the option create.
value node 3.jpg

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.
value node 4.jpg

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

It will bring one new Dialog box.
value node 6.jpg

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.
value node 7.jpg

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,
value node 8.jpg

     You can change the column titles if you want.

2.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.
value node 9.jpg

        Once you redefine it. Icon will turn into green color. Double click on it and write the following code.
  1. METHOD do_prepare_output.
  2.   CALL METHOD super->do_prepare_output
  3.     EXPORTING
  4.       iv_first_time = abap_false.

  5.   DATA:lr_table     TYPE REF TO zvaluenode,
  6.        lr_struct    TYPE zvaluenode,
  7.        lt_tabledata TYPE TABLE OF zvaluenode,
  8.        ls_tabledata LIKE LINE OF lt_tabledata,
  9.        lr_valuenode TYPE REF TO cl_bsp_wd_value_node,
  10.        lr_col       TYPE REF TO cl_crm_bol_bo_col.

  11.   "fetch the data.
  12.   SELECT * FROM zvaluenode INTO TABLE lt_tabledata.
  13.   CHECK sy-subrc = 0.

  14.   "create collection object.
  15.   CREATE OBJECT lr_col.

  16.   CREATE DATA lr_table.
  17.   "create one empty value node with the required structure.
  18.   CREATE OBJECT lr_valuenode
  19.     EXPORTING
  20.       iv_data_ref = lr_table.

  21.   "create value node for each record foound.
  22.   LOOP AT lt_tabledata INTO ls_tabledata.
  23.     "set the data into the value node.
  24.     lr_valuenode->if_bol_bo_property_access~set_properties( is_attributes = ls_tabledata ).
  25.     "add node to the collection.
  26.     lr_col->if_bol_bo_col~add( lr_valuenode ).
  27.   ENDLOOP.

  28.   "all records are processed. set the collection to the collection wrapper of context node to make it visible on web ui
  29.   me->typed_context->valuenode->collection_wrapper->set_collection( lr_col ).

  30. ENDMETHOD.
复制代码

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.
value node 10.jpg
回复

使用道具 举报

快速回帖

本版积分规则
您需要登录后才可以回帖 登录 | 注册有礼

快速回复 返回顶部 返回列表