Using the tag editor component in Alfresco 4.0

This is just a short post to note down what I found out about the Insitu tag editor component from Alfresco 4.0 and how to use it in your own code. I have not actually used it yet, so the code below is not complete nor working. It is just meant as a reference (for me).

You need to include the documentlibary.css the editors CSS:

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/documentlibrary/documentlist.css " />

Then you need a DIV to create the editor:

<div id="${el}-tageditor"></div>

You can create a Insitu-Editor for tags from Javascript like this:

var tageditor = Alfresco.util.createInsituEditor( + "-tageditor",
	type: "tagEditor",
	nodeRef : "workspace://SpacesStore/79cced9b-947b-4833-bf03-5fb4660449d9",  // use nodeRef here
	name: "prop_cm_taggable",
	value: "", // here go the tags of the current node
	validations: [{
		type: Alfresco.forms.validation.nodeName,
		when: "keyup",
		message: this.msg("validation-hint.nodeName")
	title: this.msg("tip.insitu-tag"),
	errorMessage: this.msg("message.insitu-edit.tag.failure")
	 fn: this._insituCallback,  // your callback
	 scope: this,
	 obj: record // your object

To display the editor you call:


This displays the following tag editor you know from the document library:

What it does:

  • Provide a textbox, a save and a cancel button (as text)
  • Suggest and auto complete tags as you enter them
  • Create new tags in the repository on save
  • Save the tags for the node (using the nodeRef you specified)
  • Call your code after the update in the repo

What it does not do:

  • It does not read the current tags. You have to pass them in using the value parameter.



Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>