Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Custom Document Suggestion

suggest result formatters picture


  • Nuxeo Web UI


This module helps you build a custom display for your nuxeo-document-suggestion element, thanks to the resultFormatter element attribute.


Customize the document suggestion in any web element and the user will have a rich suggestion instead of having document path suggestions.


We will illustrate the installation through an example, with a Document property displaying the chosen image to apply for watermark on the current document.

Studio Modeler

  • Create a custom page provider to list the document which should appear in your suggestion element.
    • VideoUtils_Watermark_PageProvider
  • Create a property of type Document in the schema definition if needed.
    • No the case here in this example

Studio Designer

  • Switch to code on the layout / element which uses the property (converted in nuxeo-document-suggestion).
  • Edit the element according to your needs
                    enrichers="thumbnail" // Make sure your suggestor returns thumbnails
                    value="{{XXXX}}" // YOUR DOCUMENT PROPERTY (ex:["mycustomschema:watermark"])
                    page-provider="VideoUtils_Watermark_PageProvider" // Link to the page provider we've defined before
                    result-formatter="[[thumbnailFormatter]]" // Formatter used to create the custom display (HTML)
  • Update the default behaviors: The Select2Behavior is required to use escapeHTML().
      is: 'video-watermark',
      behaviors: [Nuxeo.LayoutBehavior, Nuxeo.Select2Behavior],

Bind the formatter to a property in your element:

properties: {

  thumbnailFormatter: {
    type: Function,
    value: function() {
      return this._thumbnailFormatter.bind(this);
  • Create a function for a selected entry of the Formatter.
         * Formatter for a selected entry.
        watermarkResultFormatter: {
          type: Function,
          value: function() {
            return this._watermarkResultFormatter.bind(this);
  • Create the Formatter logic and UI:
_thumbnailFormatter: function(doc) {

  if (doc && && doc.contextParameters && doc.contextParameters.thumbnail) {

    // These values are used in the second row
    var lable1 = "Type";
    var value1 = doc.type;

    var lable2 = "State";
    var value2 = doc.state;

    var lable3 = "Version";
    var value3 =["uid:major_version"] + "." +["uid:minor_version"];

    var markup = "";

    markup += "<table width='100%'><tbody>";
    markup += "<tr>";
    // Thumbnail
    markup += "<td width='100px' style='text-align: center'>";
    markup += "<img src='" + doc.contextParameters.thumbnail.url + "' style='max-width: 100px; max-height=25px;' >";
    markup += "</td>";
    // Details
    markup += "<td>";
    // First Row
    markup += "<div style='margin-left:15px'><span style='font-weight: bold; font-size: large'>";
    markup += doc.title + "</span>";
    // Second Row
    markup += "<br /> <span style='font-weight: bold;'>" + lable1 + ":</span> " + value1;
    markup += " <span style='font-weight: bold;margin-left:15px;'>" + lable2 + ":</span> " + value2;
    markup += " <span style='font-weight: bold;margin-left:15px;'>" + lable3 + ":</span> " + value3;
    // Third Row
    markup += "<br /> <span style='font-weight: bold;'>Path:</span> " + doc.path;
    markup += "</div>";
    markup += "</td>";
    markup += "</tr>";
    markup += "</tbody></table>";

    return markup;

:information_note: You can alternatively use the operation attribute of the suggestion element if you don't want to use a page provider: just create an automation which lists the documents you need to fetch, with Repository.Query operation, and use the operation="my_operation_id instead of the page-provider="VideoUtils_Watermark_PageProvider attribute.

Documentation Links

You can’t perform that action at this time.