Currently Being Moderated

SAP CRM OneOrder Advanced Search WebUI Component - part1

Scenario:

Create a search component for one order objects. The Search component has 2 views, one for search criterias and the other for result list respectively.

 

Go to Genil Model Browser via Transaction Code GENIL_MODEL_BROWSER. As shown below the Dynamic Search/Query Object BTQ1Order is available in the Genil. This Dynamic Query Object BTQ1Order has the BTQR1Order as Query Result Object.

The Query Result Object is associated to BTOrder via relation BTADVS1Ord.

1.JPG

Dynamic Query Object - BTQ1Order

 

 

2.JPG

Query Result Object – BTQR1Order

 

 

  1. Go to transaction code BSP_WD_CMPWB and enter the component name. e.g. ZRAK_ORDERSRCH.
  1. Add the BT Model.

4.JPG

  1. Right Click on Views and choose ‘Create’ from context menu.

6.JPG

  1. Enter View name ‘Search’.

7.JPG

  1. Add Both the Model nodes. Use model BTQ1Order to enter search criteria and BTQR1Order for result list purpose.

8.JPG

  1. Choose the Empty View.

9.JPG

  1. Create new Custom Controller. E.g. QueryCuCo.

10.JPG

  1. Define the Model Node BTQR1Order of type BOL BTQR1Order to keep & Share the search result list.
11.JPG

  1. As shown below choose ‘Create’ to define new Context node for Custom Controller QueryCuCo.

12.JPG

  1. Enter the Model Entity BTOrder of type BOL BTOrder.

13.JPG

  1. Choose Higher Level Context node as BTQR1Order and choose BOL Relation BTADVS1Ord.

  Note: The relation BTADVS1Ord was already discussed at the start which we found in Genil model Browser.  

14.JPG

  1. Go to the Search View and create binding for context node BTQR1Order.
15.JPG

  1. As shown below enter the BSP Application, Controller Type, Custom Controller Name and Target Context node of Custom Controller.16.JPG
  2. Create new view Result.

17.JPG

  1. Define the Model Node BTQR1Order of type BOL BTQR1Order to store the one order result list. Also define the Model node BTOrder of type BOL BTOrder. Use the Higher level node BTQR1Order with BOL relation BTADVS1Ord.18.JPG
  2. Create binding/links of context node BTQR1Order with the custom controller context node BTQR1Order.

19.JPG

  1. Choose view type as Table View and Configurable checkbox too.
  Note: Make sure context node BTQR1Order is selected from list box.  

20.JPG

  1. As shown below create new View Set.

21.JPG   

  1. Enter view set name as SearchVS and mention grid size as Lines 2, Columns 1.

22.JPG

  1. Enter View areas names (e.g. Search & Result) and respectively choose the positioning of ViewAreas.

23.JPG

  1. As shown below the wizard displays the overview of ViewSet ViewAreas.

24.JPG

  1. Select the ViewArea Search, right click and choose ‘Add View’.

25.JPG

  1. Choose View name ‘Search’.

26.JPG

  1. In the same way, choose the ViewArea Result and assign ‘Result’View.

  2. Add ViewSet ZRAK_ORDERSRCH/SearchVS into Window ZRAK_ORDERSRCH/MainWindow (default). Choose the MainWindow, right click and choose Add View. 27.JPG

  3. Enter the view name SearchVS.

28.JPG

  1. Make sure to flag it as Default.

29.JPG

  1. Go to the implementation class of Search View.

30.JPG

  1. Open the Super class (e.g. ZL_ZRAK_ORD_SEARCH) and change the inheritance of controller class with new class CL_BSP_WD_ADVSEARCH_CONTROLLER.

31.JPG

  1. Choose ‘Yes’ to keep the redefinitions of methods.

32.JPG

  1. Choose the context node BTQ1Order of View ZRAK_ORDERSRCH/Search and open Implementation Class ZL_ZRAK_ORD_SEARCH_CN00.

33.JPG

  1. Replace the super class inheritance with new class name CL_BSP_WD_CONTEXT_NODE_ASP.

34.JPG

  1. Copy the below code into the Search.htm page.

  <%@page language="abap" %>

<%@extension name="thtmlb" prefix="thtmlb" %><%@extension name="chtmlb" prefix="chtmlb" %><%@extension name="bsp" prefix="bsp" %>

<thtmlb:advancedSearch
id                = "advs0"
                       fieldMetadata     =
"<%= controller->GET_DQUERY_DEFINITIONS( ) %>"
                       header            =
"<%= BTQ1ORDER->get_param_struct_name( ) %>"
                       fieldNames        =
"<%= controller->GET_POSSIBLE_FIELDS( ) %>"
                       values            =
"//BTQ1ORDER/PARAMETERS"
                       maxHits           =
"//BTQ1ORDER/max_hits"
                       onEnter           =
"search"
                       ajaxDeltaHandling =
"false" />
<br><br>
<thtmlb:
button id      = "search"
              
onClick = "search"
              
text    = "Search" />  
  1. Open the Configuration tab of View ZRAK_ORDERSRCH/Search. Click on Edit button. Choose the search fields from available search criteria’s. Then click on ‘Save’ button.

35.JPG

  1. Open the Configuration tab of View ZRAK_ORDERSRCH/Result. Click on Edit button. Choose the fields to be displayed from available fields. Then click on ‘Save’ button.

36.JPG

  1. Test the Component. The following window with Search and Result views should appear.

37.JPG

 

  1. Create new event in View ZRAK_ORDERSRCH/Search.

38.JPG

  1. Enter event name ‘search’.

39.JPG

 

 

  1. The event handler method EH_ONSEARCH would appear as shown below.

40.JPG

  1. Copy the following code.
Reads the current context of BTQ1Order (search parameters) into dynamic query service object LR_QUERY_SERVICE. The method GET_QUERY_RESULT returns the one order collection into dynamic query result LR_RESULT. The result list collection will be assigned to result context node BTQR1Order.

41.JPG

method EH_ONSEARCH.
DATA: lr_query_service TYPE REF TO cl_crm_bol_dquery_service,
      lr_result
TYPE REF TO if_bol_bo_col.

lr_query_service ?= me->typed_context->btq1order->collection_wrapper->get_current( ).
lr_result = lr_query_service->get_query_result( ).
CHECK lr_result is BOUND.

me->typed_context->btqr1order->set_collection( lr_result ).
endmethod.

  

  1. The event names are Case Sensitive. Make sure to match the event name in Search.htm page and DO_HANDLE_EVENT method of its implementation class.
42.JPG

  1. Your Search component is ready to use.  Mention the search criteria (e.g. ID 5000000) and then either press enter key or click the ‘Search’ button. The result appears in result list.

43.JPG

Comments

Delete Document

Are you sure you want to delete this document?