Skip to Content

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

2.JPG

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

3.JPG

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

4.JPG

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

6.JPG

  • Add the attributes and finish the wizard

7.JPG

Step 4: Create a Search View

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

8.JPG

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

10.JPG

  • 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

12.JPG

  • 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 13.JPG
  • 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

14.JPG

  • Choose ‘Yes’ to keep the redefinitions of methods

15.JPG

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

16.JPG

17.JPG

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

18.JPG

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

19.JPG

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

20.JPG

  • 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’

35.JPG

  • 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

22.JPG

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

21.JPG

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

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Jerome Benjamin

    hi,

    I followed this blog until this step, then I tried test my component, but I got query not bound error.

    I’ve added the binding in custo controller and in my view of search, I bound it to the custo controller node search bol.

    Any idea?

    kr

    Jerome

    (0) 
  2. Nishant Kashyap

    Hi,

    I followed all steps untill Search View config as while going into configuration I am getting exception CX_SY_CREATE_OBJECT_ERROR.

    Do we also need to handle Create_object method of our model component class?

    Has anyone handled that?

    Any clue will be helpful.

    Thanks,

    nk

    (0) 

Leave a Reply