Alfresco Share form field visibility depending on other field value

It’s not a common scenario, but sometimes user requirements include dynamic field control visibility depending on a value stored in other field from the same fieldset.

Let’s imagine that we have to show a field named cm:comment only if the field named cm:title includes the sentence Including comments.

Declaring the Share Form Control configuration for our custom form control named my-textfield.ftl should include required parameters.

<config evaluator="node-type" condition="cm:content">
  <forms>
    <form>
      <appearance>
        <field id="cm:comment" label="Comments">
          <control template="/my-textfield.ftl">
		    <control-param name="visibilityField">cm_title</control-param>
		    <control-param name="visibilityCondition">Including comments</control-param>
          </control>
        </field>
      </appearance>
    </form>
  </forms>
</config>

In the my-textfield.ftl Share form control implementation, these values can be handled to show or hide the DIV containing the HTML control.

<!-- Naming field DIV to control visibility -->
<div class="form-field" id="${fieldHtmlId}-control-div">
   <#if form.mode == "view">
      <div class="viewmode-field">
         <span class="viewmode-label">${field.label?html}:</span>
         <span class="viewmode-value">${field.value?html}</span>
      </div>
   <#else>
      <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">*</span></#if></label>
      <input id="${fieldHtmlId}" type="text" name="${field.name}" value="${field.value}" 
            <#if field.disabled>disabled="true"</#if> />
   </#if>
</div>

<!-- Checking conditions when rendering field -->
<script type="text/javascript">//<![CDATA[

	<#if field.control.params.visibilityCondition??>
	YAHOO.util.Event.onContentReady("${fieldHtmlId}", function ()
	{
	
	       // Find value for field "visibilityField"
	       var value = "";
	       <#list form.fields?keys as formfield>
			  <#if formfield == "prop_" + field.control.params.visibilityField?js_string>
			      value = "${form.fields[formfield].value}";
			  </#if>
	       </#list>
	       
	       // Set value coming from control parameters
	       var targetValue = "${field.control.params.visibilityCondition}";
	       
	       // Hide full DIV if values are equal
	       if (value == targetValue) {
	           YAHOO.util.Dom.get("${fieldHtmlId}-control-div").style.display = 'none';
	       }
	       
	}, this);
	</#if>

//]]></script>

Sometimes Alfresco Share can be challenging when trying to find the right way to produce a new feature, but everything is easier than expected in the end!

Published by angelborroy

Understanding software.

5 thoughts on “Alfresco Share form field visibility depending on other field value

  1. Hi AngelBorroy,

    Thanks for the article.
    We are actually looking for something like this but with a change. We need to have the prop value match at runtime/dynamically rather than on content ready.

    Can you please point us to a direction where we can start working on this.

  2. Probably you can include a REST Invocation to match your conditions using “Alfresco.util.Ajax.request”

  3. Hi AngelBorroy,

    Thanks for reply. I am colleague of Hiten, not from technical background though, however, just want to add what are we trying to achieve. We are actually trying to Display different number of fields based on selected value in a drop-down as in this video https://www.youtube.com/watch?v=B7OZk7FVtY8.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: