Saturday, December 18, 2010

Working with roadmap UI element

The objective of this document is to learn how to work with Roadmap UI element in Web Dynpro ABAP.

The development includes four views namely main, first, second, and third. Main view consists of Roadmap UI element with three steps, View container and two buttons to navigate to next and previous views. Remaining three views consists of simple text view to display welcome text to that view.

By clicking on the buttons (Next/Prev) or on individual roadmap step, navigates to the corresponding view and highlights the corresponding roadmap step.

Procedure

Go to transaction code SE80.

The object Navigator opens, where select object type as Web Dynpro Comp./Intf. And enter the name of the component as ZDEMO_ROADMAP as shown below screen.

Press enter. The following pop up Create Object appears for confirmation.


Click Yes.

Enter the Description in the following pop up displayed and press enter.

The component will be created with default window name and following tree structure.

Create a view.

Right click on the component name ZDEMO_ROADMAP->Create->View, as shown below.

Enter Name and Description in the following Create View pop up displayed and press enter.

Click on save button on application toolbar. Then the created view is shown in tree hierarchy as below.

Double click on it.


Create context.

Click on context tab of view on right side window. And right click on context->Create->Node, as shown below.


Enter the properties of node as shown below.



Create Attribute.

Right click on node created Roadmap->Create->Attribute.


Enter the properties of Attribute as shown below.


Design view layout.

The view should consists of Roadmap, Viewcontainer and two buttons.

Click layout tab. Default it has RootUIelementcontainer. Right click on it and select Insert Element.


Enter the Name and Type as shown below.


Bind the property ‘Selected’ of Roadmap with the context attribute ‘Step’ as shown below.


Right click on Roadmap element and select Insert Step.


Enter the name and Type as below.

Enter the Description for step as First View.


Repeat the same to create other two steps as below.

For second step.

The following for third step.

Then Insert Viewcontainer into the view.



Enter Name and Type as shown below.



Then insert two buttons for Next and Previous navigation.

Enter Name and Type as below.


Enter properties of button as below:

Text: Next ; Tooltip: Next

And click on create of Event onAction

The following popup appears for Create action, where in type Action and Description as shown and press enter.

The event handler will be generated. We will see the implementation of event handler later.



Insert button for Prev.

Enter the properties Text and Tooltip. And create event OnAction.

The event handler will be generated. We will see the implementation of event handler later.


Finally view layout looks as below.

Create three Outbound plugs for navigation to corresponding view from main view.


Click on Outbound tab of main view and enter the following three entries for three views.


Create remaining three views first, second and third as shown below.

Enter the view Name and Description.


Design the view inserting, text view to display simple welcome text.


Enter the Name and Type as textview.



Enter the Text property of text view. The view layout shows as below.

Create Inbound plug for first view.

Click on Inbound Plugs tab of first view. And enter the plug Name and Description as shown below.



Repeat the steps to create second and third view.


Create second view.


Insert text view and enter text property. The second view is shown as below.

Create Inbound plug as shown below.


Create third view.



Insert text view and enter Text property. The third view is shown as below.

Create Inbound plug for third view.

Enter plug name and Description as shown below.


The component tree hierarchy is shown as below. Now need to embed the views into window. Double click on the window name.



The window structure is as shown below on right side.

Either drag and drop the Main view from left side into window structure on left side or right click on window name ZDEMO_ROADMAP->Embed view and select Main View.

Embed the three views first, second and third into view container of main view.

Right click on viewcontainer->Embed view.


In the following popup appeared, press F4 on field ‘View to be Embedded’.


It lists all the existing views. Select the First view as shown below.



Repeat the same to embed the remaining two views: second and third.



All three views embedded as shown below.

Create Navigation link between the plugs.

Right click on the outbound plug TO_FIRST-> Create Navigation Link.


In the following popup displayed, press F4 on field ‘Dest.View’ and select the FIRSTVIEW.

Repeat the same to create navigation links for outbound plug TO_SECOND with SECONDVIEW as shown below.

Repeat the same to create navigation links for outbound plug TO_THIRD with THIRDVIEW as shown below.

Then need to implement the Event handlers for buttons Next and Prev.

Before that create method OnNavigate which fires the relevant plug, based on the import parameter, step name. This method is in turn called in our event handles by passing the step name.

Go to methods tab of main view. Enter the method Name and Description as shown below.

Double click on the method for implementation.

Create an import parameter Target_step for the method as shown.

Write the following code.

Implement Event handler for button Next.

Go to methods tab of main view. Double click on event handler OnActionNext.

Write the following code.

Double click on event handler OnActionPrev.

Write the following code.

Initially the first step to be shown selected. So need to implement the view WDDOINIT method.

Double click on the method.


And write the following code.


It is also possible to enable the step and navigate to corresponding view by clicking on the individual step of roadmap. For this we need to create OnSelect event of Roadmap UI element as shown below.


Double click on the event handler OnActionStepSelected for implementation.


Write the following code.


Save and Activate the component.

Create Web Dynpro application.

Right click on component ZDEMO_ROADMAP->Create->Web Dynpro Application.


Enter the Description.

Save and Test the Application.


Test Result:

Default First step is highlighted and first view is embeded.


By clicking on next, highlights the second step and navigated to second view.


Try clicking on Next, Prev buttons and also on individual step.

No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites