Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Navigation List

 

 

Navigation list provides the navigation area and is used inside the contextual panel. The data source property of the navigation list is to be binded to the recursive node.

 

Example display of navigation list:

 

clip_image001

Exercise: Let us see an simple example that demonstrates how to use the contextual panel with navigation list.

Scenario: Display a navigation list and on select of navigation list throw a message of which navigation link was selected.

 

Step 1: Go to the Tcode SE80 and create a Webdynpro component.

clip_image002

 

Assign the component to the package or save it in the local object.

Step 2: As mentioned earlier, Navigation list must be binded to the recursive context node. Create a recursive context node as shown below.

Create a context node with cardinality 0..N.

clip_image003

 

Create a recursive node for the context node created as shown below.

clip_image004

 

Enter the name for the recursive node and click on select.

clip_image005

 

Choose the context node as the recursive node from the list.

clip_image007

 

clip_image008

 

Create an attribute for the context node ‘Navigation’ to store the list of the navigation values.

clip_image009

 

clip_image010

Step 3: Go to the layout tab of the view controller and insert the contextual panel UI element.

clip_image011

 

Right click on the contextual panel UI element and select insert element.

clip_image012

 

Enter the id and type for the element.

clip_image013

 

 

Bind the item source property to the Context node Navigation and item text property to the context attribute list.

clip_image015

 

Create an action for the event onselect of the navigation panel with transfer UI parmeters.

clip_image016

 

Right click on the navigation panel and select insert header.

clip_image018

 

Enter the title for the navigation.

clip_image019

 

Step 4: Go to doinit method of the view controller and initialize some value for the context node as shown below.

Code:

  DATA LO_ND_NAVIGATION TYPE REF TO IF_WD_CONTEXT_NODE.
 
DATA LT_NAVIGATION TYPE WD_THIS->ELEMENTS_NAVIGATION.
 
DATA LS_NAVIGATION TYPE WD_THIS->ELEMENT_NAVIGATION.

  LO_ND_NAVIGATION
= WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_NAVIGATION ).
  
  LS_NAVIGATION
-LIST = 'LIST 1'.

 
APPEND LS_NAVIGATION TO LT_NAVIGATION.
 
CLEAR LS_NAVIGATION.
  
  LS_NAVIGATION
-LIST = 'LIST 2'.
 
APPEND LS_NAVIGATION TO LT_NAVIGATION.
 
CLEAR LS_NAVIGATION.
  
  LS_NAVIGATION
-LIST = 'LIST 3'.
 
APPEND LS_NAVIGATION TO LT_NAVIGATION.
 
CLEAR LS_NAVIGATION.
  
  LO_ND_NAVIGATION
->BIND_TABLE( NEW_ITEMS = LT_NAVIGATION SET_INITIAL_ELEMENTS = ABAP_TRUE ).

  

Step 5: Go to the event handler method for the onaction and do the following to display a message on the link selected.

The event handler method contains a importing parameter context_element which contains the object reference for the navigation link selected. Using get static attribute method of interface if_wd_context_element get the value selected.

clip_image022

Code will be generated as below.

clip_image023

 

Modify the code as below.

clip_image024

Now the component ls_navigation-list will contain the value of the navigation link select. Concatenate it with a string variable and display the message.

Code:

  DATA : LV_STRING TYPE STRING.

 
CONCATENATE 'You have selected the link' LS_NAVIGATION-LIST INTO LV_STRING.

 
DATA LO_API_CONTROLLER     TYPE REF TO IF_WD_CONTROLLER.
 
DATA LO_MESSAGE_MANAGER    TYPE REF TO IF_WD_MESSAGE_MANAGER.

  LO_API_CONTROLLER ?= WD_THIS
->WD_GET_API( ).

 
CALL METHOD LO_API_CONTROLLER->
GET_MESSAGE_MANAGER
    RECEIVING
      MESSAGE_MANAGER
= LO_MESSAGE_MANAGER.


 
CALL METHOD LO_MESSAGE_MANAGER->REPORT_MESSAGE
   
EXPORTING

      MESSAGE_TEXT
= LV_STRING.

 

 

Save and activate the whole component. Create an application and test the output.

Output:

clip_image025

About Arun

0 Comments:

Post a Comment

Powered by Blogger.