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



  • 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
                    value="{{XXXX}}" // YOUR DOCUMENT PROPERTY (ex:["mycustomschema:watermark"])
                    page-provider="VideoUtils_Watermark_PageProvider" // Link to the page provider we've defined before
                    result-formatter="[[watermarkResultFormatter]]" // 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],
  • 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:
_watermarkResultFormatter: function(doc) {

        if (! {
          return "Bad result format";

        let pictInfo =["picture:info"];

        let markup = "";

        markup += "<table width='100%'><tbody>";
        // Title
        markup += "<tr>";
          markup += "<td width='100px' style='text-align: center'>";
            markup += "<img src='" + this._getThumbnailUrl(doc) + "' style='max-width: 100px; max-height=25px;' >";
          markup += "</td>";
          markup += "<td>";
            markup += "<div style='margin-left:15px'><span style='font-weight: bold;'>"
              //markup += this.$.escapeHTML(doc.title) +"</span>";
              markup += doc.title +"</span>";
              markup += "<br />" + pictInfo.width + " x " + pictInfo.height;
            markup += "</div>";
          markup += "</td>";
          markup += "</tr>"
        markup += "</tbody></table>";

        return markup;
  • Notice we want to display the document thumbnail, so we need a specific function to do that:
_getThumbnailUrl: function(doc) {
        return "/nuxeo/api/v1/id/" + doc.uid + "/@rendition/thumbnail";
  • 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.