Tuesday 10 December 2013

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

Thursday 5 December 2013

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.