RoadMap  

Definition

The RoadMap UI element displays the steps in a wizard. You can insert single RoadMapSteps or MultipleRoadMapSteps that are bound to a data source. You can tag the starting point and endpoint of this UI element using different symbols, which are defined by enumeration type WDRoadMapEdgeDesign. Assigning the value more to the property startPointDesign or endPointDesign indicates to the user that there are other steps before the first visible step, or after the last visible step.

Use

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

Description of UI Element Properties

●      accessibilityDescription

When accessibility is activated, the assigned text is added to the tooltip. This description provides semantic details of the UI element and is only read by the screen reader if the user focuses the complete Ul element.

●      endPointDesign

Specifies the design of the last step of the RoadMap element.

The endPointDesign property can take the following values and is represented by the enumeration type WDRoadMapEdgeDesign.

disabled		No event can be triggered with this value when selecting the end point. Therefore, the end point is displayed as not activated.
more		Indicates that there are more steps still to come in the process.
moreDisabled		No event can be triggered with this value when selecting the end point. Therefore, the end point is displayed as not activated However, this value indicates that there are more preceding steps.
selected		You can highlight the end point in a different color (that is, as if it were selected) – for example, to show that there is an informative text attached to it.
standard		The default display for the end point of a RoadMap UI element.

●      selectedStep

Specifies the ID of the selected step. The application developer has to set the value of this property.

●      startPointDesign

Specifies the design of the first step of the RoadMap UI element.

The startPointDesign property can take the following values and is represented by enumeration type WDRoadMapEdgeDesign.

disabled		No event can be triggered with this value when selecting the starting point. Therefore, the starting point is displayed as not activated.
more		Indicates that more steps preceded this step.
moreDisabled		No event can be triggered with this value when selecting the starting point. Therefore, the starting point is displayed as not activated However, this value indicates that there are more preceding steps.
selected		You can highlight the end point in a different color – that is as if it were selected), to show that there is an informative text attached to it.
standard		The default display for the starting point of a RoadMap UI element.

Properties Overview

Name	Interface	Type	Initial Value	Bindable
accessibilityDescription	IWDRoadMap	String (Translatable Text)		bindable
enabled	IWDUIElement	Boolean	true	bindable
endPointDesign	IWDRoadMap	WDRoadMapEdgeDesign		bindable
selectedStep	IWDRoadMap	String		bindable
startPointDesign	IWDRoadMap	WDRoadMapEdgeDesign		bindable
tooltip	IWDUIElement	String (TranslatableText)		bindable
visible	IWDUIElement	WDVisibility	visible	bindable

Events

●      onLoadSteps (boolean atEnd)

Describes the action that is executed when the RoadMap contains more steps than are displayed and the user selects the icon for more steps. The parameter atEnd specifies whether the RoadMap contains more steps at the end or at the beginning.

●      onSelect (String step)

This event is triggered if the user selects a RoadMapStep.

The event parameter of type String corresponds to the ID of the selected step. If you use MultipleRoadMapStep, you can retrieve the ID of a single step using the common event parameter nodeElement.

If you have a RoadMap containing RoadMapSteps and MultipleRoadMapSteps, you can set the selectedStep using this code:

if (nodeElement!=null) wdContext.nodeMultipleStep().setLeadSelection(nodeElement.index());    wdContext.currentContextElement().setStepSelected(selectedStep);