WebDynpro for ABAP - Working with Roadmap UI element

By Visalini, TCS

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. 


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.

Click here to continue....

Please send us your feedback/suggestions at webmaster@SAPTechnical.COM 

HomeContribute About Us Privacy Terms Of Use • Disclaimer • SafeCompanies: Advertise on SAPTechnical.COM | Post JobContact Us  

Graphic Design by Round the Bend Wizards

footer image footer image