nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

How to access a node's associations in client-side JavaScript?

goldmar

Hi guys,

I'm trying to add a feature to Alfresco Share which enables me to set custom folder icons (thumbnails). So far I've added a new subtype to cm:folder which adds a new association to the data model. I can now convert a cm:folder to the subtype and then add the association from the Share user interface.

However, in order to change the displayed folder thumbnail, I need to change renderCellThumbnail in documentlist-view-detailed.js. My problem now is: How do I access the node's associations in client-side JavaScript?

In the server-side JavaScript API (http://wiki.alfresco.com/wiki/4.0_JavaScript_API#ScriptNode_API) a node has a readonly associative array "assocs" which contains the associations of the node. But this is not true on the client side (http://wiki.alfresco.com/wiki/Document_Library_jsNode_Reference) 😞

Regards,
Mark

Find more posts tagged with

Comments

rjohnson

From reading your post you have created a new custom type which is a sub type of cm:folder. I'm not entirely clear how you want to determine which icon to display, however, if all you want to do is say:

Is the container type "my custom type" if so display "my custom icon" then you could do the following.

Override document-view-detailed.js and

In renderCellThumbnail change the line

elCell.innerHTML = '<span class="folder">' + (isLink ? '<span class="link"></span>' : '')
 + (scope.dragAndDropEnabled ? '<span class="droppable"></span>' : '')
 + Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record)
 + '<img id="' + imgId + '" src="'
 + Alfresco.constants.URL_RESCONTEXT
 + 'components/documentlibrary/images/folder-64.png" /></a>';
‍‍‍‍‍‍‍‍

such that it varies the image name based on the folder type. So you might end up with

var folderIcon = "folder-64.png";
if(jsNode.typeShort != "cm:folder") {
    folderIcon = jsNode.typeShort.replace(":","-") + "-64.png";
}
elCell.innerHTML = '<span class="folder">' + (isLink ? '<span class="link"></span>' : '')
 + (scope.dragAndDropEnabled ? '<span class="droppable"></span>' : '')
 + Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record)
 + '<img id="' + imgId + '" src="'
 + Alfresco.constants.URL_RESCONTEXT
 + 'components/documentlibrary/images/'
 + folderIcon + '" /></a>';
‍‍‍‍‍‍‍‍‍‍‍‍‍

You would then need to ensure that your image files were in /components/documentlibrary/images. If you are delivering your customisations as a JAR then you can do that by creating the directory structure and images under META-DATA in your project.

Bob Johnson

goldmar

Hello,

thanks for your reply! However, this is not quite what I'm looking for. For a better understanding here is my model definition:

<?xml version="1.0" encoding="UTF-8"?>

<!– Definition of new Model –>
<model name="ci:customicon" xmlns="http://www.alfresco.org/model/dictionary/1.0">

   <!– Optional meta-data about the model –>   
   <description>CustomIcon Model</description>
   <author>Mark Goldenstein</author>
   <version>1.0</version>

   <!– Imports are required to allow references to definitions in other models –>   
   <imports>
       <!– Import Alfresco Dictionary Definitions –>
      <import uri="http://www.alfresco.org/model/dictionary/1.0" prefix="d"/>
      <!– Import Alfresco Content Domain Model Definitions –>
      <import uri="http://www.alfresco.org/model/content/1.0" prefix="cm"/>
   </imports>

   <!– Introduction of new namespaces defined by this model –>
   <!– NOTE: The following namespace my.new.model should be changed to reflect your own namespace –>
   <namespaces>
      <namespace uri="extension.customicon" prefix="ci"/>
   </namespaces>

   <types>
     <type name="ci:iconFolder">
       <title>Folder (with icon)</title>
       <description>A folder with an icon.</description>
       <parent>cm:folder</parent>
       <associations>
         <association name="ci:icon">
           <target>
             <class>cm:content</class>
             <mandatory>false</mandatory>
             <many>false</many>
           </target>
         </association>
       </associations>
     </type>
   </types>

</model>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'm looking for a way to access the "ci:icon" association in client-side JavaScript.

Hope it is clear now.

Regards,
Mark

rjohnson

I take it the ci:icon association will point to the icon file that you want to use.

Bob

goldmar

Yes, that's the idea 🙂

I've got a working solution now but it's not quite pretty… I'm making two seperate calls to Alfresco's RESTful API and it's quite a mess in JavaScript. It would be really cool to have an easy way of accessing associations, similar to properties in a jsNode.

rjohnson

If you track through documentlist-view-detailed.js you will see that you end up in documentlist.js which does an call to the repo to get the icon thumbnail for non container document types.

What I would do is create a webscript that will return content based on a noderef. What you could then do is make the src of your icon img tag in the doculemnt library display HTML a call to this webscript and the noderef parameter would be the noderef of the folder itself (which you know on the client side as its in jsNode). You then get your webscript to find the associated icon file and return its content. You will need a "if I don't have an association" bail out image whose content you can return just in case; to me folder-64.png seems the obvoius choice, but you will need to load that file into the repo somewhere so that your webscript can return it.

To return content from a webscript you describe it thus (its the kind= bit that is important).

<webscript kind="org.alfresco.repository.content.stream">
   <shortname>Get Folder Icon</shortname>
   <description>
      Returns the content of the associated Icon file
   </description>
    <url>/someco/get-folder-icon</url>
   <format default="html">extension</format>
   <authentication runas="system">none</authentication>
   <transaction>required</transaction>
    <family>Someco</family>
</webscript>
‍‍‍‍‍‍‍‍‍‍‍‍‍

Best of luck

Bob Johnson