topic Re: title & metadata-template in Alfresco Archive

title & metadata-template

mtw999 — Mon, 10 Mar 2014 13:37:34 GMT

Hello,Running 4.1.1 and I need to display title differently than default for custom document type. So, I want title, along with custom properties to appear in document list. The title & custom properties is easy enough to achieve by specifying desired properties to in metadata-template and evalu

Re: title & metadata-template

cgiuliano — Tue, 11 Mar 2014 16:47:27 GMT

Hello Mike,
I did it in the following way on 4.2.e, with the aim of removing the title and adding the comments number and icon (and some other changes…).
I redefined a method in the base view renderer by executing a script declared in share-config-custom.xml with


<config evaluator="string-compare" condition="DocLibCustom">
   <dependencies>
      <js src=" …. /customDLViewRenderer.js" />
   </dependencies>
</config>
‍‍‍‍‍‍‍

The script customDLViewRenderer.js (with the modified parts highlighted between [start] and [end] comments) is


/***********************************************************************************************************************
Customization of Alfresco.DocumentListViewRenderer view renderer (defined in documentlist-view-detailed.js) 
 (original methods copied from webapps\share\components\documentlibrary\documentlist-view-detailed.js)
************************************************************************************************************************/
(function()
{
   //Enable/disable (local) debug mode
   var debug_mode = false;

   /**
    * YUI Library aliases
    */
   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
       
   /**
    * Alfresco Slingshot aliases
    */
   var $html = Alfresco.util.encodeHTML,
      $isValueSet = Alfresco.util.isValueSet;


   Alfresco.DocumentListViewRenderer.prototype.renderCellDescription =
      /**
       * Description/detail custom datacell formatter
       *
       * @method renderCellDescription
       * @param scope {object} The DocumentList object
       * @param elCell {object}
       * @param oRecord {object}
       * @param oColumn {object}
       * @param oData {object|string}
       */
      function AX_DL_VR_renderCellDescription(scope, elCell, oRecord, oColumn, oData)
      {
         var desc = "", i, j,
            record = oRecord.getData(),
            jsNode = record.jsNode,
            properties = jsNode.properties,
            isContainer = jsNode.isContainer,
            isLink = jsNode.isLink,
            title = "",
            titleHTML = "",
            version = "",
            canComment = jsNode.permissions.user.CreateChildren;

         if (jsNode.isLink)
         {
            // Link handling
            oRecord.setData("displayName", scope.msg("details.link-to", record.location.file));
         }
         else if (properties.title && properties.title !== record.displayName && scope.options.useTitle)
         {
            // Use title property if it's available. Supressed for links.
            titleHTML = '<span class="title">(' + $html(properties.title) + ')</span>';
         }

         // Version display
         if (!jsNode.hasAspect("cm:workingcopy") && $isValueSet(record.version) && !jsNode.isContainer && !jsNode.isLink)
         {
            version = '<span class="document-version">' + $html(record.version) + '</span>';
         }

         /**
          *  Render using metadata template
          */
         record._filenameId = Alfresco.util.generateDomId();

         var metadataTemplate = record.metadataTemplate;
         if (metadataTemplate)
         {
            /* Banner */
            if (YAHOO.lang.isArray(metadataTemplate.banners))
            {
               var fnRenderBanner = function fnRenderBanner_substitute(p_key, p_value, p_meta)
               {
                  var label = (p_meta !== null ? scope.msg(p_meta) + ': ': ''),
                     value = "";
                      
                  // render value from properties or custom renderer
                  if (scope.renderers.hasOwnProperty(p_key) && typeof scope.renderers[p_key] === "function")
                  {
                     value = scope.renderers[p_key].call(scope, record, label);
                  }
                  else
                  {
                     if (jsNode.hasProperty(p_key))
                     {
                        value = '<span class="item">' + label + scope.renderProperty(jsNode.properties[p_key]) + '</span>';
                     }
                  }

                  return value;
               };

               var html, banner;
               for (i = 0, j = metadataTemplate.banners.length; i < j; i++)
               {
                  banner = metadataTemplate.banners[i];
                  if (!$isValueSet(banner.view) || banner.view == this.metadataBannerViewName)
                  {
                     html = YAHOO.lang.substitute(banner.template, scope.renderers, fnRenderBanner);
                     if ($isValueSet(html))
                     {
                        desc += '<div class="info-banner">' + html + '</div>';
                     }
                  }
               }
            }

            /* Title */
            if (YAHOO.lang.isString(metadataTemplate.title))
            {
               var fnRenderTitle = function fnRenderTitle_substitute(p_key, p_value, p_meta)
               {
                  var label = (p_meta !== null ? '<em>' + scope.msg(p_meta) + '</em>: ': ''),
                     value = "";
                      
                  // render value from properties or custom renderer
                  if (scope.renderers.hasOwnProperty(p_key) && typeof scope.renderers[p_key] === "function")
                  {
                     value = scope.renderers[p_key].call(scope, record, label);
                  }
                  else
                  {
                     if (jsNode.hasProperty(p_key))
                     {
                        value = '<div class="filename">' + Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record);
                        value += label + scope.renderProperty(jsNode.properties[p_key]) + '</a></span></div>';
                     }
                  }

                  return value;
               };

               desc += YAHOO.lang.substitute(metadataTemplate.title, scope.renderers, fnRenderTitle);
            }
            else
            {
               // Insitu editing for title (filename)
               if (jsNode.hasPermission("Write") && !jsNode.isLocked && !jsNode.hasAspect("cm:workingcopy"))
               {
                  scope.insituEditors.push(
                  {
                     context: record._filenameId,
                     params:
                     {
                        type: "textBox",
                        nodeRef: jsNode.nodeRef.toString(),
                        name: "prop_cm_name",
                        value: record.fileName,
                        fnSelect: function fnSelect(elInput, value)
                        {
                           // If the file has an extension, omit it from the edit selection
                           var extnPos = value.lastIndexOf(Alfresco.util.getFileExtension(value)) - 1;
                           if (extnPos > 0)
                           {
                              Alfresco.util.selectText(elInput, 0, extnPos);
                           }
                           else
                           {
                              elInput.select();
                           }
                        },
                        validations: [
                        {
                           type: Alfresco.forms.validation.length,
                           args: { min: 1, max: 255, crop: true },
                           when: "keyup",
                           message: scope.msg("validation-hint.length.min.max", 1, 255)
                        },
                        {
                           type: Alfresco.forms.validation.nodeName,
                           when: "keyup",
                           message: scope.msg("validation-hint.nodeName")
                        }],
                        title: scope.msg("tip.insitu-rename"),
                        errorMessage: scope.msg("message.insitu-edit.name.failure")
                     },
                     callback:
                     {
                        fn: scope._insituCallback,
                        scope: scope,
                        obj: record
                     }
                  });
               }
               desc += '<h3 class="filename"><span id="' + record._filenameId + '">' + Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record);
// Axiante-CG 2013-11-04 Customization of the first row of metadata template [start]
//                      (the first row of the metadata template is not customizable through Share configuration)
               // Remove title
                  // desc += $html(record.displayName) + '</a></span>' + titleHTML + version + '</h3>';
               desc += $html(record.displayName) + '</a></span>' + version;
               // Show comments count and button to add a comment at the end of row
               if ((jsNode.properties["fm:commentCount"] !== undefined) && (jsNode.permissions.user.CreateChildren))
               {
                  var actionUrls = scope.getActionUrls(record),
                      url = actionUrls[jsNode.isContainer ? "folderDetailsUrl" : "documentDetailsUrl"] + "#comment",
                      i18n = "comment." + (jsNode.isContainer ? "folder." : "document.");
                  desc += '<span class="item item-social in-title-comment" style="float: none">';
                  desc += '<a href="' + url + '" class="comment" title="' + scope.msg(i18n + "tip") + '" tabindex="0"></a>';
                  desc += '<span class="comment-count">' + $html(jsNode.properties["fm:commentCount"]) + '</span>';
                  desc += '</span>';
               }
               desc += '</h3>';
// [end]
            }

            if (YAHOO.lang.isArray(metadataTemplate.lines))
            {
               var fnRenderTemplate = function fnRenderTemplate_substitute(p_key, p_value, p_meta)
               {
                  var label = (p_meta !== null ? '<em>' + scope.msg(p_meta) + '</em>: ': ''),
                     value = "";
                      
                  // render value from properties or custom renderer
                  if (scope.renderers.hasOwnProperty(p_key) && typeof scope.renderers[p_key] === "function")
                  {
                     value = scope.renderers[p_key].call(scope, record, label);
                  }
                  else
                  {
                     if (jsNode.hasProperty(p_key))
                     {
                        value = '<span class="item">' + label + scope.renderProperty(jsNode.properties[p_key]) + '</span>';
                     }
                  }

                  return value;
               };

               var html, line;
               for (i = 0, j = metadataTemplate.lines.length; i < j; i++)
               {
                  line = metadataTemplate.lines[i];
                  if (!$isValueSet(line.view) || line.view == this.metadataLineViewName)
                  {
                     html = YAHOO.lang.substitute(line.template, scope.renderers, fnRenderTemplate);
                     if ($isValueSet(html))
                     {
                        desc += '<div class="detail">' + html + '</div>';
                     }
                  }
               }
            }
         }

         elCell.innerHTML = desc;

         Event.on(Dom.getElementsByClassName("banner-more-info-link", "span", elCell), "click", function showMoreInfoLinkClick(event)
         {
            scope.onCloudSyncIndicatorAction(record, Event.getTarget(event))
         }, {}, scope);
      };
      
})();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Hope this can help you.
Regards,
Carlo

Re: title & metadata-template

mtw999 — Thu, 13 Mar 2014 13:05:49 GMT

Thanks Carlo,

Makes sense. One additional question. The evaluator is looking for DocLibCustom as condition to apply custom renderer. Where is DocLibCustom specified/encountered in context of Share so that your custom Renderer is used?

Mike

Re: title & metadata-template

cgiuliano — Fri, 14 Mar 2014 10:20:48 GMT

Hi Mike,

DocLibCustom is just a configuration section within the DocumentLibrary component. Its goal is to add JavaScripts of CSS files to any page within the DocumentLibrary scope.
Please have a look at
share-documentlibrary-config.xml

You can customize it through share-config-custom.xml in the shared/classes/alfresco/web-extension folder.

Regards,
Carlo

Re: title & metadata-template

douglascrp — Fri, 06 Jun 2014 20:52:36 GMT

I used your idea not to customize attributes rendering, but instead of it, I used it to remove the edit object name feature.

My code is basically a copy of the ootb documentlist-view-detailed.js's renderCellDescription function, with the "Insitu editing for title (filename)" section removed:

/***********************************************************************************************************************
Customization of Alfresco.DocumentListViewRenderer view renderer (defined in documentlist-view-detailed.js) 
 (original methods copied from webapps\share\components\documentlibrary\documentlist-view-detailed.js)
************************************************************************************************************************/
(function()
{
   //Enable/disable (local) debug mode
   var debug_mode = false;

   /**
    * YUI Library aliases
    */
   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;

   /**
    * Alfresco Slingshot aliases
    */
   var $html = Alfresco.util.encodeHTML,
      $isValueSet = Alfresco.util.isValueSet;

   Alfresco.DocumentListViewRenderer.prototype.renderCellDescription =
      /**
       * Description/detail custom datacell formatter
      * Customizacao: removido edicao do nome do documento
       *
       * @method renderCellDescription
       * @param scope {object} The DocumentList object
       * @param elCell {object}
       * @param oRecord {object}
       * @param oColumn {object}
       * @param oData {object|string}
       */
      function DL_VR_renderCellDescription(scope, elCell, oRecord, oColumn, oData)
      {
         var desc = "", i, j,
            record = oRecord.getData(),
            jsNode = record.jsNode,
            properties = jsNode.properties,
            isContainer = jsNode.isContainer,
            isLink = jsNode.isLink,
            title = "",
            titleHTML = "",
            version = "",
            canComment = jsNode.permissions.user.CreateChildren;

         if (jsNode.isLink)
         {
            // Link handling
            oRecord.setData("displayName", scope.msg("details.link-to", record.location.file));
         }
         else if (properties.title && properties.title !== record.displayName && scope.options.useTitle)
         {
            // Use title property if it's available. Supressed for links.
            titleHTML = '<span class="title">(' + $html(properties.title) + ')</span>';
         }

         // Version display
         if (!jsNode.hasAspect("cm:workingcopy") && $isValueSet(record.version) && !jsNode.isContainer && !jsNode.isLink)
         {
            version = '<span class="document-version">' + $html(record.version) + '</span>';
         }

         /**
          *  Render using metadata template
          */
         record._filenameId = Alfresco.util.generateDomId();

         var metadataTemplate = record.metadataTemplate;
         if (metadataTemplate)
         {
            /* Banner */
            if (YAHOO.lang.isArray(metadataTemplate.banners))
            {
               var fnRenderBanner = function fnRenderBanner_substitute(p_key, p_value, p_meta)
               {
                  var label = (p_meta !== null ? scope.msg(p_meta) + ': ': ''),
                     value = "";
                      
                  // render value from properties or custom renderer
                  if (scope.renderers.hasOwnProperty(p_key) && typeof scope.renderers[p_key] === "function")
                  {
                     value = scope.renderers[p_key].call(scope, record, label);
                  }
                  else
                  {
                     if (jsNode.hasProperty(p_key))
                     {
                        value = '<span class="item">' + label + scope.renderProperty(jsNode.properties[p_key]) + '</span>';
                     }
                  }

                  return value;
               };

               var html, banner;
               for (i = 0, j = metadataTemplate.banners.length; i < j; i++)
               {
                  banner = metadataTemplate.banners[i];
                  if (!$isValueSet(banner.view) || banner.view == this.metadataBannerViewName)
                  {
                     html = YAHOO.lang.substitute(banner.template, scope.renderers, fnRenderBanner);
                     if ($isValueSet(html))
                     {
                        desc += '<div class="info-banner">' + html + '</div>';
                     }
                  }
               }
            }

            /* Title */
            if (YAHOO.lang.isString(metadataTemplate.title))
            {
               var fnRenderTitle = function fnRenderTitle_substitute(p_key, p_value, p_meta)
               {
                  var label = (p_meta !== null ? '<em>' + scope.msg(p_meta) + '</em>: ': ''),
                     value = "";
                      
                  // render value from properties or custom renderer
                  if (scope.renderers.hasOwnProperty(p_key) && typeof scope.renderers[p_key] === "function")
                  {
                     value = scope.renderers[p_key].call(scope, record, label);
                  }
                  else
                  {
                     if (jsNode.hasProperty(p_key))
                     {
                        value = '<div class="filename">' + Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record);
                        value += label + scope.renderProperty(jsNode.properties[p_key]) + '</a></span></div>';
                     }
                  }

                  return value;
               };

               desc += YAHOO.lang.substitute(metadataTemplate.title, scope.renderers, fnRenderTitle);
            }
            else
            {
               // Insitu editing for title (filename)
      // Remocao da logica de edicao do nome do documento
               desc += '<h3 class="filename"><span id="' + record._filenameId + '">' + Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record);
               desc += $html(record.displayName) + '</a></span>' + titleHTML + version + '</h3>';
            }

            if (YAHOO.lang.isArray(metadataTemplate.lines))
            {
               var fnRenderTemplate = function fnRenderTemplate_substitute(p_key, p_value, p_meta)
               {
                  var label = (p_meta !== null ? '<em>' + scope.msg(p_meta) + '</em>: ': ''),
                     value = "";
                      
                  // render value from properties or custom renderer
                  if (scope.renderers.hasOwnProperty(p_key) && typeof scope.renderers[p_key] === "function")
                  {
                     value = scope.renderers[p_key].call(scope, record, label);
                  }
                  else
                  {
                     if (jsNode.hasProperty(p_key))
                     {
                        value = '<span class="item">' + label + scope.renderProperty(jsNode.properties[p_key]) + '</span>';
                     }
                  }

                  return value;
               };

               var html, line;
               for (i = 0, j = metadataTemplate.lines.length; i < j; i++)
               {
                  line = metadataTemplate.lines[i];
                  if (!$isValueSet(line.view) || line.view == this.metadataLineViewName)
                  {
                     html = YAHOO.lang.substitute(line.template, scope.renderers, fnRenderTemplate);
                     if ($isValueSet(html))
                     {
                        desc += '<div class="detail">' + html + '</div>';
                     }
                  }
               }
            }
         }

         elCell.innerHTML = desc;

         Event.on(Dom.getElementsByClassName("banner-more-info-link", "span", elCell), "click", function showMoreInfoLinkClick(event)
         {
            scope.onCloudSyncIndicatorAction(record, Event.getTarget(event))
         }, {}, scope);
      };
})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: title & metadata-template

cgiuliano — Sun, 08 Jun 2014 12:55:11 GMT

Hello Mike,
I'm glad if I've been of any help.
Thank you for your feedback.

Carlo

Re: title & metadata-template

anotheralfresco — Tue, 07 Apr 2015 16:09:00 GMT

Carlo, Mike,
Thanks for your post!