Element: <oj-form-layout>

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.1.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.

JET FormLayout

The oj-form-layout element is used to group custom element children in an organized layout that can be optimized for multiple display sizes. Legal child components are: oj-checkboxset, oj-color-palette oj-color-spectrum, oj-input-date, oj-input-date-time, oj-input-time, oj-input-number, oj-input-text, oj-text-area, oj-input-password, oj-combobox-one, oj-combobox-many, oj-radioset, oj-select-one, oj-select-many, oj-slider, oj-switch

For example:


<oj-form-layout max-columns='2' label-edge='start' label-width="50%">
  <oj-input-text id="inputcontrol" required value="text" label-hint="input 1"></oj-input-text>
  <oj-text-area id="textareacontrol" value='text' rows="6" label-hint="textarea"></oj-text-area>
  <oj-input-text id="inputcontrol2" value="text" label-hint="input 2"></oj-input-text>
  <oj-input-text id="inputcontrol3" value="text" label-hint="input 3 longer label"></oj-input-text>
</oj-form-layout> 

The oj-form-layout element currently suuports custom element children that support the label-hint and help-hints attributes (oj-input-text, oj-text-area, etc.). For each custom element child with label-hint, FormLayout will generate an oj-label element and pair them together in the layout.

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

label-edge :string

Specifies how the label is aligned with its editable value component.
Supported Values:
Name Type Description
"start" string Label is inline with the start of its editable value component
"top" string Label is on top of its editable value component
Default Value:
  • "top"
Names
Item Name
Property labelEdge
Property change event labelEdgeChanged
Property change listener attribute (must be of type function) on-label-edge-changed
Examples

Initialize the oj-form-layout with the label-edge attribute specified:

<oj-form-layout label-edge="top">
  <oj-input-text id="inputcontrol" required value="text" label-hint="input 1"></oj-input-text>
  <oj-text-area id="textareacontrol" value='text' rows="6" label-hint="textarea"></oj-text-area>
</oj-form-layout>

Get or set the labelEdge property after initialization:

// getter
var edge = myFormLayout.labelEdge;

// setter
myFormLayout.labelEdge = 'start';

label-width :string

Specifies the label width.

This specifies the width of the oj-label elements. This can be any legal CSS width.

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

Initialize the oj-form-layout with the label-width attribute specified:

<oj-form-layout label-width="50%">
  <oj-input-text id="inputcontrol" required value="text" label-hint="input 1"></oj-input-text>
  <oj-text-area id="textareacontrol" value='text' rows="6" label-hint="textarea"></oj-text-area>
</oj-form-layout>

Get or set the labelWidth property after initialization:

// getter
var width = myFormLayout.labelWidth;

// setter
myFormLayout.labelWidth = '60px';

max-columns :number

Specifies the maximum number of columns.
Default Value:
  • 1
Names
Item Name
Property maxColumns
Property change event maxColumnsChanged
Property change listener attribute (must be of type function) on-max-columns-changed
Examples

Initialize the oj-form-layout with the max-columns attribute specified:

<oj-form-layout max-columns="2">
  <oj-input-text id="inputcontrol" required value="text" label-hint="input 1"></oj-input-text>
  <oj-text-area id="textareacontrol" value='text' rows="6" label-hint="textarea"></oj-text-area>
</oj-form-layout>

Get or set the maxColumns property after initialization:

// getter
var maxCol = myFormLayout.maxColumns;

// setter
myFormLayout.maxColumns = 2;

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");