in Share

Form Control Dependency In Alfresco Share

Introduction

Alfresco Share has very flexible form customization and allows developer to go wild with settings, but a problem emerges when developer wants to make one form control depended of other. We are going to show a simple one with our type ab:invoice that we previously wrote about. ab:invoice type has two properties one is the invoice value and other is invoice high indicator. If invoice value is more than $1000 we want high indicator to be checked. Same principle shown here can be applied with combo boxes, date selectors and so on. We must say that this problem mentioned here can be solved using custom behaviours.

Solution

Lets see share form config

 <config evaluator="node-type" condition="ab:invoiceType">
  <forms>
   <form>
    <field-visibility>
     <show id="ab:invoiceDate" />
     <show id="ab:invoiceNumber" />
     <show id="ab:invoicevalue" />
     <show id="ab:high" />
    </field-visibility>
   <appearance>
   <field id="ab:invoiceDate" label-id="prop.ab_invDate" />
   <field id="ab:invoiceNumber" label-id="prop.ab_invNumber" />
   <field id="ab:invoicevalue" label-id="prop.ab_value" >
     <control template="/org/alfrescoblog/components/form/controls/number.ftl">
     <control-param name="javascriptParam">onkeyup</control-param>
     <control-param name="javascriptParamFunc">invoiceValueOnKeyDown</control-param>
     <control-param name="otherInput">ab_high</control-param>
     </control>
    </field>
    <field id="ab:high" label-id="prop.ab_high" />
   </appearance>
  </form>
 </forms>
</config>

Everything seems normal except part for invoiceValue, it has some custom properties and new number.ftl template. Custom properties used here are

  • javascriptParam, defines the event that we want our invoiceValue to be binded, OnKeyUp would be perfect for our case
  • javascriptParamFunc, specifies function name that will be called here
  • otherInput, specifies what is the type or aspect property that value should be applied

We have defined custom number.ftl for this case so lets see important part of the code

<script>
 function invoiceValueOnKeyDown(){
 var otherInput = YAHOO.util.Selector.query
             ('input[id*=prop_${field.control.params.otherInput}');
 if(Number(event.target.value) > 1000)
  {
    otherInput.checked = true; 
   }else{
    otherInput.checked = false;
  }
}
</script>
 
 <input id="${fieldHtmlId}" type="text" 
  ...
 ${field.control.params.javascriptParam}="${field.control.params.javascriptParamFunc}()"/>
 ...

custom number.ftl can be downloaded  here. Looking through the code above we can see that on every keyup event we call invoiceValueOnKeyDown javascript function and change otherInput checked state to true or false and in this way connecting it with this form control.

Summary

Although this solution is fine and would work it has a problem with maintenance, we have to have 100% of number.ftl in order to make this work. Better way would be to include number.ftl and then using YUI library to connect events like onKeyUp and call the method. We will go through that idea in some future posts.

Don't be shellfish...Tweet about this on TwitterShare on LinkedInShare on Google+Share on RedditShare on Facebook

Was this helpful ?