LuCI.ui. AbstractElement

The AbstractElement class serves as abstract base for the different widgets implemented by LuCI.ui. It provides the common logic for getting and setting values, for checking the validity state and for wiring up required events.

UI widget instances are usually not supposed to be created by view code directly, instead they're implicitly created by LuCI.form when instantiating CBI forms.

This class is automatically instantiated as part of LuCI.ui. To use it in views, use 'require ui' and refer to ui.AbstractElement. To import it in external JavaScript, use L.require("ui").then(...) and access the AbstractElement property of the class instance value.

Source

Methods

getValidationError() → {string}

Returns the current validation error

Returns:

The validation error at this time

Type: 
string

getValue() → {string|Array.<string>|null}

Read the current value of the input widget.

Source
Returns:

The current value of the input element. For simple inputs like text fields or selects, the return value type will be a - possibly empty - string. Complex widgets such as DynamicList instances may result in an array of strings or null for unset values.

Type: 
string | Array.<string> | null

isChanged() → {boolean}

Check whether the input value was altered by the user.

Returns:

Returns true if the input value has been altered by the user or false if it is unchanged. Note that if the user modifies the initial value and changes it back to the original state, it is still reported as changed.

Type: 
boolean

isValid() → {boolean}

Check whether the current input value is valid.

Returns:

Returns true if the current input value is valid or false if it does not meet the validation constraints.

Type: 
boolean

registerEvents(targetNode, synevent, events)

Dispatch a custom (synthetic) event in response to received events.

Sets up event handlers on the given target DOM node for the given event names that dispatch a custom event of the given type to the widget root DOM node.

The primary purpose of this function is to set up a series of custom uniform standard events such as widget-update, validation-success, validation-failure etc. which are triggered by various different widget specific native DOM events.

Parameters:
NameTypeDescription
targetNodeNode

Specifies the DOM node on which the native event listeners should be registered.

syneventstring

The name of the custom event to dispatch to the widget root DOM node.

eventsArray.<string>

The native DOM events for which event handlers should be registered.

(abstract) render() → {Node}

Render the widget, set up event listeners and return resulting markup.

Returns:

Returns a DOM Node or DocumentFragment containing the rendered widget markup.

Type: 
Node

setChangeEvents(targetNode, …events)

Set up listeners for native DOM events that may change the widget value.

Sets up event handlers on the given target DOM node for the given event names which may cause the input value to change completely, such as change events in a select menu. In contrast to update events, such change events will not trigger input value validation but they may cause field dependencies to get re-evaluated and will mark the input widget as dirty.

Parameters:
NameTypeAttributesDescription
targetNodeNode

Specifies the DOM node on which the event listeners should be registered.

eventsstring<repeatable>

The DOM events for which event handlers should be registered.

setPlaceholder(value)

Set the current placeholder value of the input widget.

Parameters:
NameTypeDescription
valuestring | Array.<string> | null

The placeholder to set for the input element. Only applicable to text inputs, not to radio buttons, selects or similar.

setUpdateEvents(targetNode, …events)

Set up listeners for native DOM events that may update the widget value.

Sets up event handlers on the given target DOM node for the given event names which may cause the input value to update, such as keyup or onclick events. In contrast to change events, such update events will trigger input value validation.

Parameters:
NameTypeAttributesDescription
targetNodeNode

Specifies the DOM node on which the event listeners should be registered.

eventsstring<repeatable>

The DOM events for which event handlers should be registered.

setValue(value)

Set the current value of the input widget.

Parameters:
NameTypeDescription
valuestring | Array.<string> | null

The value to set the input element to. For simple inputs like text fields or selects, the value should be a - possibly empty - string. Complex widgets such as DynamicList instances may accept string array or null values.

triggerValidation() → {boolean}

Force validation of the current input value.

Usually input validation is automatically triggered by various DOM events bound to the input widget. In some cases it is required though to manually trigger validation runs, e.g. when programmatically altering values.

Returns:
Type: 
boolean

Type Definitions

InitOptions

Type:
  • Object
Properties
NameTypeAttributesDefaultDescription
idstring<optional>

Specifies the widget ID to use. It will be used as HTML id attribute on the toplevel widget DOM node.

namestring<optional>

Specifies the widget name which is set as HTML name attribute on the corresponding <input> element.

optionalboolean<optional>
true

Specifies whether the input field allows empty values.

datatypestring<optional>
string

An expression describing the input data validation constraints. It defaults to string which will allow any value. See LuCI.validation for details on the expression format.

validatorfunction | Array.<function()><optional>

Specifies one or more custom validator functions which are invoked after the standard validation constraints are checked. Each function should return true to accept the given input value. When multiple functions are provided as an array, they are executed serially and validation stops at the first function that returns a non-true value. Any non-true return value type is converted to a string and treated as a validation error message.

disabledboolean<optional>
false

Specifies whether the widget should be rendered in disabled state (true) or not (false). Disabled widgets cannot be interacted with and are displayed in a slightly faded style.

Source