3. Creating Advanced Search Page - Advanced Search View

Now, We will create a search page. Which looks like.

Search Page contains
a. Dynamic Search View can be called as Advanced Search Page
b. Result view - Table view
c. View Set

First, We will start with Creating Advanced Search Page.

Go to Web UI Component using BSP_WD_CMP_WB.

By default always, 'Component Structure Browser' will get opened.

Select 'Views' under Component (* View is a part of Component),
right click , select 'Create'.

A wizard will open before you, Click on 'Continue'.

Define Name as 'AdvSearchView' by this you are provide name for Advanced search view.Click on continue.

Click on F4 help of BOL Entity, and Select 'AdvMobileSearch'.

Now, provide name of the Model Node as SearchObject(You can have your own Model Node name, but always better to add same name as of BOL Entity). For generalizing I am providing Model Node as 'SearchObject'.

'Model Node' a type of context node, Where context node stores business data at run time. Here we are defining the structure of Context node, based on BOL Entity of type 'AdvMobileSearch'.

Another key element to know here is, since we are designing this page for searching for mobile, need to provide a search object, already we have defined 'AdvMobileSearch' as a dynamic search object in GenIL Component 'ZMOBXX' which is a part of 'ZMOB_CMPXX'.

Fine, now Click 'Continue'.

Continue. Continue, Continue.Continue (4 times). Till you get 'Select View Type'. Specify view type as 'Empty View'.

Hold on this page and Observe: 

1. How many types of views are maintained?

2. What is specified at Context Node. try to think about it, how we got it? :-)

Continue, Complete.

Observe what are the classes getting generated. Note them.

 Finally, View is created.

Oops!  Nooooo, this is an empty view, and we are about to create Advanced Search View/ Dynamic Search View.Fine, we will convert this empty view to Advanced Search Page.

Steps to convert Empty page to Advanced Search Page.

1. Specify View Controller class type as Advanced Search Controller class.

Go to View implementation class:-

Double click on it, go to properties of this class. 

Double click on this super class. Don't forget to click on this class, (most of the people will make mistake here).

Go to edit mode.  Provide Description as ' Search View for Mobile details '.

Now change the super class by 'Change Inheritance'. Provide super class as 'CL_CRM_BP_ADVSEARCH_CONTROLLER' .

Press 'enter' Button, It will ask for redefining methods message. Say 'Yes' by clicking on 'Yes' Button. Save and Activate it.

2. Specifying the corresponding 'Context Node' as Advanced Search Node.

To do this,  expand 'Context' , expand 'Context Node' you will see a context node named 'SearchObject'(This we have created while creating view). Expand it. Can you see Context node implementation class 'ZL_ZMOB_DTL_ADVSEARCHVIEW_CN00'. 

Double click on it. Go to Properties tab. Now change the immediate super class from 'CL_BSP_WD_CONTEXT_NODE' to 'CL_BSP_WD_CONTEXT_NODE_ASP'. Save and Activate it.

Now, Properties tab looks like.

Now, we have converted 'empty view' to 'Advanced Search View'.

Next, step is to write code for layout, this will be done at .htm file of view.

Goto .htm file, you can view at.

Double click on this 'AdvSearchView.htm'. Add below mentioned code inside it.

check,Save and activate it.

We are done with 'Advanced Search View'.

Next Step is to assign 'Advanced Search View' to Window(MainWindow). We will see this in next chapter