You are here

Providing a custom form control

If none of the out-of-the-box controls are sufficient, you can add new controls and reference them. Controls are FreeMarker template snippets, therefore, they contain only the HTML markup required to represent the control. The templates need to be stored in the site-webscripts directory, which will usually be in the application server shared classpath.
  • The following example configuration shows a very simple custom text field control that always displays with a green background, white text, and 700 pixels wide. For a production system, use a CSS class; however, this example shows a hard coded style.

    <div class="form-field">
       <#if form.mode == "view">
          <div class="viewmode-field">
             <span class="viewmode-label">${field.label?html}:</span>
             <span class="viewmode-value">${field.value?html}</span>
          <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">*</span></#if></label>
          <input id="${fieldHtmlId}" type="text" name="${}" value="${field.value}" 
                       style="background-color: green; color: white; width: 700px;" <#if field.disabled>disabled="true"</#if> />
  • The following example configuration shows this control being used for the cm:name property, with a file name of my-textfield.ftl.

    <config evaluator="node-type" condition="cm:content">
                <field id="cm:name">
                   <control template="/my-textfield.ftl" />