Element: <oj-switcher>

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

Attributes

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 4.2.0
Since:
  • 4.0.0

JET Custom Elements

JET components are implemented as custom HTML elements. A detailed description of working with these elements can be found in: JET Custom Element Usage.

The switcher element dynamically decides which child element should be made visible. It will make a child element visible only if it's slot attribute's value matches with switcher's value property.

<oj-switcher value="[[selectedValue]]">
 <div slot="home">...<div>
 <div slot="about">...<div>
 <div slot="settings">...<div>
 ...
</oj-switcher>

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

value :string

value of the switcher. Setting value will make all child elements with matching slot attribute as visible and hides elements which are not matching.
Default Value:
  • undefined
Names
Item Name
Property value
Property change event valueChanged
Property change listener attribute (must be of type function) on-value-changed
Examples

Initialize the Switcher with the value attribute specified:

 <oj-switcher value='settings'> ... </oj-switcher>

Read value property:

var selectedValue = mySwitcher.value;

Change value property:

mySwitcher.value = 'settings';

Methods

getProperty(property) → {*}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
*
Example

Get a single subproperty of a complex property:

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

refresh()

Refreshes the visual state of the component.

setProperties(properties)

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

Set a batch of properties:

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

setProperty(property, value)

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value * The new value to set the property to.
Example

Set a single subproperty of a complex property:

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