Web UI Framework

Layouts and Widgets (Forms, Listings, Grids)

Updated: October 16, 2020
Layouts and widgets have been originally designed to display forms, and have been improved to handle listings as well as summary pages. These configuration elements are used to generate page fragments from XML configurations contributed to Nuxeo Runtime extension points. In this chapter we will see how to define layouts and associated widgets, and use them in XHTML pages.
Layouts and Widgets can be configured using Studio: Check out the Form Layouts documentation.
## Key Concepts ### Layouts In a document oriented perspective, layouts are mostly used to display a document metadata in different use cases: present a form to set its schema fields when creating or editing the document, and present these fields values when simply displaying the document. A single layout definition can be used to address these use cases as it will be rendered for a given document and in a given mode.   ### Widgets > There's a widget in the closet. > > – R. Kellise A widget defines how one or several fields from a schema will be presented on a page. It can be displayed in several modes and holds additional information like for instance the field label. When it takes user entries, it can perform conversion and validation like usual JSF components. Widgets have been made more generic to handle rendering of elements in listings, for instance, or to render information that is not directly linked to a document metadata, like presenting its relations. ### Widget Types A widget definition includes the mention of its type. Widget types make the association between a widget definition and the JSF component tree or xhtml template that will be used to render it in a given mode.
Table of Content

The following pages explain how to work with layouts and widgets.

Layout and Widget Definitions — Custom layouts and widgets can be contributed to the web layout service, using its extension points. Standard Layout Types — Some layout types have been extracted to ease up defining layouts. Standard Widget Types — A series of widget types has been defined for the most generic uses cases. Custom Layout and Widget Templates — Some templating features have been made available to make it easier to control the layouts and widgets rendering. Custom Widget Types — Custom widget types can be added to the standard list thanks to another extension point on the web layout service. Layout and Widget Display — Layouts can be displayed thanks to a series a JSF tags that will query the web layout service to get the layout definition and build it for a given mode. Generic Layout Usage — Layouts can be used with other kind of objects than documents.