Element: <oj-label-value>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojLabelValue

QuickNav

Attributes

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.



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

Version:
  • 7.1.0
Since:
  • 5.1.0
Module:
  • ojlabelvalue

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojLabelValue} from "ojs/ojlabelvalue";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojlabelvalue";

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.


JET LabelValue

The oj-label-value element is used to group label(s) and value(s) elements into a single layout element that is most commonly a child of oj-form-layout. This component gives some flexibility to what shows up in the label portion and what shows up in the value portion of an oj-form-layout element sequence of laid out elements (most commonly which are label/value pairs). The 'label' and 'value' slots are used to add elements to either the 'label' or 'value' parts of a label/value form layout item.

For example:


<oj-form-layout max-columns='2' label-edge='start' label-width="50%">
  <oj-label-value>
    <my-label slot="label" for="my1"></my-label>
    <my-input slot="value" id="my1"></my-input>
  </oj-label-value>
  <oj-label-value>
    <my-label slot="label" for="my2"></my-label>
  </oj-label-value>
  <oj-label-value>
    <my-input slot="value" id="my2"></my-input>
  </oj-label-value>
</oj-form-layout>

Any slot child elements not in either a 'label' or 'value' slot will be removed from the DOM. This includes the default slot.

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.

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.

label

The label slot is used to specify the 'label' part of a label/value form layout item.

value

The value slot is used to specify the 'value' part of a label/value form layout item.

Attributes

colspan :number

Specifies how many columns this label/value pair will occupy in the parent oj-form-layout.

This attribute only has an effect if the parent oj-form-layout has direction="row".

If there are fewer columns left in the current row than the colspan value specified, then the remaining available columns will be used.

By default, the label portion will occupy the same location and width as the label portion of any other label-value pairs, and the value portion will extend over the remaining columns. The default location and width can be changed with the label-edge and label-width attributes on the oj-label-value, respectively.

If a percentage is specified for label-width, it is relative to all columns the element occupy. For example, if colspan is 2 and label-width is set to 50%, the label portion will occupy 1 column, and the value portion will occupy 1 column.

Default Value:
  • 1
Since:
  • 6.2.0
Names
Item Name
Property colspan
Property change event colspanChanged
Property change listener attribute (must be of type function) on-colspan-changed

label-edge :"start"|"top"|"inherit"

Specifies how the label is aligned with its value component.

If the value is 'inherit', it will inherit label-edge from its closest custom element ancestor element. If the ancestor doesn't have a label-width attribute, the default is "top".

Supported Values:
Value Description
"inherit" Label will inherit label-edge from its closest custom element ancestor element.
"start" Label is inline with the start of its value component
"top" Label is on top of its value component
Default Value:
  • "inherit"
Names
Item Name
Property labelEdge
Property change event labelEdgeChanged
Property change listener attribute (must be of type function) on-label-edge-changed

label-width :string

Specifies the label width.

This can be any legal CSS width or 'inherit', which will inherit label-width from its closest custom element ancestor element. If the value is "inherit" and ancestor doesn't have a label-width attribute, the default is "33%".

Default Value:
  • "inherit"
Names
Item Name
Property labelWidth
Property change event labelWidthChanged
Property change listener attribute (must be of type function) on-label-width-changed

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
*

refresh() → {void}

Refreshes the visual state of the component.
Returns:
Type
void

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 [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.
Returns:
Type
void