In my last blog I created a custom GenIL object model. In this blog I am going to use that custom GenIL component to create a Search and Result view.

Step 1: Create a custom component

• Go to Transaction BSP_WD_CMPWB
• Give Component name as ZCMP_EMP_BOL and click on Create.

Step 2: Add Model

• Go to Runtime Repository and in Edit mode right click on Models and select Add Model

• Give the name of the custom component set ZSET_EMPL and click on SAVE.

Step 3: Create a custom controller

Custom controller is used to pass data from one view to another. We will have search, result and details view. To pass data across these views we need to create a custom controller.

• Right Click on Custom Controller and select ‘Create’

• Give a name to the Custom Controller say QueryCuCo
• Add model node ZEMPLOYEE with BOL Entity EMPLOYEE

• Add the attributes and finish the wizard

Step 4: Create a Search View

• Go to Component Structure Browser and right click on Views and select ‘Create’

• Give a name to the view say ‘Search’
• Add two model nodes: ZEMPLOYEE with BOL Entity EMPLOYEE and ZEMPSEARCH with BOL Entity SearchEmployee

• Add the Model Node attributes
• Bind the model node ZEMPLOYEE with custom controller context node. Select view type as ‘Empty View’ and finish the wizard

• Modify the code in Search.htm with the following code

<%@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            = “<%= ZEMPSEARCH->get_param_struct_name( ) %>”
fieldNames        = “<%= controller->GET_POSSIBLE_FIELDS( ) %>”
values            = “//ZEMPSEARCH/PARAMETERS”
maxHits          = “//ZEMPSEARCH/max_hits”
onEnter          = “SEARCH”
ajaxDeltaHandling = “false” />
<br><br>
<thtmlb:button id      = “search”
onClick = “SEARCH”
text    = “Search” />

• Go to the implementation class of the search view
• Open the Super class (e.g. ZL_ZCMP_EMP_SEARCH) and change the inheritance of controller class with new class CL_BSP_WD_ADVSEARCH_CONTROLLER

• Choose ‘Yes’ to keep the redefinitions of methods

• Go to the implementation Class of the context node ZEMPSEARCH and change the superclass to CL_BSP_WD_CONTEXT_NODE_ASP

• Go to the configurations tab of the search view and move the fields from available to displayed

• Define an Event Handler
  • Right Click on Event Handler and choose Create

• • Enter the event name ‘SEARCH’. Th event name is case sensitive.
  • Add the following code

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->zempsearch->collection_wrapper->get_current( ).
lr_result = lr_query_service->get_query_result( ).check lr_result is bound.

me->typed_context->zemployee->set_collection( lr_result ).

endmethod.

Step 5: Create a result view

• Give view name as Result
• Create a Model Node ZEMPLOYEE using BOL Entity EMPLOYEE
• Add model attributes
• Bind the model node with custom controller context node
• Make the view Type as Table view, check the configurable check box and select Context node ZEMPLOYEE and finish the wizard.

• Move the fields from available to displayed in the configuration tab and save the configuration.

Step 6: Create a Search Result Viewset

• Right Click on Views in the component browser and select ‘Create View Set’

• Give a suitable name say SearchVS and give the number of lines and columns. Here we need two rows and one column.
• Maintain the View Areas

• Add the Search and Result view to corresponding view areas in the runtime repository

• Add the SearchVS to the window in runtime repository.

Our Search and Result view is complete and ready to be tested.

I will discuss the overview page creation in my next blog. The test screenshots are attached at the end of my next blog.