SAP CRM OneOrder Advanced Search WebUI Component

References:

https://blogs.sap.com/2012/04/08/sap-crm-oneorder-advanced-search-webui-
component-part1/

https://blogs.sap.com/2012/04/08/sap-crm-oneorder-advanced-search-webui-
component-part2/

PART 01 - 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.

Dynamic Query Object – BTQ1Order

 Query Result Object – BTQR1Order

1. Go to transaction code BSP_WD_CMPWB and enter the component name. e.g.

ZRAK_ORDERSRCH.

2. Add the BT Model.

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

4. Enter View name ‘Search’.
5. Add Both the Model nodes. Use model BTQ1Order to enter search criteria and
BTQR1Order for result list purpose.

6. Choose the Empty View.

7. Create new Custom Controller. E.g. QueryCuCo.
8. Define the Model Node BTQR1Order of type BOL BTQR1Order to keep &
Share the search result list.
9. As shown below choose ‘Create’ to define new Context node for Custom
Controller QueryCuCo.
 10. Enter the Model Entity BTOrder of type BOL BTOrder.

11. 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.  
12. Go to the Search View and create binding for context node BTQR1Order.
13. As shown below enter the BSP Application, Controller Type, Custom Controller
Name and Target Context node of Custom Controller.

14. Create new view Result.

15. 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.

16. Create binding/links of context node BTQR1Order with the custom controller
context node BTQR1Order.
 17. Choose view type as Table View and Configurable checkbox too.

  Note: Make sure context node BTQR1Order is selected from list box.  
18. As shown below create new View Set.

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

20. Enter View areas names (e.g. Search & Result) and respectively choose the
positioning of ViewAreas.
21. As shown below the wizard displays the overview of ViewSet ViewAreas.
22. Select the ViewArea Search, right click and choose ‘Add View’.

23. Choose View name ‘Search’.

24. In the same way, choose the ViewArea Result and assign ‘Result’View.
25. Add ViewSet ZRAK_ORDERSRCH/SearchVS into Window
ZRAK_ORDERSRCH/MainWindow (default). Choose the MainWindow,
right click and choose Add View.

26. Enter the view name SearchVS.

27. Make sure to flag it as Default.

28. Go to the implementation class of Search View.

29. 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.
30. Choose ‘Yes’ to keep the redefinitions of methods.

31. Choose the context node BTQ1Order of View ZRAK_ORDERSRCH/Search

and open Implementation Class ZL_ZRAK_ORD_SEARCH_CN00.

32. Replace the super class inheritance with new class name
CL_BSP_WD_CONTEXT_NODE_ASP.
 33. 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” />  

34. 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. 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. Test the Component. The following window with Search and
Result views should appear.
37. Create new event in View ZRAK_ORDERSRCH/Search.

38. Enter event name ‘search’.

39. The event handler method EH_ONSEARCH would appear as shown below.
 40. 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.

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.
  

41. 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. 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.

PART 02 - Scenario:

As described in the Part1 of ‘Creatoin of Advanced Search Component’, Our basic

SEARCH component is ready to use. This second part demonstrates the creation of
hyperlinks in result list and navigation to the details overview page upon following that
hyperlink.
 1. Go to View ZRAK_ORDERSRCH/Result. Expand the context node
BTQR1Order and Implement the GET_P method of attribute OBJECT_ID.

2. Copy the below code into method GET_P_OBJECT_ID. Basically GET_P

method returns the properties depending upon the value of inbound parameter
IV_PROPERTY.

The interface IF_BSP_WD_MODEL_SETTER_GETTER has the constants defined.

1) FP_FIELDTYPE – Checks for property ‘fieldType’ and returns the field type as
LINK.

2) FP_ONCLICK – Checks for property ‘onClick’ and returns the event name (e.g.
SELECTION).

3) FP_TOOLTIP – Checks for property ‘tooltip’ and returns the tooltip text. (e.g.
‘Click to see the details’).
method GET_P_OBJECT_ID.
  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 = ‘SELECTION’.                       “#EC NOTEXT
      when if_bsp_wd_model_setter_getter=>fp_tooltip.
        rv_value = ‘Click to see the details’.
  endcase.endmethod.
3. Create new view to display the one order details into separate view. E.g. Details.

4. Define the Model Node BTOrder of type BOL BTOrder and Model Node
BTAdminH of type BOL BTAdminH. Use the BTOrder as higher level node
with BOL relation BTOrderHeader for Model Node BTAdminH.
5. Create the Binding/Linkage with the Custom Controllers (QueryCuCo.do)
context node BTOrder.

6. Select the View Type as ‘Form View Without Buttons’ and also choose
Configurable checkbox.
7. Right click on Views and choose ‘Create Overview Page’ from context menu.
Enter the name ‘DetailsOV’.

8. Right click on ViewArea ‘OverviewPage’ and then choose ‘Add View’ to add
‘Details’ View into it. Then choose the ‘Details’ view from search help and
press ‘Enter’ key.
9. As shown below the ‘Details’ view will appear under the Overview Page
‘DetailsOV’ (ViewArea OverviewPage).  Then Click on ‘SAVE’ button.

10. Go to the Configuration tab of View ZRAK_ORDERSRCH/Details. Click on

EDIT button and then choose the fields from available fields and then click on
‘Save’ button.
 11. Add the OverviewPage ZRAK_ORDERSRCH/DetailsOV into Window
ZRAK_ORDERSRCH/MainWindow.

  Note: If you don’t assign View ZRAK_ORDERSRCH/DetailsOV to Window

ZRAK_ORDERSRCH/MainWindow (default) then, you won’t see the available views
to configure it in Overview Page as described below. 

12. Go to Configuration tab of OverviewPage ViewSet

ZRAK_ORDERSRCH/DetailsOV. Click on EDIT button; choose ‘Overview
Page’ radio button and Continue.
13. As shown below move the ‘Details’ view from Available Assignment Blocks to
Displayed Assignment Blocks. Enter the Title as ‘Details’.

14. Go to View ZRAK_ORDERSRCH/Result. Define the new Outbound Plug

‘TODetails’.

15. New method OP_TODETAILS will appear as shown below under the node
Outbound Plugs.
16. Open the Runtime Repository Editor.  Create Navigational Link from Result list
to Details Overview Page.

17. Enter the Navigational Link ID ‘TODetails’. As shown below choose the
Source Details (View ZRAK_ORDERSRCH/Result, Outbound Plug
TODETAILS) and the Target Details
(ViewZRAK_ORDERSRCH/DetailsOV, Inbound Plug DEFAULT).

18. The Navigation Link would appear as shown below.

 19. Go to View ZRAK_ORDERSRCH/Result. Create New Event
‘SELECTION’.

20. The event handler method EH_ONSELECTION would appear as shown

below.

21. Call the outbound plug method OP_TODETAILS into event handler method
EH_ONSELECTION.

       

method EH_ONSELECTION.
      OP_TODETAILS( ).

endmethod.

22. Pass the navigational link name ‘TODETAILS’ as outbound plug name for
navigation from View Manager.

method OP_TODETAILS.
       call method view_manager->if_bsp_wd_navigation~navigate
            exporting

            source_rep_view = rep_view

            outbound_plug = ‘TODETAILS’.

endmethod.

23. The Navigation from Result list to Details OverviewPage is ready to use. Test
the Component. Search the one order object. E,g, 5000000. Hover the cursor on
Transaction Number, you would see the tooptip text ‘Click to see the details’.
Click on the Hyperlink. The Details would appear into new Overviewpage.