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. 

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.

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. 

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