In this post let is see how to create a search and result view and link the view to the BOL object.

To learn about Custom BOL for a Z Table Click here.

Click Here to Go thru that post to understand how to create a New component and the new view.

Pre request. A new Component and a BOL object. Use the above link to learn about that before start going

forward.

OK now you have a component. Let us go thru and see how we can create a search and result views.

For search you need to have 3 views one is search view and another is result view and a third view is the View

set. In this view set you combine the view one and two. We are going to use the ZTBOL as our BOL object for

this example.

Component Initial Preparation for Search and Result View creation

First we need to link the custom BOL object to this Component. Go to the Runtime Repository Editor and click on

the edit. Now add the ztbol to this component.  See the following screen shot.

Now the custom BOL component (ZTBOL) is added to our search and result component. Make sure you save

this. 

IMP:- Create a custom controller first then create view.

Search View

Create a view with the MODEL Node using the custom BOL.

Now click  on the browser component structure tab and go to the ZSRCMP component. Click on the View and

right click to create a view. The Create New View Wizard will popup and continue the process. See the following

screen shots for the process.

The Above is the name of the View.

In the above screen you need to enter the name for the model nodes(like a abap structure name) and the BOL

entity that you created during the Custom BOL creation( for more info Click here for custom BOL)

Select the TestSearchAdv structure that we need for the search view. TestResult structure will be used for the

result view. Now let us go to the next screen in the wizard .  Now we need to identify the attributes fields that

we need to use for this model nodes.  So go to model attributes screen. Skip the value node screen. In the Add

Model Attributes to Modell Node click on the + sign to add the attributes. See the following screen shot.

Now go to the create Links to Custom Controllers. I already created the custom controller for this example. That

is like declaring the global variable and link that local variable to the global variable. 

Click Here to See how you can create the custom controller. See the following screen shot for the link to

custom controller.

Now the Model node of the View is linked to the Model node of the custom controller. If some other

view (we will do that for the result view) is linked then the same value is passed between the two views with out

any coding. Click continue and select the view type as empty view and finish the wizard.

Now the view is completed.  This view is ordinary view. Now we need to make the view configurable. That is the

only way we can add fields to the view.

Click Here and follow the instruction and see how to make the view configurable and come back here.  After

the configuration the screen looks as follows.

Now Still the WEB IC only know this is a ordinary view. Now we need to convert this view in to Search View. For

that we need to change the super class of the Implementation class.  Double click on the implementation class

and go to the attribute table of the class module. You will see the super class as ZL_ZSRCMP_SEARCHADV. Now

click on the super class you will see the SAP’s inherited class as CL_BSP_WD_VIEW_CONTROLLER. We need to

change this class to the SAP’s advance Search controller CL_BSP_WD_ADVSEARCH_CONTROLLER. Now your plain

view became as search view.  The above is very important. If you didn’t do this then your view is ordinary view

only.  See the following screen shot.

Once the above implementation class is converted for the search now we need to convert the context nodes to

act as search related nodes. We need to change the implementation of the context node to search related

node.  Only change the node that you want to show up on the search screen. Don’t do this for every node. In

this example I have search node and result node. I want the search node show on the screen. So I modify only

the search node with this new implementation class. Replace the existing super class

CL_BSP_WD_CONTEXT_NODE with CL_BSP_WD_CONTEXT_NODE_ASP.

See the following screen shot.

Please add the following code in the searchadv.htm Please rpleace all the “ to ” when you copy.

  <%@page language=”abap” %>

<%@extension name=”htmlb” prefix=”htmlb” %>

<%@extension name=”xhtmlb” prefix=”xhtmlb” %>

<%@extension name=”crm_bsp_ic” prefix=”crmic” %>

<%@extension name=”bsp” prefix=”bsp” %>

<%@extension name=”chtmlb” prefix=”chtmlb” %>

<%@extension name=”thtmlb” prefix=”thtmlb” %>

<thtmlb:advancedSearch id                = “advs0″

                       fieldMetadata     = “<%= controller->GET_DQUERY_DEFINITIONS( ) %>”

                       header            = “<%= TestSearch->get_param_struct_name( ) %>”

                       fieldNames        = “<%= controller->GET_POSSIBLE_FIELDS( ) %>”

                       values            = “//TestSearch/PARAMETERS”

                       maxHits           = “//TestSearch/MAX_HITS”

                       onEnter           = “SEARCH”

                       ajaxDeltaHandling = “false” />

Activate this class and go back to the component editor. 

Now click on the configuration on the view you will see a different configuration than the ordinary view

configuration. See the following screen shot.

Edit this screen and add all the fields to the right and save the configuration. The screen looks as follow.

This is like the same way you add the new fields.

See some more information in the following link. The detail is explained there.

http://blogs.moovar.com/sap/sap-crm-web-ic-make-view-configurable/  

Now the search view is ready. Let us start building the result view.

Result View

Now let  let us add the result view.

Adding the result view is same as the above.  Just follow the steps.

1. Create the Result view with name as resultview.

2.Add Model node as TestResult and link to BOL Entity as TestResult.

3. Add model attributes and select all the fields in the node.

4. Link the node to the custom controller to the view node.

     

5. In the end select the view type as Table view  and the context node as TestResult and complete the view

creation.

    

Make the view configurable and change the existing code to the following code.

 <%@page language=”abap” %>

<%@extension name=”htmlb” prefix=”htmlb” %>

<%@extension name=”xhtmlb” prefix=”xhtmlb” %>

<%@extension name=”crm_bsp_ic” prefix=”crmic” %>

<%@extension name=”bsp” prefix=”bsp” %>

<%@extension name=”chtmlb” prefix=”chtmlb” %>

<%@extension name=”thtmlb” prefix=”thtmlb” %>

<%

  DATA:

  lv_xml    TYPE string,

  lv_collapsed type abap_bool,

  lv_lines     type i.

  lv_xml = controller->configuration_descr->get_config_data( ).

  lv_lines = 20.

%>

<chtmlb:tableExtension tableId = “ResultList”

                       layout  = “FIXED” >

  <chtmlb:configTable xml                   = “<%= lv_xml %>”

                      id                    = “ResTable”

                      navigationMode        = “BYPAGE”

                      onRowSelection        = “select”

                      table                 = “//TestResult/Table”

                      width                 = “100%”

                      headerVisible         = “FALSE”

                      visibleRowCount       = “10″

                      fillUpEmptyRows       = “FALSE”

                      selectionMode         = “<%= TestResult->SELECTION_MODE %>”

                      selectedRowIndex      = “<%= TestResult->SELECTED_INDEX %>”

                      selectedRowIndexTable = “<%= TestResult->SELECTION_TAB %>”

                      downloadToExcel       = “TRUE” />

</chtmlb:tableExtension>

Make sure you copy the code and change the asci character if there is any.

See the following screen shot for the resultview.

Now the resultview is ready. We need to combine the search view and the result view in the view set. Let us

create a viewset for that.

View Set

Now we need to create a view set and the both view to this view set. See the following screen shot.

A pop up wizard will appear and you need to continue with the wizard. See the following screen shot for this.

in the next screen define the view area for our views. (Search view area and Result view area).

Now the view area is complete. Go head and finish this wizard. Once this is completed we need to go to Runtime

Repository Editor and add this views to the view area. See the following screen shots.

Now add the searchviewadv to the SV view area and the resultview to the RV view area. See the

following screen shot.

Now add this srviewset to the window. Right click on the window and select the Add view and add the srviewset

view to this window.

click save and save all the changes that you did on this runtime repository.

Imp:- Replace the code present in your Viewset.htm with the below code.save and activate.

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<%@extension name="xhtmlb" prefix="xhtmlb" %>

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

<%@extension name="crm_bsp_ic" prefix="crmic" %>

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

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

<%

***  Determine if search is to be collapsed

DATA lv_show_fields TYPE string.

  lv_show_fields = 'X'.

 "IF lv_show_fields EQ abap_false.

"lv_show_fields = 'true'.

 "ELSE.

 "lv_show_fields = 'false'.

 "ENDIF.

%>

<chtmlb:pageType type="SEARCH" >

<thtmlb:searchFrame showSearchFields   = "<%= lv_show_fields %>"

onShowSearchFields = "TOGGLESEARCHDISPLAY"

onHideSearchFields = "TOGGLESEARCHDISPLAY" >

<thtmlb:searchCriteriaFrame>

<%

  "IF lv_show_fields EQ abap_false.

%>

<thtmlb:searchArea>

<thtmlb:searchTagArea>

<bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'sview' ) %>"

url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'sview' ) %>" />

</thtmlb:searchTagArea>

<thtmlb:searchButtonsArea>

</thtmlb:searchButtonsArea>

</thtmlb:searchArea>

<%

"Endif.

%>

</thtmlb:searchCriteriaFrame>

<thtmlb:searchResultFrame>

<bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'rview' ) %>"

url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'rview' ) %>" />

</thtmlb:searchResultFrame>

</thtmlb:searchFrame>

</chtmlb:pageType>

Now save every thing and click on the Test button on the lefthand side of the component editor to run this

component. you will get the following result.

OK Now you have a good feeling of you completed this screen and it is ready to execute. But wait you don’t

have any trigger to execute the search result. So we need a Onclick event or a Button on this view or viewset to

see the result.

I will write about that in the next post.