Addons

Basic Widget Types

Updated: March 18, 2024

JSF UI Deprecation
This requires to have the JSF UI addon installed on your server that is deprecated since Nuxeo Platform LTS 2019.
Please refer to the Web UI documentation.

A series of widget types is available for the most basic uses cases.

text

The text widget displays an input text in create or edit mode, with an additional message tag for errors, and a regular text output in any other mode. Widgets using this type can provide properties accepted on a <h:inputText /> tag in create or edit mode, and properties accepted on a <h:outputText /> tag in other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/textWidget.

int

The int widget displays an input text in create or edit mode, with an additional message tag for errors, and a regular text output in any other mode. It uses a number converter. Widgets using this type can provide properties accepted on a <h:inputText /> tag in create or edit mode, and properties accepted on a <h:outputText /> tag in other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/intWidget.

secret

The secret widget displays an input secret text in create or edit mode, with an additional message tag for errors, and nothing in any other mode. Widgets using this type can provide properties accepted on a <h:inputSecret /> tag in create or edit mode.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/secretWidget.

textarea

The textarea widget displays a textarea in create or edit mode, with an additional message tag for errors, and a regular text output in any other mode. Widgets using this type can provide properties accepted on a <h:inputTextarea /> tag in create or edit mode, and properties accepted on a <h:outputText /> tag in other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/textareaWidget.

datetime

The datetime widget displays a JavaScript calendar in create or edit mode, with an additional message tag for errors, and a regular text output in any other mode. It uses a date time converter. Widgets using this type can provide properties accepted on a <[nxu:inputDatetime](http://nxuinputDatetime) /> tag in create or edit mode, and properties accepted on a <h:outputText /> tag in other modes. The converter will also be given these properties.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/datetimeWidget.

file

The file widget displays a file uploader/editor in create or edit mode, with an additional message tag for errors, and a link to the file in other modes. Widgets using this type can provide properties accepted on a <[nxu:inputFile](http://nxuinputFile) /> tag in create or edit mode, and properties accepted on a <[nxu:outputFile](http://nxuoutputFile) /> tag in other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/fileWidget.

htmltext

The htmltext widget displays an HTML text editor in create or edit mode, with an additional message tag for errors, and a regular text output in other modes (without escaping the text). Widgets using this type can provide properties accepted on a <[nxu:editor](http://nxueditor) /> tag in create or edit mode, and properties accepted on a <[nxu:outputText](http://nxuoutputText) /> tag in other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/htmltextWidget.

selectOneDirectory

The selectOneDirectory widget displays a selection of directory entries in create or edit mode, with an additional message tag for errors, and the directory entry label in other modes. Widgets using this type can provide properties accepted on a <[nxd:selectOneListbox](http://nxdselectOneListbox) /> tag in create or edit mode, and properties accepted on a <[nxd:directoryEntryOutput](http://nxddirectoryEntryOutput) /> tag in other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/selectOneDirectoryWidget.

selectManyDirectory

The selectManyDirectory widget displays a multiselection of directory entries in create or edit mode, with an additional message tag for errors, and the directory entries labels in other modes. Widgets using this type can provide properties accepted on a <[nxd:selectManyListbox](http://nxdselectManyListbox) /> tag in create or edit mode, and properties accepted on a <[nxd:directoryEntryOutput](http://nxddirectoryEntryOutput) /> tag in other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/selectManyDirectoryWidget.

checkbox

The checkbox widget displays a checkbox in create, edit and any other mode, with an additional message tag for errors. Widgets using this type can provide properties accepted on a <h:selectBooleanCheckbox /> tag in create, edit mode, and other modes.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/checkboxWidget.

list

The list widget displays an editable list of items in create or edit mode, with an additional message tag for errors, and the same list of items in other modes. Items are defined using subwidgets configuration. This actually a template widget type whose template uses a <[nxu:inputList](http://nxuinputList) /> tag in edit or create mode, and a table iterating over items in other modes. It also offers alternative renderings.

View online demo: http://layout.demo.nuxeo.org/nuxeo/layoutDemo/listWidget

complex

The complex widget displays its subwidgets, binding them to a map-like structure suitable for complex field types definitions. It offers different kinds of renderings.

View online demo:http://layout.demo.nuxeo.org/nuxeo/layoutDemo/complexWidget

template

The template widget displays a template content whatever the mode. Widgets using this type must provide the path to this template; this template can check the mode to adapt the rendering.

Information about how to write a template is given in the custom widget template section.