Skip to content
Branch: master
Find file History
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.