Show TOC

RoadMapLocate this document in the navigation structure

Use

The RoadMap UI element displays the steps followed in a wizard. Each step is represented by a separate RoadMapStep object or MultipleRoadMapStep. You can use various symbols to mark the start points and the end points of this UI element. If you assign the value more to the startPointDesign or endPointDesign property, this indicates to the user that there are other steps before the first visible step or after the last visible step.

The RoadMap UI element is used to display step by step workflows. This enables an application development team to display small steps of a clearly defined work process.

Example of the Visual Display

RoadMap Scrolling

RoadMaps have two scrolling possibilities:

  • Case 1: No action handler is defined for RoadMap.OnLoadSteps
    • If endPointDesign=startPointDesign=standard, the size of the RoadMap adapts according to the width of the browser window. Scrolling takes place automatically for a client without a round trip. The design of the start- and end points adapts automatically.

      If the width of the browser window is not sufficient to display the whole RoadMap, the RoadMap is truncated, and if there are further steps to the left and/or to the right, this is indicated. If the application places the lead selection on a RoadMapStep that lies outside the displayed segment of the RoadMap, the segment shifts position automatically to make the RoadMapStep visible.

      Note

      If the user has moved the visible segment again by clicking the start or end point, the segment no longer shifts position automatically when scrolling on the server-side.

    • If other designs were chosen for the start and end points, the corresponding design is displayed and no client-side scrolling takes place.
  • Case 2: An action handler is defined for RoadMap.OnLoadSteps
    • If endPointDesign=more, the Web Dynpro action is triggered when you click on the end point and the application has to deal with the scrolling.
    • For other designs no action is triggered when you click on it.

    This also applies for the start point.

Implementation Details

Note

To enable the development of accessible applications, the accessibilityDescription property is checked during the syntax check if the tooltip property is not set.

 

Runtime Class

CL_WD_ROAD_MAP

 

Properties in View Designer

Name Type Initial Value Bindable

id

STRING

(automatic)

No

accessibilityDescription

Translatable text

 

Yes

contextMenuBehaviour

WDUI_CONTEXT_MENU_BEHAVIOUR

inherit

No

contextMenuId

WDY_MD_UI_ELEMENT_REFERENCE

 

No

enabled

WDY_BOOLEAN

true

Yes

endPointDesign

WDUI_ROAD_MAP_EDGE_DESIGN

standard

Yes

selectedStep

STRING

 

Yes

startPointDesign

WDUI_ROAD_MAP_EDGE_DESIGN

standard

Yes

styleClassName STRING Yes

tooltip

Translatable text

 

Yes

visible

WDUI_VISIBILITY

visible

Yes

 

Aggregations in the View Designer

Name Cardinality Type

Step

0..n

RoadMapStep

 

Events in View Designer

Name

onLoadSteps

onSelect

Note

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Dynamic Programming of Properties

View Designer Name Runtime Name Type

accessibilityDescription

ACCESSIBILITY_DESCR

WDY_MD_TRANSLATABLE_TEXT

contextMenuBehaviour

CONTEXT_MENU_BEHAVIOUR

WDUI_CONTEXT_MENU_BEHAVIOUR

 contextMenuBehaviour: inherit

CL_WD_ROAD_MAP=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT

 contextMenuBehaviour: provide

CL_WD_ROAD_MAP=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE

 contextMenuBehaviour: suppress

CL_WD_ROAD_MAP=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS

contextMenuId

CONTEXT_MENU_ID

WDY_MD_UI_ELEMENT_REFERENCE

enabled

ENABLED

WDY_BOOLEAN

endPointDesign

END_POINT_DESIGN

WDUI_ROAD_MAP_EDGE_DESIGN

 endPointDesign: disabled

CL_WD_ROAD_MAP=>E_END_POINT_DESIGN-DISABLED

 endPointDesign: more

CL_WD_ROAD_MAP=>E_END_POINT_DESIGN-MORE

 endPointDesign: moreDisabled

CL_WD_ROAD_MAP=>E_END_POINT_DESIGN-MORE_DISABLED

 endPointDesign: selected

CL_WD_ROAD_MAP=>E_END_POINT_DESIGN-SELECTED

 endPointDesign: standard

CL_WD_ROAD_MAP=>E_END_POINT_DESIGN-STANDARD

selectedStep

SELECTED_STEP

STRING

startPointDesign

START_POINT_DESIGN

WDUI_ROAD_MAP_EDGE_DESIGN

 startPointDesign: disabled

CL_WD_ROAD_MAP=>E_START_POINT_DESIGN-DISABLED

 startPointDesign: more

CL_WD_ROAD_MAP=>E_START_POINT_DESIGN-MORE

 startPointDesign: moreDisabled

CL_WD_ROAD_MAP=>E_START_POINT_DESIGN-MORE_DISABLED

 startPointDesign: selected

CL_WD_ROAD_MAP=>E_START_POINT_DESIGN-SELECTED

 startPointDesign: standard

CL_WD_ROAD_MAP=>E_START_POINT_DESIGN-STANDARD

styleClassName STYLE_CLASS_NAME STRING

tooltip

TOOLTIP

WDY_MD_TRANSLATABLE_TEXT

visible

VISIBLE

WDUI_VISIBILITY

visible: none

CL_WD_ROAD_MAP=>E_VISIBLE-NONE

visible: visible

CL_WD_ROAD_MAP=>E_VISIBLE-VISIBLE

 

Dynamic Programming of Events

View Designer Name Runtime Name

onLoadSteps

ON_LOAD_STEPS

onSelect

ON_SELECT

 

Dynamic Programming of Aggregations

View Designer Name Runtime Name Cardinality

Step

STEPS

0..n

Example

You can find examples of this interface element in the system in the WDR_TEST_UI_ELEMENTS Web Dynpro application and in the WDR_TEST_EVENTS component in the ROADMAP view. You can find a simple example in the system in the DEMO_ROADMAP Web Dynpro application.