Back

Select Field for Frontend REST Forms

Description

The following snippet allows you to add a Select field to a Frontend Form that works with Content REST API. 

  • There are two Velocity Variables you need to declare: $!{contentTypeVelVarName} which is the Velocity Var Name of your Content Type, and $!{selectFieldVelVarName} which is the Velocity Var Name of your Select Field.
  • The Select Field's options are generated with the Field's definition data. This avoids hardcoding Options on the frontend fields and it's easier to maintain: If a user adds/removes Options from the Field's definition, all Frontend forms that are using this snippet would be updated as well.
  • This snippet does not contain code that would handle the form submission, and it does not contain the Form HTML Markup. It's meant to insert only the Select Field on the form. 
  • You can add as many Select fields to the form as you want, depending on the amount of fields of this kind you have in your Content Type. Keep in mind that each one of them needs their own Velocity Var Name, which is used as the field's id and name attributes on the HTML Markup. 
  • The snippet includes some Dojo declarations that are required in order to render the Field (which is a Dojo FilteringSelect field type).
  • If you want to access the value of the Select field before submitting the form, you can do this: 
var fieldValue =  $('#yourFieldVelocityVarName').val(),

Image

Select Field for Frontend REST Forms

Code

## Declare global path of dojo libraries

#set($dojoPath = $webapi.getConfigVar("path.to.dojo"))
#if(!$UtilMethods.isSet($dojoPath))
  #set($dojoPath = "/html/js/dojo/1.4.0")
#end

## Call required dojo libraries for FilteringSelect fields

<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.form.FilteringSelect");
</script>


## Code of your Select Field

#set($contentTypeVelVarName = 'yourContentType')
#set($selectFieldVelVarName = 'yourSelectField')
#set($contentType = $structures.findStructure($contentTypeVelVarName))
#set($fields = $structures.getFields($contentType))

#foreach($fieldAux in $fields)
  #if($fieldAux.fieldType == 'select' && $fieldAux.velocityVarName.equals($selectFieldVelVarName ))
   <label for="countrySelector">Country Selector</label>
  <select dojoType="dijit.form.FilteringSelect" id="$fieldAux.velocityVarName" name="$fieldAux.velocityVarName" autoComplete="false" class="selectField">
  #set($valuesSplit = $fieldAux.values.split("\n"))
  <option value="" class="optionSelectField">Select an option</option>
  #foreach($value in $valuesSplit)
    #set($labelValue = $value.split('\|'))
    #set($label = $listTool.get($labelValue, 0).trim())
    #if($listTool.size($value.split("|")) > 1)
      #set($value = $listTool.get($labelValue, 1).trim())
    #else
      #set($value = $listTool.get($labelValue, 0).trim())
    #end
    <option id="${fieldAux.velocityVarName}$value" value="$value" class="optionSelectField">$!label </option>
  #end
</select><span id="alert${fieldAux.velocityVarName}" class="errorMessages"></span>

  #end

## End of Select field

Topics

Have you created code you'd like to share with the dotCMS community?

Share your code Become a Contributor