RoadMap

Introduction RoadMap and RoadMapStep

The RoadMap control and its sub-control RoadMapStep are used to display step by step workflows. They support displaying steps of a clearly defined work process. One or more steps in a roadmap can be designed using animation. The RoadMap supports nesting that means that a RoadMapStep can contain sub-steps. From the visual perspective, the RoadMapStep is expanded to show its internal sub-steps once the user has clicked on it. The numbering for the steps is done automatically by the framework, depending on the order in which the steps have been added to the RoadMap (using the addStep(RoadMapStep) method); or to a RoadMapStep using method addSubStep(RoadMapStep). For the steps and sub-steps, a Label control can be set. For the notification about step selections, stepSelected(stepID) which is a public event is available.

Example

In this RoadMap example, three RoadMapSteps are visible at application start, an arrow leads to the fourth step. Step three has two sub-steps.



Keyboard Support

It is possible to navigate between the Roadmap steps using the arrow left/arrow down and arrow right/arrow up keys step by step. Pos1 and End let you directly jump to the first/last step. Space and Enter support selecting and expanding the currently focused step.

ARIA Support

The Roadmap control implements the ARIA group role. The RoadmapSteps implement the ARIA role treeitem.

API Documentation

See API documentation