Share Edit Form - Drop Down List Required / Mandatory Field

[jrjfresco]

Hello,

I have a question about drop down lists and required fields.  I have implemented a drop down list property in an edit form.  It is a field of type d:text with a constraint of a list of Allowed values.  It works, but I would like to enhance it.

Desired behavior:

I would like for the first value to be something indicating that the user needs to select something, like "– Please Select a Value –".  Then, when the user clicks Save, if the selected value is "– Please select a Value –" (the first one in the list and the default), they get a message stating that they need to select a value.  This is how I would like to implement Required or Mandatory fields with a drop down list.

Current State:

For now, I have configured the list to have a value of blank as the first value and it works, but I would like this value not to be blank, but rather tell the user that they need to select something.

Current configuration in custom model XML:
(note:  implemented mandatory=true with a blank value first.)

List Constraint:

<constraint name="mt:constraintDocStatusList" type="LIST">
    <parameter name="allowedValues">
   <list>
           <value></value>
           <value>Draft</value>
      <value>Pending Review</value>
      <value>Approved</value>
      <value>Published</value>
      <value>Retired</value>
   </list>
    </parameter>
    <parameter name="caseSensitive">
   <value>false</value>
    </parameter>
</constraint>

Aspect Property:

<property name="mt:docStatusList">
   <type>d:text</type>
   <mandatory>true</mandatory>
   <constraints>
      <constraint ref="mt:constraintDocStatusList" />
   </constraints>
</property>

Thanks for any help you can provide.

-John

[parzgnat]

So basically all you need to do is for your empty list item, you want to make the label of the dropdown list option "–Please Select a Value–" instead of just a blank option?

Assumming that the user interface that you're working in is Share, you should just be able to write a custom JavaScript validator to override the default MANDATORY constraint validator.  Your form configuration would looks something like this…

    <config>
          <forms>
         <dependencies>
               <js src="/js/my-custom-validator.js" />
           </dependencies>
          </forms>
    </config>
      
      <config evaluator="aspect" condition="my:aspect">
      <forms>
         <form>
            <field-visibility>
               <show id="my:property" />
            </field-visibility>
            <appearance>
               <field id="my:property">
                   <constraint-handlers>
                                       <constraint type="MANDATORY" validation-handler="Alfresco.forms.validation.myValidator" event="blur" />
                                   </constraint-handlers>
               </field>
            </appearance>
         </form>
      </forms>
   </config>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then you just need to write your validator such that "" and "–Please Select a Value–" are invalid values.

[jrjfresco]

Thank you.  I will research implementation of custom validators and take the approach that you have outlined.  I will post my success when finished.  In the mean time, can you point me to the best reference material on implementing custom validators, since I have not done this before (e.g. where to put the .js file, an example of another validator I can leverage and tweak a few things)?

Thanks again!
John

[parzgnat]

John,

Here are some additional resources that might be helpful:

http://docs.alfresco.com/4.2/index.jsp?topic=%2Fcom.alfresco.enterprise.doc%2Ftasks%2Fforms-valhandl...‍

http://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/share-form-validat...‍

http://wiki.alfresco.com/wiki/Forms‍

Here is a simple example that validates that a metadata field does not contain the slash "/" character:

Alfresco.forms.validation.fileName = function fileName(field, args, event, form, silent, message)
{
   var valid = false;
   
   if(YAHOO.lang.trim(field.value).length == 0)
   {
      valid = false;
   }
   else
   {
      if(field.value.indexOf("/") == -1)
      {
         valid = true;
      }
   }
   
   if(!valid && YAHOO.lang.trim(field.value).length != 0)
   {
      Dom.addClass(field.id, "invalid");

      if (!silent && form)
      {
         form.addError("Name cannot contain the slash character \"/\".");
      }
   }
   else
   {
      Dom.removeClass(field.id, "invalid");
   }
   
   return valid;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I hope this helps.

Tony