Element: <oj-train>

Styling Classes

.oj-train-stretch

Optional class that may be added to the train div which will stretch the train to cover the full width of the container specified.

Example

<oj-train selected-step="{{currentStepValue}}" steps="{{stepArray}}" class="oj-train-stretch">
</oj-train>

CSS Variables

See JET CSS Variables for additional details.

Name	Type	Description
--oj-train-step-width	<length>	Train step width
--oj-train-step-border-radius	<length> | <percentage>	Train step border radius
--oj-train-padding	<length>	Train padding
--oj-train-label-font-size	<length>	Train label font size
--oj-train-label-font-weight	<font_weight>	Train label font weight
--oj-train-label-padding-top	<length>	Train label padding top
--oj-train-button-diameter	<length>	Train button diameter
--oj-train-button-font-size	<length>	Train button font size
--oj-train-connector-height	<length>	Train connector height
--oj-train-connector-padding	<length>	Train connector padding

Default

Name	Type	Description
--oj-train-button-bg-color	<color>	Default train button background color
--oj-train-button-border-color	<color>	Default train button border color
--oj-train-button-text-color	<color>	Default train button text color
--oj-train-label-color	<color>	Default label color
--oj-train-connector-color	<color>	Default train connector color

Visited

Name	Type	Description
--oj-train-button-bg-color-visited	<color>	Train button background color when visited
--oj-train-button-border-color-visited	<color>	Train button border color when visited
--oj-train-button-text-color-visited	<color>	Train button text color when visited
--oj-train-label-color-visited	<color>	Train label color when visited

Hovered

Name	Type	Description
--oj-train-button-bg-color-hover	<color>	Train button background color when hovered
--oj-train-button-border-color-hover	<color>	Train button border color when hovered
--oj-train-button-text-color-hover	<color>	Train button text color when hovered
--oj-train-step-bg-color-hover	<color>	Train step background color when hovered

Active

Name	Type	Description
--oj-train-button-bg-color-active	<color>	Train button background color when active
--oj-train-button-border-color-active	<color>	Train button border color when active
--oj-train-button-text-color-active	<color>	Train button text color when active
--oj-train-label-font-weight-active	<font_weight>	Train label font weight when active
--oj-train-step-bg-color-active	<color>	Train step background color when active

Selected

Name	Type	Description
--oj-train-button-bg-color-selected	<color>	Train button background color when selected
--oj-train-button-border-color-selected	<color>	Train button border color when selected
--oj-train-button-text-color-selected	<color>	Train button text color when selected
--oj-train-label-font-weight-selected	<font_weight>	Train label font weight when selected
--oj-train-label-color-selected	<color>	Train label color when selected
--oj-train-connector-color-selected	<color>	Train connector color when selected
--oj-train-connector-padding-selected	<length>	Train connector padding when selected

Disabled

Name	Type	Description
--oj-train-button-bg-color-disabled	<color>	Train button background color when disabled
--oj-train-button-border-color-disabled	<color>	Train button border color when disabled
--oj-train-button-text-color-disabled	<color>	Train button text color when disabled
--oj-train-button-opacity-disabled	<number> | <percentage>	Train button opacity when disabled
--oj-train-label-color-disabled	<color>	Train label color when disabled

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

Deprecated:

Since	Description
13.0.0	This web component no longer supports launching a context menu.

Attributes

selected-step :string

Indicates the id of the current selected step. Default is the first step in the steps array.

Supports writeback:

• true

Names

Item	Name
Property	selectedStep
Property change event	selectedStepChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.)	on-selected-step-changed

steps :Array.<oj.ojTrain.Step>

The array of step objects. Each oj.ojTrain.Step must have an 'id' and 'label' property.

Names

Item	Name
Property	steps
Property change event	stepsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.)	on-steps-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names

Item	Name
Property	translations
Property change event	translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.)	on-translations-changed

(nullable) translations.step-current :string

Description for the current train step status.

See the translations attribute for usage examples.

Default Value:

• "Current"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepCurrent

(nullable) translations.step-disabled :string

Description for the disabled train step status.

See the translations attribute for usage examples.

Default Value:

• "Disabled"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepDisabled

(nullable) translations.step-info :string

General description for a train step. The text may contain tokens '{index}' and '{count}', which will be replaced by the corresponding train step values.

See the translations attribute for usage examples.

Default Value:

• "Step {index} out of {count}."

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepInfo

(nullable) translations.step-message-confirmation :string

Description for the train step message type Confirmation.

See the translations attribute for usage examples.

Default Value:

• "Confirmed"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepMessageConfirmation

(nullable) translations.step-message-error :string

Description for the train step message type Error.

See the translations attribute for usage examples.

Default Value:

• "Error"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepMessageError

(nullable) translations.step-message-info :string

Description for the train step message type Info.

See the translations attribute for usage examples.

Default Value:

• "Info"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepMessageInfo

(nullable) translations.step-message-type :string

Description for the train step message type. The actual value is passed in the '{messageType}' token.

See the translations attribute for usage examples.

Default Value:

• "Message type: {messageType}."

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepMessageType

(nullable) translations.step-message-warning :string

Description for the train step message type Warning.

See the translations attribute for usage examples.

Default Value:

• "Warning"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepMessageWarning

(nullable) translations.step-not-visited :string

Description for the non-visited train step status.

See the translations attribute for usage examples.

Default Value:

• "Not visited"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepNotVisited

(nullable) translations.step-status :string

Description for the train step status. The actual status value is passed in the '{status}' token.

See the translations attribute for usage examples.

Default Value:

• "Status: {status}."

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepStatus

(nullable) translations.step-visited :string

Description for the visited train step status.

See the translations attribute for usage examples.

Default Value:

• "Visited"

Since:

• 14.0.0

Names

Item	Name
Property	translations.stepVisited

Events

ojBeforeDeselect

Triggered immediately before a step is deselected. The ojBeforeDeselect can be cancelled by calling event.preventDefault().

Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name	Type	Description
fromStep	oj.ojTrain.Step	The step that is about to be deselected.
toStep	oj.ojTrain.Step	The step that is about to be selected.

ojBeforeSelect

Triggered immediately before a step is selected. The ojBeforeSelect can be cancelled by calling event.preventDefault().

Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name	Type	Description
fromStep	oj.ojTrain.Step	The step that is about to be deselected.
toStep	oj.ojTrain.Step	The step that is about to be selected.

ojDeselect

Triggered after a step has been deselected. The ojDeselect can be cancelled by calling event.preventDefault().

Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name	Type	Description
fromStep	oj.ojTrain.Step	The step that is deselected.
toStep	oj.ojTrain.Step	The step that is selected.

ojSelect

Triggered after a step has been selected.

Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name	Type	Description
fromStep	oj.ojTrain.Step	The step that is deselected.
toStep	oj.ojTrain.Step	The step that is selected.

Methods

getNextSelectableStep : {string|null}

Returns the id of the next selectable step based on the current selectedStep. If the current step is the last selectable step, the function returns null

Returns:

next selectable Id

Type

string | null

getPreviousSelectableStep : {string|null}

Returns the id of the previous selectable step based on the current selectedStep. If the current step is the first selectable step, the function returns null

Returns:

previous selectable Id

Type

string | null

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.

Parameters:

Name	Type	Description
property	string	The property name to get. Supports dot notation for subproperty access.

Since:

• 4.0.0

Returns:

Type

any

Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

getStep(id) : {(oj.ojTrain.Step|null)}

Returns the step based on the id passed in. If the step doesn't exist, return null.

Parameters:

Name	Type	Description
id	string	The id of the step.

Returns:

step object.

Type

(oj.ojTrain.Step|null)

refresh : {void}

Refreshes the train.

This method does not accept any arguments.

Returns:

Type

void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.

Parameters:

Name	Type	Description
properties	Object	An object containing the property and value pairs to set.

Since:

• 4.0.0

Returns:

Type

void

Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.

Parameters:

Name	Type	Description
property	string	The property name to set. Supports dot notation for subproperty access.
value	any	The new value to set the property to.

Since:

• 4.0.0

Returns:

Type

void

Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

updateStep(id, stepProperties) : {void}

Update the step with the specified id with the provided property bag.

Parameters:

Name	Type	Description
id	string	The id of the step to update
stepProperties	Object	The set of step properties to update. Will overwrite any previously set values. Properties Name Type Argument Description id string <optional> id of step label string <optional> label of step disabled boolean <optional> whether step is disabled visited boolean <optional> whether step has been visited messageType "info" | "error" | "fatal" | "warning" | "confirmation" | null <optional> type of message displayed, null resets to default step without message

Returns:

Type

void

Type Definitions

Step

Object type that specifies the styling, messaging, and behavior for the Train step.

Properties:

Name	Type	Argument	Description
disabled	boolean	<optional>	Specifies whether the step is disabled
id	string		The id of the step
label	string		The label of the step
messageType	"info" | "error" | "fatal" | "warning" | "confirmation" | null	<optional>	Specifies the type of message icon displayed on the step. A null value removes the message icon.
visited	boolean	<optional>	Specifies whether the step has been visited