In my last blog I used a custom GenIL component to create a Search and Result View. In this blog I will create an overview page and add navigations from the search result view to the details view.

Here are the steps to be followed:

Step 1: Create a Details View in the custom component created earlier

• Give view name as EmployeeDetails
• Create a Model Node ZEMPLOYEE using BOL Entity EMPLOYEE
• Add model attributes
• Bind the model node with custom controller context node
• Select View Type as Form View

• Arrange the fields in the configuration tab

Step 2: Create a Details Overview page

• Right Click on Views and select Create Overview Page

• Give a suitable name say DetailsOV
• Assign the details view to the Overview page in the runtime repository

• Move the EmployeeDetails view from available to displayed and save the configuration

• Assign the views SearchVS and DetailsOV to the window and make SearchVS as the default view

Step 3: Create navigation from search page to details page

• Redefine the method GET_P_EMPLOYEE_ID in the Result view

• Add the following method to create a hyperlink

method get_p_employee_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 = ‘DETAILS’.                                 “#EC NOTEXT
when if_bsp_wd_model_setter_getter=>fp_tooltip.
rv_value = ‘Click to see the details’.
endcase.
endmethod.

• Create an event DETAILS in the Result view
• Add the following code in the event handler

method eh_ondetails.
data: lr_employee type ref to if_bol_bo_property_access,
lv_index       type i.
cl_thtmlb_util=>get_event_info(
exporting
iv_event = htmlb_event_ex
importing
ev_index = lv_index ).
lr_employee ?= me->typed_context->zemployee->collection_wrapper->find( iv_index = lv_index ).
op_todetails( ).
endmethod.

• Create an outbound plug ToDetails. Right click on Outbound Plugs in the View Structure of the result view and select ‘Create’
• Add the following code

method op_todetails.
call method view_manager->if_bsp_wd_navigation~navigate

exporting

source_rep_view = rep_view

outbound_plug = ‘TODETAILS’.
endmethod.

• Create a Navigational link in the runtime repository

The custom component is ready to be tested. When we click on Execute in the component workbench we get the following scereen. On clicking on Search or pressing Enter the result is displayed as shown below.

When we click on the hyperlink the details are shown

Note: As you can see the description is dependent on the record whose details are shown. This can be done with the following steps

• Create a model node ZEMPLOYEE with BOL entity EMPLOYEE in the view DetailsOV and bind it with the custom controller

• Go to the implementation class of the view DetailsOV and redefine the method IF_BSP_WD_HISTORY_STATE_DESCR~GET_STATE_DESCRIPTION
• Add the following code

method if_bsp_wd_history_state_descr~get_state_description.

data lr_employee type ref to if_bol_bo_property_access.

data lv_employeename type zbol_emp_name.
lr_employee ?= me->typed_context->zemployee->collection_wrapper->get_current( ).

call method lr_employee->get_property_as_string
exporting
iv_attr_name      = ‘EMPLOYEE_NAME’*    iv_use_iso_format = ABAP_FALSE
receiving
rv_result         = lv_employeename
.concatenate ‘Details of’ lv_employeename into description separated by space.
endmethod.