Element: <oj-c-train>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Since:
  • 21.0.0
Module:
  • train

Note: This component supersedes the following component: <oj-train>. Migration info available at preceding link.

QuickNav

Attributes

Events

Methods

Type Definitions

Documentation-only Types

Other Topics


JET Train

The JET Train element is a navigation visual that allows a user to go between different "steps". Each step can display information about the state of the step("visited", "unvisited", "disabled") and display a message type("error", "confirmation", "warning", "info", "fatal")

<oj-c-train
  selected-step="{{currentStepValue}}"
  visited="{{visitedStepIds}}"
  steps="[[stepArray]]">
</oj-c-train>

Touch End User Information

Key Action
Tab Move focus to the next selectable step.
Shift+Tab Move focus to the previous selectable step.
Enter Select the focused step.

Keyboard End User Information

Key Action
Tab Move focus to the next selectable step.
Shift+Tab Move focus to the previous selectable step.
Enter Select the focused step.

Accessibility

Disabled content: JET supports an accessible luminosity contrast ratio, as specified in WCAG 2.0 - Section 1.4.3 "Contrast", in the themes that are accessible. (See the "Theming" chapter of the JET Developer Guide for more information on which themes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user interface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio required of enabled content, it cannot be used to convey meaningful information.


Usage

Signature:

interface CTrainElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CTrainElement } from "oj-c/train";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/train";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Attributes

selected-step* :string

Id of the currently selected step.
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-c.Train.Step>

Array of step definitions.
Default Value:
  • []
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

visited :Array<string>

The ids of the visited steps.
Default Value:
  • '[]'
Supports writeback:
  • true
Names
Item Name
Property visited
Property change event visitedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-visited-changed

width :(number|string)

Specifies the component style width.
Names
Item Name
Property width
Property change event widthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-width-changed

Events

ojBeforeSelect

Note: The event detail contains the following properties: oj-c.Train.TrainSelectDetail

Triggered before a step is selected. Reject the returned promise to cancel selection.

See Events and Listeners for additional information.

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties object An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
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.
Returns:
Type
void

Type Definitions

Documentation-only Types

Note: Type definitions in this section have been provided for documentation purposes and cannot be imported into application code.

Step

Properties:
Name Type Argument Description
disabled boolean <optional>
 Determines if the step is disabled.
id string Unique step id.
label string Step Label.
messageType "error" | "confirmation" | "info" | "warning" | "fatal" <optional>
 Step message type

TrainSelectDetail

Payload for selection changes, containing the step id being selected.
Properties:
Name Type Description
accept (acceptPromise:Promise<void>) => void This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.
id string