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>
          </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}" 
                       style="background-color: green; color: white; width: 700px;" <#if field.disabled>disabled="true"</#if> />
       </#if>
    </div>
    
    
  • 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">
       <forms>
          <form>
             <appearance>
                <field id="cm:name">
                   <control template="/my-textfield.ftl" />
                </field>
             </appearance>
          </form>
       </forms>
    </config>
    
    

Sending feedback to the Alfresco documentation team

You don't appear to have JavaScript enabled in your browser. With JavaScript enabled, you can provide feedback to us using our simple form. Here are some instructions on how to enable JavaScript in your web browser.