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.
- Default Value:
"row"
Supported Values:
Value Description column
Components are laid out in columns. row
Components are laid out in rows. 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