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.