JSF UI Framework

Layout and Widget Display

Updated: July 17, 2023

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.

The more common way to display a given layout for a document is to use the nxl:layout tag:

<div xmlns:nxl="http://nuxeo.org/nxforms/layout">
  <nxl:layout name="heading" mode="view" value="#{currentDocument}" />

Layouts that are referenced on a document type definition can use other helper tags, see the corresponding documentation.

You can include a layout in a dataTable tag, but cannot make its mode depend on the iteration variable. If you need to do so, recommendation is to use the c:forEach tag and handle all the

, ,
... tags by yourself.

For instance, here is a sample display of a listing layout. The layout template is configured to display table rows. It will display header rows when the parameter showListingHeader is true.

<table class="dataOutput">
  <c:forEach var="row" items="#{documents.rows}" varStatus="layoutListingStatus">
    <c:set var="showListingHeader" value="#{layoutListingStatus.index == 0}" />
    <nxl:layout name="#{layoutName}" value="#{row}" mode="view"
      selectedColumns="#{selectedResultLayoutColumns}" />

Some other advanced tags make it possible to display a global widget for instance, or even to create a widget from scratch by specifying its definition using the tag attributes.

Here is a sample usage of the nxl:widget tag:

<nxl:widget name="widgetName" mode="#{myMode}" value="#{myObject}" required="true" />

Here is a sample usage of the nxl:widgetType tag (creating a widget definition on the fly):

<nxl:widgetType name="text" mode="#{myMode}" value="#{myText}" required="true" />

Please refer to the tag library documentation available at http://community.nuxeo.com/api/nuxeo/7.10/tlddoc/nxl/tld-summary.html.

Related section in Studio documentation

Form Layouts