Expand all

OO.ui.FieldLayout

Extends

Constructor

new OO.ui.FieldLayout(fieldWidget, [config]) #

FieldLayouts are used with OO.ui.FieldsetLayout. Each FieldLayout requires a field-widget, which is a widget that is specified by reference before any optional configuration settings.

Field layouts can be configured with help text and/or labels. Labels are aligned in one of four ways:

  • left: The label is placed before the field-widget and aligned with the left margin. A left-alignment is used for forms with many fields.
  • right: The label is placed before the field-widget and aligned to the right margin. A right-alignment is used for long but familiar forms which users tab through, verifying the current field with a quick glance at the label.
  • top: The label is placed above the field-widget. A top-alignment is used for brief forms that users fill out from top to bottom.
  • inline: The label is placed after the field-widget and aligned to the left. An inline-alignment is best used with checkboxes or radio buttons.

Help text can either be:

  • accessed via a help icon that appears in the upper right corner of the rendered field layout, or
  • shown as a subtle explanation below the label.

If the help text is brief, or is essential to always expose it, set helpInline to true. If it is long or not essential, leave helpInline to its default, false.

Please see the OOUI documentation on MediaWiki for examples and more information.

Parameters:

Name Type Attributes Description
fieldWidget OO.ui.Widget

Field widget
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
align string optional
 'left'

Alignment of the label: 'left', 'right', 'top' or 'inline'
errors Array optional

Error messages about the widget, which will be displayed below the widget.
warnings Array optional

Warning messages about the widget, which will be displayed below the widget.
successMessages Array optional

Success messages on user interactions with the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
notices Array optional

Notices about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances. These are more visible than help messages when helpInline is set, and so might be good for transient messages.
help string | OO.ui.HtmlSnippet optional

Help text. When help text is specified and helpInline is false, a "help" icon will appear in the upper-right corner of the rendered field; clicking it will display the text in a popup. If helpInline is true, then a subtle description will be shown after the label.
helpInline boolean optional
 false

Whether or not the help should be inline, or shown when the "help" icon is clicked.
$overlay jQuery optional

Passed to OO.ui.PopupButtonWidget for help popup, if help is given. See https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays.

Properties:

Name Type Description
fieldWidget OO.ui.Widget
Mixes in:
Source:

Throws:

An error is thrown if no widget is specified

Type
Error
FieldLayouts are used with OO.ui.FieldsetLayout.

Properties

label #

The label text. The label can be specified as a plaintext string, a function that will produce a string (will be resolved on construction time), or null for no label. The static value will be overridden if a label is specified with the #label config option.

Properties:

Type Description
string | function | null
Mixes in:
Source:
The label text.

title #

The title text, a function that returns text, or null for no title. The value of the static property is overridden if the #title config option is used.

If the element has a default title (e.g. <input type=file>), null will allow that title to be shown. Use empty string to suppress it.

Properties:

Type Description
string | function | null
Mixes in:
Source:
The title text, a function that returns text, or null for no title.

Methods

formatTitleWithAccessKey(title) → {string}protected #

Include information about the widget's accessKey in our title. TitledElement calls this method. (This is a bit of a hack.)

Parameters:

Name Type Description
title string

Tooltip label for 'title' attribute
Source:

Returns:

Type
string
Include information about the widget's accessKey in our title.

getClosestScrollableElementContainer() → {HTMLElement} #

Get closest scrollable container.

Inherited from:
Source:

Returns:

Closest scrollable container

Type
HTMLElement
Get closest scrollable container.

getData() → {any} #

Get element data.

Inherited from:
Source:

Returns:

Element data

Type
any
Get element data.

getElementDocument() → {HTMLDocument} #

Get the DOM document.

Inherited from:
Source:

Returns:

Document object

Type
HTMLDocument
Get the DOM document.

getElementGroup() → {OO.ui.mixin.GroupElement|null} #

Get group element is in.

Inherited from:
Source:

Returns:

Group element, null if none

Type
OO.ui.mixin.GroupElement | null
Get group element is in.

getElementId() → {string} #

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

Inherited from:
Source:

Returns:

Type
string

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

getElementWindow() → {Window} #

Get the DOM window.

Inherited from:
Source:

Returns:

Window object

Type
Window
Get the DOM window.

getField() → {OO.ui.Widget} #

Get the widget contained by the field.

Source:

Returns:

Field widget

Type
OO.ui.Widget
Get the widget contained by the field.

getTagName() → {string} #

Get the HTML tag name.

Override this method to base the result on instance information.

Inherited from:
Source:

Returns:

HTML tag name

Type
string
Get the HTML tag name.

highlightQuery(text, query, [compare], [combineMarks]) → {jQuery} #

Highlight the first occurrence of the query in the given text

Parameters:

Name Type Attributes Default Description
text string

Text
query string

Query to find
compare function optional

Optional string comparator, e.g. Intl.Collator().compare
combineMarks boolean optional
 false

Pull combining marks into highlighted text
Mixes in:
Source:

Returns:

Text with the first match of the query sub-string wrapped in highlighted span

Type
jQuery
Highlight the first occurrence of the query in the given text

isElementAttached() → {boolean} #

Check if the element is attached to the DOM

Inherited from:
Source:

Returns:

The element is attached to the DOM

Type
boolean
Check if the element is attached to the DOM

isFieldInline() → {boolean} #

Return true if the given field widget can be used with 'inline' alignment (see #setAlignment). Return false if it can't or if this can't be determined.

Source:

Returns:

Type
boolean

Return true if the given field widget can be used with 'inline' alignment (see #setAlignment).

isVisible() → {boolean} #

Check if element is visible.

Inherited from:
Source:

Returns:

element is visible

Type
boolean
Check if element is visible.

makeMessage(kind, text) → {jQuery}protected #

Parameters:

Name Type Description
kind string

'error' or 'notice'
text string | OO.ui.HtmlSnippet
Source:

Returns:

Type
jQuery

onLabelClick(event) #

Handle click events on the field label, or inline help

Parameters:

Name Type Description
event jQuery.Event
Source:
Handle click events on the field label, or inline help

resetScroll() → {OO.ui.Layout}chainable #

Reset scroll offsets

Inherited from:
Source:

Returns:

The layout, for chaining

Type
OO.ui.Layout
Reset scroll offsets

restorePreInfuseState(state)protected #

Restore the pre-infusion dynamic state for this widget.

This method is called after #$element has been inserted into DOM. The parameter is the return value of #gatherPreInfuseState.

Parameters:

Name Type Description
state Object
Inherited from:
Source:
Restore the pre-infusion dynamic state for this widget.

scrollElementIntoView([config]) → {jQuery.Promise} #

Scroll element into view.

Parameters:

Name Type Attributes Description
config Object optional

Configuration options
Inherited from:
Source:

Returns:

Promise which resolves when the scroll is complete

Type
jQuery.Promise
Scroll element into view.

setData(data) → {OO.ui.Element}chainable #

Set element data.

Parameters:

Name Type Description
data any

Element data
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set element data.

setElementGroup(group) → {OO.ui.Element}chainable #

Set group element is in.

Parameters:

Name Type Description
group OO.ui.mixin.GroupElement | null

Group element, null if none
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set group element is in.

setElementId(id) → {OO.ui.Element}chainable #

Set the element has an 'id' attribute.

Parameters:

Name Type Description
id string
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set the element has an 'id' attribute.

setErrors(errors) → {OO.ui.BookletLayout}chainable #

Set the list of error messages.

Parameters:

Name Type Description
errors Array

Error messages about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of error messages.

setNotices(notices) → {OO.ui.BookletLayout}chainable #

Set the list of notice messages.

Parameters:

Name Type Description
notices Array

Notices about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of notice messages.

setSuccess(successMessages) → {OO.ui.BookletLayout}chainable #

Set the list of success messages.

Parameters:

Name Type Description
successMessages Array

Success messages about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of success messages.

setWarnings(warnings) → {OO.ui.BookletLayout}chainable #

Set the list of warning messages.

Parameters:

Name Type Description
warnings Array

Warning messages about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of warning messages.

supports(methods) → {boolean} #

Check if element supports one or more methods.

Parameters:

Name Type Description
methods string | Array.<string>

Method or list of methods to check
Inherited from:
Source:

Returns:

All methods are supported

Type
boolean
Check if element supports one or more methods.

toggle([show]) → {OO.ui.Element}chainable #

Toggle visibility of an element.

Parameters:

Name Type Attributes Description
show boolean optional

Make element visible, omit to toggle visibility
Inherited from:
Source:

Fires:

Returns:

The element, for chaining

Type
OO.ui.Element
Toggle visibility of an element.

updateThemeClasses() #

Update the theme-provided classes.

This is called in element mixins and widget classes any time state changes. Updating is debounced, minimizing overhead of changing multiple attributes and guaranteeing that theme updates do not occur within an element's constructor

Inherited from:
Source:
Update the theme-provided classes.