Element: <oj-c-form-layout>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 16.0.0
Module:
  • form-layout

QuickNav

Slots

Attributes

Methods


JET FormLayout Component

Description: The oj-c-form-layout component provides a responsive layout capability to lay out child elements in the row or column direction where the number of columns displayed depends on the available width of the container. Child components are responsible for rendering the label with the alignment as specified by the oj-c-form-layout's label-edge property, which the child components consume.

<oj-c-form-layout columns="2">
  <oj-c-input-text label-hint="First Name"></oj-c-input-text>
  <oj-c-input-text label-hint="Last Name"></oj-c-input-text>
  <oj-c-input-text label-hint="address" column-span="2"></oj-c-input-text>
</oj-c-form-layout>


Usage

Signature:

interface CFormLayoutElement

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

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

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.


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.

Default

The default slot is the content of the form layout. The oj-c-form-layout element expects core pack form component children for the default slot.

Attributes

column-span :number

Specifies how many columns this component should span. This only takes effect when this component is a child of a form layout that has direction 'row'.
Default Value:
  • 1
Names
Item Name
Property columnSpan
Property change event columnSpanChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-column-span-changed

columns :number

Specifies the absolute number of columns and overrides maxColumns, if the value is positive. If the value is not positive, then this attribute is ignored and max-columns is used to determine the number of columns. This attribute should only be used in special circumstances where you need a specific number of columns even if the fields will be narrower than the suggested minimum (a nested form layout is an example).
Default Value:
  • 0
Names
Item Name
Property columns
Property change event columnsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-columns-changed

direction :"column"|"row"

Specifies if the child elements should be laid out column first or row first.
Supported Values:
Value Description
column Components are laid out in columns.
row Components are laid out in rows.
Default Value:
  • "row"
Names
Item Name
Property direction
Property change event directionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-direction-changed

full-width :boolean

Indicates if the form layout will use 100% of the container's width, and will ignore the theme's max column width.
Default Value:
  • false
Names
Item Name
Property fullWidth
Property change event fullWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-full-width-changed

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

Specifies how the child form components should position their labels.

If the property value is not set either directly on the component or inherited from a parent form layout, then the property is treated as if its value were 'inside'.

When using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components. This is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.

Supported Values:
Value Description
inside The label floats over the input element, but moves up on focus or when the component has a value (default, if unspecified).
start The label will be placed before the start of the component.
top The label will be placed on top of the component.
Names
Item Name
Property labelEdge
Property change event labelEdgeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-edge-changed

label-start-width :(number|string)

The width of the label when labelEdge is 'start'.

This attribute accepts values of type 0 | `--${string}` | `${number}%` | `${number}x` | `calc(${string})`

If the property value is not set either directly on the component or inherited from a parent form layout, then the property is treated as if its value were '33%'.

When using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components. This is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.

Names
Item Name
Property labelStartWidth
Property change event labelStartWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-start-width-changed

label-wrapping :"truncate"|"wrap"

Should the labels wrap or truncate when there is not enough available space.

If the property value is not set either directly on the component or inherited from a parent form layout, then the property is treated as if its value were 'wrap'.

When using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components. This is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.

Supported Values:
Value Description
truncate Label will truncate if needed.
wrap Label will wrap if needed.
Names
Item Name
Property labelWrapping
Property change event labelWrappingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-wrapping-changed

max-columns :number

Specifies how many columns should be displayed. This property is used when the actual number of columns rendered is responsive and depends on the container's available width. Note that maxColumns will be ignored if columns has a positive value.
Default Value:
  • 1
Names
Item Name
Property maxColumns
Property change event maxColumnsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-columns-changed

readonly :boolean

Whether the child components should be rendered as readonly.

If the property value is not set either directly on the component or inherited from a parent form layout, then the property is treated as if its value were 'false'.

When using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components. This is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.

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

user-assistance-density :"reflow"|"efficient"|"compact"

Specifies the density of the children form component's user assistance presentation. It can be shown inline with reserved rows to prevent reflow if a user assistance text shows up, inline without reserved rows that would reflow if a user assistance text shows up, or it can be shown compactly in a popup instead.

If the property value is not set either directly on the component or inherited from a parent form layout, then the property is treated as if its value were "efficient".

When using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components. This is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.

Supported Values:
Value Description
compact Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required.
efficient Messages, help, hints, and required are all shown inline under the field with reserved space.
reflow Messages, help, hints, and required are all shown inline under the field with no reserved space.
Names
Item Name
Property userAssistanceDensity
Property change event userAssistanceDensityChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-user-assistance-density-changed

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property 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 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 The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void