18. Navigation from SearchPage to Overview page - Part2

Now we will find solution for a problem with navigation from window to window within a Component. Let's deal with solution.

Let's make window 'WinOVP' as external resource for Component itself. How can we do it?
It is possible through Component interface, and Component Usage.

Component Interface : Exposing window to the outside world.

Component usage : Using Exposed window within  the Component, in other words importing windows of other component.

First, Let's expose window to the out side world by 'Component Interface'.

Steps to follow:

a) Goto 'Runtime Repository'.
b) Select 'Component Interface', right click select 'Add Interface View',
c)  select 'WinOVP' as Mapped to Window. Continue.

When you expand 'Interface view' of 'Component Interface' looks like:

    Add inboundPlug 'FROMOVPW'. right click 'InboundPlugs', select 'Add Inbound Plug', do the remaining stuff by yourself.

Now, Second task is to Expose 'WinOVP' to external world just as public.

Let's add this window as visual part of Component Usage.

Step's to create Component Usage.

In a 'runtime repository', right click on 'ComponentUsage', select 'Add Component Usage',
 Provide Id 'self',
 Used Component : Provide the component name.
 Interface view : Select the WinOVP.

It  look like :

'Continue.

By this facility, WinOVP can be used by any other Component.

Add this usage window to 'MainWindow'.

Goto 'MainWindow', Right click 'Add View', select view as:

'Continue'.

Let's change navigation part.

Expand 'Navigation Links', Expand 'Navigation Link' -> Expand 'Targets' -> Right Click on 'Target'
-> 'delete it'.

Now, Add our WinOVP as target as:

 'Save' it.

It's time to Test your Applications. Yup, we are able to Navigate to Overview page. But data is not getting populated in screen elements. We will perform that in next chapter 19.

Question to you?

1) What is mandatory to create a navigation?

17. Navigation between SearchPage to Overview Page(Window to Window within a Component)

We need to develop an application in such a that, when user clicks on resulted hyperlink, it will navigate to overview page as:

First, Lets create navigation between 'searchpage' to 'overviewpage', then we will create navigation link in other chapter.

Let me show you schematic diagram of navigation.

We will start with numeric tasks and then we will do the alphabetical tasks.

1. Hyperlink to Purchase_date.

 We need to implement P_Getter for making Purchase_date as hyperlink.

Goto-> Attribute Purchase_date of ResultView, as generate P_getter method as:

Expand 'Struct.purchase_date' and double click on 'GET_P_PURCHASE_DATE' and embed below mentioned code.

Create a evenhandler with the name 'PURCHASE_DATE'.

Now,
2. Outbound plug for result view. Select Resultview, goto 'Outbound Plugs', right click 'Create', specify name of the outbound plug as 'toOVPV'.

3. Similarly, create outbound plug for 'MainWindow' as 'toOVPW'.

4. Similarly, create inbound plug for 'WinOVP' as 'fromOVPW'

5. Similarly, create inbound plug for 'OverviewPage' as 'fromOVPV'.

6. Need to create a navigation link between two windows. Goto 'runtime repository'

Select 'Navigation Links', right click 'Create'.

Provide Id as : fromSPtoOVP (From Search Page to Overview Page), and source and target as below.

7. what is this regards, we will pause it, will discuss about it later.

Now, Let s implement 'alphabetic tasks'.

a) Implementing eventhandler 'PURCHASE_DATE' as:

OP_TOOVPV( ).

b)  Implementing Outbound plug of ResultView-> OP_TOOVPV( ). Double click on Resultview's outbound plug.

" Calling Outbound plug of MainWindow from ResultView outbound plug as

Code :

 data: lr_window TYPE REF TO cl_bsp_wd_window.

  lr_window = me->view_manager->get_window_controller( ).

  lr_window->call_outbound_plug( 'toOVPW' ).


c) Navigating from MainWindow to WinOVP.Implementing MainWindow's Outbound plug as:

method OP_TOOVPW.
    me->view_manager->navigate( source_rep_view = me->rep_view
outbound_plug = 'fromSPtoOVP').
endmethod.


d) Calling inbound plug of Overview Page from WinOVP's Inbound Plug.

method IP_FROMOVPW.
  DATA : lr_view TYPE REF TO ZL_ZMOB_DTL_MOBILEDETAIL2_IMPL.
  lr_view ?= get_subcontroller_by_viewname( 'ZMOB_DTLCMP_DNX/MobileDetailsOVP' ).
  CHECK lr_view IS NOT INITIAL.
lr_view->IP_FROMOVPV( ).
endmethod.


We are done with the changes. Now its time to 'test' the application.

Okey let's test it.

OOPsssssssssss....

we got an error.

what it say

• Direct navigation from window ZMOB_DTLCMP_DNX/MainWindow to window ZMOB_DTLCMP_DNX/WinOVP is not allowed

O noooooo, So, we cannot navigate from windowto window of same component.Then what to do... Let's see in next chapter. Solution for Navigation from window to window

16. Assigning Assignment Blocks to Overview page

Let's Assign 'MobileHeader' and 'SIMTable' to Overview page.

Views assigning to Overview pages are called 'Assignment Blocks'.

Go to at 'Runtime Repository' , Expand 'viewset' you will find Overview page here.

Expand it. You will find 'View Area OverviewPage' Right click & Select 'Add View'.

Add 'MobileHeader' and 'SIMTable'.

Don't forget to 'Save' it.

Now go to 'Component Structure Browser', Double click on  'MobileDetailOVP', Go to Configuration tab.

Create new Confguration, check 'Overview Page', click on 'Continue'. Add the views to 'Display Assignment Blocks' and 'Save' it.

We are done with Assigning Assignment blocks to Overview Page.

15. Creating SearchPage in SAP CRM 7.01(EHP1)

As of now we followed standard way of creating SearchPage(using 7.0).

Let's Create SearchPage using EHP1 features.

1. Create a UI Component.

2. Add a model at Runtime repository.

3. Let's Create SearchPage.

Select 'Views' in 'Component Structure Browser/

Views -> Select ' Create Search Page'

It will open a wizard, Click 'Continue'. Wizard will provide defaulted name for windows, view, and viewset.

Say 'continue'. Provide Search Query Node as 'AdvMobileSearch', wizard will help you with Search Result Node. Continue, Continue, Complete.

Select 'SearchQueryView', click on 'Configuration', create 'New Configuration', add Search Parameters and Save it.

Do Configuration settings for SearchResultView, Save it.

Test your application, here you are with 'SearchPage'.

14. Features of Window and Creating a new Window

Features of window.

• A window is a special type of view in a component that defines a root for a hierarchy of view sets and views in the runtime repository, and has no .htm file.
• It is responsible for the visual output of a UI component. 
• It has its own controller and a context , it can be published as an interface view for reuse of a component
• A viewset or view can only be part of exactly one window (still no direct reuse of views).

What is the need of creating new window?

I would like to show usage of window controller, and custom controller.

Let's create a new window, it's so simple.

Go to 'Component Structure Browser', Right clock on 'Windows' -< Select 'Create'.

Wizard will open, Click 'Continue'.

Define Name of a window as : WinOVP (Window for Overview Page). We are not creating any Model Nodes here, just continue.... and complete it.

*Observe the classes generated, Window contains Context (*_CTXT), which means, it is capable for storing the data.

It's very simple. We are done with creating a new window, we will use this window to show overview page 'MobileDetailOVP' in next chapter.

13. Creating Table view

Let's create a table view for getting 'SIM' details.

In this view we are going to use relationship of objects, we will see how to retrieve child details using parent object details. As in our business we need to retrieve 'SIM' details of respective 'Mobile'.

Here 'Mobile' is Parent, 'SIM' is dependent object of Mobile, and they have a relationship named 'MobileSIMRel'.

Let's do it. Go to 'Component Structure Browser', Select 'Views' -> 'Create'.

Wizard will be open, Click 'Continue'.Provide name of view as 'SIMTable', Click 'Continue'.

Provide BOL Entity as 'Mobile' and Model Nodes 'MobileHeader', Click on 'AppendRow' icon as.

Provide BOL Entity as 'SIM', Model Nodes as 'SIMObject', Higher-Level Model Node as 'MobileHeader', What is this 'MobileHeader'?
This shows that 'SIMObjec't has a parent object 'MobileHeader'.

Fine, provide 'BOL Relation' as 'MobileSIMRel'. Just try to analyse what we are doing here.................

Click 'Continue' till 'Select View Type', Select type of view as 'Table View', Properties as 'Configuration'.Don't don't click continue now. Just see 'Context Node' at the bottom of wizard screen. Select Context Node as 'SIMObject'.Why? b,cos I would like to dispay 'SIMObject' details on the screen not 'Mobile' Details.

Click 'Continue', and 'Complete' it.

Go to 'Configuration' tab, Create 'New Configuration', and add available fields to display fields.
We are done with table view.

What next, Adding 'MobileHeaderView', and 'SIMTable' to Overview page. 

12. Creating Form View

Now we will create a form view, which provides detailed information about 'Mobile'.

Let's create a form view, go to 'Component Structure Browser' -> Select 'Views' -> Select 'Create'.

A wizard will be opened before you.

Click Continue.

Define View name as 'MobileHeader'. Click Continue.

Provide BOL Entity as 'Mobile', and Model Nodes as 'Header'. Click 'Continue' till you get 'Select View Type', now select 'View Type' as 'Form View', right side check 'Configurable' and 'Change/Display Mode' as:

Click 'Continue', then 'Complete' it.

Observation : Always try to see the classes generated by wizard, and try to analyse it.

Double click on 'MobileHeader' form view. Go to 'Configuration' tab, click on 'New Configuration' button,

Continue with 'Defaulted Configuration',  Click on 'Show Available Fields' as:

Expand 'HEADER'. Select 'PURCHASE_DATE' and click on 'plus' on to add them to display fields.

Similarly, add the fields available, and 'Save' it. Otherwise this configuration will not be saved.

Now , we done with Form view which displays 'Mobile Details' in future this is the place where we modifying 'Mobile Details'

Till that stay tuned to ' S-Max SAP CRM WebUI blog'. :-).

11. Creating Overview page

If you look any Standard Search screen you will see a hyperlink, from which it navigates to another page which containers group of view embedded into it, i.e. nothing but a Overview page.

Let's see a screen shot how it looks like.

We are going to discuss on:

1. Creating Overview page
2. Creating Form view
3. Creating a table view (same as of ResultView).
4. Assigning Form View, and Table View, and
5. **Another important factor is passing data from ResultView to FormView, and Table View.

First we will start Developing individual views and then will work on passing the data.

Creating Overview Page. Go to UI Component -> 'Component Structure Browser' -> Right  Click 'Views'

-> Select 'Create Overview Page'.

A wizard will open before you. Provide Overview page as 'MobileDetailOVP'(Generally for overviewpage it is suffice as OVP).

Observe that classes created. We are done with creating Overview page.

10. Changing title for SearchPage

Search page is working fine. Let's do a cosmetic change. Let's change the title of the page.

Before changing just test your application and see what's the title displayed.

Let's change the SearchPage 'title' to 'Searching Mobile Details'.

The title of this page belongs to ViewSet  'SearchResultViewSet'. So, we need to make changes to 'SearchResultViewSet'.

Open 'SearchResultViewSet' by double clicking on it. Expand 'Breadcrumbs and Messages'.

Select 'IF_BSP_WD_HISTORY_STATE_DESCR~GET_STATE_DESCRIPTION' -> Right click 'Redefine'. Once you redefined it, 'Green colored' icon will appear before it.

double click on it, and write code as below:

Save & Activate it.

Now, test your application. Hope you got it.

Check by yourself : before the changes that we have made, there was a title, from where we got it.

9. Passing data from AdvSearchView to ResultView

Let's Pass data from AdvSearchView to ResultView.

Few things that you need to know which passing the data.

1. Data mapping will be done by Mapping the context nodes, this process is called Context Binding'.
2. Context Binding between view to view is not possible.
3. We need to do context binding between view to its window's context node 'MainWindow'

But, we don't have any context nodes in MainWindow.

Fine,we need to create a context node in MainWindow of type BOL Entity ___________(Fill in the blank).

You are not getting it, no worries, I will help you.

Open 'MainWindow' by double clicking on it.

Expand Context -> Right click on Context Nodes -> Select 'Create'. It open a wizard.

Now create a Model node 'ResultObjectW' of type .... 'Mobile'. Hope you can do it.

Now go back to AdvSearchView's Context Node 'ResultObjectV'

Right Click on it -> Select 'Create Binding' You will get a pop up window, provide details below:

Follow the same steps for ResulView's Context Node 'ResultObject'. What you are doing here... Context mapping.

Now, expand 'ResultObject' Context node, you can observe the binding details as:

Go, and test the application.

Woww, We have done with the SearchPage, and learned few Concepts.

What's next 'Creating Overview page', wht's it, why.... we will learn there...

8. Adding Event Handler to Advanced Search View

Let's add Event handler to 'AdvSearchView'.

Goto view 'AdvSearchView', double click on the view. 

First Let's declare a button in AdvSearchView.htm file to view it. Goto 'AdvSearchView' and add the code at the bottom.

Code  as :

Save and activate it.

Now test you application. Search button appears in the screen. but, it is not helping us to fetch the details.

When you(user) clicks on 'search' button, technically it is called as 'Action'.

So, let me continue like... When user perform a Action(Here Clicking on 'Search' button). The request will go to our UI Component, and this Action will raise a Event, and this event should be handled by the 'Event Handler'. This is how Event handler follows Event, Event follows Action.

So, we need to define event handler with name  * 'search'. 

Let's do it. Select 'Event Handler' -> right click -> 'Create'.

Provide, event handler name as 'search'. 

Note: the name of event handler is case sensitive, provide the same name of the code that we have added in .htm file(Onclick = "search").

Wizard will create a method 'EH_ONSEARCH'.

You have created a event handler 'search' on 'AdvancedSearchView'. now, we need to perform tasks that we expect once we click on 'Search' button.

What is expected : Need to retrieve resulted data and pass it to 'ResultView'. Passing the values to 'ResultView' is not possible b,cos of framework limitations.

What we can do is to store the result data, where............. Storage device is Context Node' and what should be it's structure, it should be Mobile. So, we need to create a Context Node with name 'ResultObject' of type 'Mobile' BOL Entity.

Let's Create a Context node.

Expand 'Context' -> Select 'Context Nodes' -> Right Click 'Create'. You will get a wizard to create Context Node -> Click Continue. Provide details as:

Click 'Continue'.'Continue'.'Continue'.'Continue'. Complete.

Observe the classes created, and try to think about them, what they are..............

Now, we will write code at 'EH_ONSEARCH' for Firing Advanced query, and passing resulted data to Context node 'ResultObjectV'.

Double click on 'EH_ONSEARCH' under Event handlers. Write the code as:

Sorry for providing screen shot, I want you to write the code, and analyse it.
Save and Activate it.

Go and test the application. Are you getting data in Resultview.

No, We have fired the query.. fine.
resulted data we send to context node of.............Advsearchview, not of Resultview.

Now, the task is to pass data from AdvSearchView's Context node (ResultObjectV) to ResultView's Context node "Resultobject'.

Need to check in next chapter.

7. Assigning Views to ViewSet

Let's assign Views to Viewset.

You remember that assignment are done at .... 'Runtime Respository Editor'.

Lets go to 'Runtime Repository Editor'.

Before assigning view to viewset, check whether we have already assigned 'AdvSearchView'. Remove this view from window as .

Now, goto 'Viewsets' Expand it. You will get 'SearchResultViewSet', expand it.
Select 'SearchArea', right click select 'Add View'.
A pop up window appears. select View go to F4 help. It will provide list of view, select 'AdvSearchView'.
Click on continue button.

Note* : Don't forget to save 'runtime repository editor' you need to get practice of it. You can save few trials :-) .
Similarly, add Resultview to ResultArea, and and ... don't forget..... saving it...

Just think why, it has to be saved every time when I use 'Runtime Repository Editor'??...  I am leaving it for you.

Now, Assign viewset to the window, in window panel...... save it. as

.





Now test the application. By clicking on test button.

O Noooooo, how many times, we missed one more thing to add Search Button, where we need to add Search Button. we need to add in AdvSearchView.

So, we are facilitating User to
a) To provide Search inputs (Already we designed it)
b) To Perform a action 'Clicking on search button' to fetch the results. (to be done).

6. Creating ViewSet & Defining View Areas

Lets create a view set, and assign AdvSearchView and ResultView to it.

Go to 'Component Structure Browser' Select 'Views' as.

A wizard will open before you,  click on 'Continue'. Provide the same of a ViewSet as 'SearchResultViewSet'. 

Now we have to provide view areas, and their positions. WebUI Viewset is using GRID layout.

There are different type of layout are there as row layout, flow layout.

Provide Lines as '2', Columns as '1'.

Click 'continue'. We have to define 'View Area' Define them as:

Click Continue, it will display view areas, with the defined layout as:

Click 'Complete' you have created viewset.

Notes : Viewset is same as of view which contains controller, context, and .htm file.

Now our job is to assign views to viewset, and then viewset to window.

We will perform them in next chapter.

5. Creating Result View - Table View

Go to 'Component Structure Browser' ,
        ->     Select views -> ( Right Click) Select 'Create View',

       




it opens up a wizard, Provide name of the view as 'Result View',  Click 'Continue'.

Now it's time to provide BOL Entity for Model Node, what we have to provide.
Fine, We expect result page should display result object of 'AdvancedSearchObject'
Lets check what is the result object for 'Advancedsearchobject' at GENIL_MODEL_EDITOR.

result object is 'Mobile', So we should provide BOL Entity as 'Mobile' and model node as 'ResultObject' .
Continue... till you get 'Select View Type'.
Now, Select view type as 'Table View', check 'Configurable' properties.
Continue, Complete.

Now, observe, first it creates 'Context class', then 'Context Node', then View Controller, then View Controller implementation class.

Our result view is done. Oops, there are few things still left.

First, of all we will select the fields that we want to display.

Now, click on 'New Configuration' Button.

Select the defaulted entries, what ever you have, continue.

Note*: Configuration determination has its significance when users would like to have different screen element of same UI Component.

Now select the fields which you want to display on result page. By selecting them from Available fields to Display Fields.

Select all of them for our application.

and 'Save' it by clicking on 'save' button above. Unless you save these configuration will not be save with these changes.

We have to display this view in viewset, so, we will create a viewset and will add Search view , and result view. We will perform it in next chapter

4. Assigning View to Window

First of all let's discuss why we need to assign view to a window?

As of now, I can say from a web page(browser) we will be able to access a window not a view. So to access a view it should be assigned to a window.

Finally, to see Advanced Search View on browser, we need to assign Advanced Search View to window. Where we have to assign window to view. The place for assignments is 'Runtime Repository Editor'.

Try to understand the terms 'Run time' + 'Repository' + 'Editor'. Have you got something, if not, no worries we will discuss about it later.

Fine, Now we will start assigning view to a window.

Go to 'Runtime Repository Editor'. Expand 'Windows' you will find 'MainWindow', Who has created Mainwindow? You only created, at the time of UI Component creation.

Right click on 'MainWindow'. You should have 'Add View' option under it. If it is not the case then you are at display mode, now go to edit mode by clicking on pencil icon. Then select 'Add View'.

You will get a pop up, where Select view part you will get F4 help, there you can find the view that you have created 'AdvSearchView', select it. Click 'Continue'.

That's all you have assigned view to a window.

The resulted screen looks like.

Don't forget to check and save it. Otherwise 'Runtime repository Editor' will not get updated with latest changes.

Now, test the UI Component by clicking on test button as:



You will get screen as:

Is this what we expected. Nooo, there is lot more to do. Now it time to create 'Result view'.

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