Class: FieldLayout

.ui.FieldLayout(fieldWidget, configopt)

new FieldLayout(fieldWidget, configopt)

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 is accessed via a help icon that appears in the upper right corner of the rendered field layout. Please see the OOjs UI 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. 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.
help string | OO.ui.HtmlSnippet <optional>

Help text. When help text is specified, a "help" icon will appear in the upper-right corner of the rendered field; clicking it will display the text in a popup. For important messages, you are advised to use notices, as they are always shown.
$overlay jQuery <optional>

Passed to OO.ui.PopupButtonWidget for help popup, if help is given. See .
Mixes In:
Source:
Throws:

An error is thrown if no widget is specified

Type
Error

Extends

Methods

(protected) formatTitleWithAccessKey(title) → {string}

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

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.

Inherited From:
Source:
Returns:

Closest scrollable container

Type
HTMLElement

getData() → {Mixed}

Get element data.

Inherited From:
Source:
Returns:

Element data

Type
Mixed

getElementDocument() → {HTMLDocument}

Get the DOM document.

Inherited From:
Source:
Returns:

Document object

Type
HTMLDocument

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

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

getElementWindow() → {Window}

Get the DOM window.

Inherited From:
Source:
Returns:

Window object

Type
Window

getField() → {OO.ui.Widget}

Get the widget contained by the field.

Source:
Returns:

Field widget

Type
OO.ui.Widget

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

isElementAttached() → {boolean}

Check if the element is attached to the DOM

Inherited From:
Source:
Returns:

The element is attached to the DOM

Type
boolean

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

isVisible() → {boolean}

Check if element is visible.

Inherited From:
Source:
Returns:

element is visible

Type
boolean

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

Parameters:
Name Type Description
kind string

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

(protected) restorePreInfuseState(state)

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:

scrollElementIntoView(configopt) → {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

setData(data)

Set element data.

Parameters:
Name Type Description
data Mixed

Element data
Inherited From:
Source:

setElementGroup(group)

Set group element is in.

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

Group element, null if none
Inherited From:
Source:

setElementId(id)

Set the element has an 'id' attribute.

Parameters:
Name Type Description
id string
Inherited From:
Source:

setErrors(errors)

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:

setNotices(notices)

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:

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

toggle(showopt)

Toggle visibility of an element.

Parameters:
Name Type Attributes Description
show boolean <optional>

Make element visible, omit to toggle visibility
Inherited From:
Source:
Fires:
  • event:visible

updateThemeClasses()

Update the theme-provided classes.

Inherited From:
Source: