Creating a Share Form for an Alfresco Custom Type having Two Columns

This is a followup to a previous blog post that described a form created for use with a custom type.  In this blog we show that it is easy to further control the layout of the form by applying a template to the form.  The template is uses Freemarker.  And it's possible to specify a separate template for each of the possible modes of the form: view, edit, and create.

By adding the following three lines to the form definition of the file web-framework-config-custom, the template(s) can be specified:

<view-form template="/tab-edit-form.ftl" />
           <edit-form template="/tab-edit-form.ftl" />
    <create-form template="/tab-edit-form.ftl" />

And when viewed in whole context of the form definition, we now have:

<alfresco-config>

 <config evaluator="node-type" condition="mm:doc">
    <forms>
       <form>
    <view-form template="/newtemplate.ftl" />
       <edit-form template="/newtemplate.ftl" />
    <create-form template="/newtemplate.ftl" />
          <field-visibility>
             <!-- inherited from cm:content -->
             <show id="cm:name" />
             <show id="cm:title" force="true" />
             <show id="cm:description" force="true" />
             <show id="mimetype" />
             <show id="cm:author" force="true" />
             <show id="size" for-mode="view" />
             <show id="cm:creator" for-mode="view" />
             <show id="cm:created" for-mode="view" />
             <show id="cm:modifier" for-mode="view" />
             <show id="cm:modified" for-mode="view" />

             <!--  aspect mm:colorAble -->             
             <show id="mm:color" />
             
             <!--  specific for mm:doc -->
             <show id="mm:relatedDocuments" />
             <show id="mm:freeText" />

           
          </field-visibility>
          <appearance>
             <set id="builtin" appearance="fieldset" label="Built In" />
             <set id="custom" appearance="fieldset" label="Custom Data" />
             <set id="mandatory" parent="builtin" appearance="panel" label="Mandatory" />
             <set id="optional" parent="builtin" appearance="panel" label="Optional" />
             
             <field id="cm:name" set="mandatory" />
             <field id="cm:title" set="optional" />
             <field id="cm:description" set="optional" />
             <field id="mimetype" set="optional" />
             <field id="cm:author" set="optional" />
             <field id="size" set="optional" />
             <field id="cm:creator" set="optional" />
             <field id="cm:created" set="optional" />
             <field id="cm:modified" set="optional" />        
             <field id="cm:modifier" set="optional" />
               
             <field id="mm:relatedDocuments" label="Related Docs" set="custom"/>
             <field id="mm:freeText" label="More Information" set="custom"/>
             <field id="mm:color" label="Color" set="custom">
                <control template="controls/selectone.ftl">
                   <control-param name="options">Red,Orange,Yellow,Green,Blue,Indigo,Violet</control-param>
                </control>
             </field>
          </appearance>
       </form>
    </forms>
 </config>
</alfresco-config>

Next we define the Freemarker template file. The code for this example is found on the Alfresco Wiki Form Example page:

tomcat\webapps\share\WEB-INF\classes\alfresco\web-extension\site-webscripts\newtemplate.ftl

<#import "/org/alfresco/components/form/form.lib.ftl" as formLib />



<#if error?exists>

   <div class="error">${error}</div>

<#elseif form?exists>



   <#assign formId=args.htmlid + "-form">

   <#assign formUI><#if args.formUI??>${args.formUI}<#else>true</#if></#assign>



   <#if formUI == "true">

      <@formLib.renderFormsRuntime formId=formId />

   </#if>

   

   <div id="${formId}-container" class="form-container">

      

      <#if form.showCaption?exists && form.showCaption>

         <div id="${formId}-caption" class="caption"><span class="mandatory-indicator">*</span>${msg("form.required.fields")}</div>

      </#if>

         

      <#if form.mode != "view">

         <form id="${formId}" method="${form.method}" accept-charset="utf-8" enctype="${form.enctype}" action="${form.submissionUrl}">

      </#if>

      

      <div id="${formId}-fields" class="form-fields"> 

        <#list form.structure as item>

            <#if item.kind == "set">

               <@renderSetWithColumns set=item />

            <#else>

               <@formLib.renderField field=form.fields[item.id] />

            </#if>

         </#list>

      </div>

         

      <#if form.mode != "view">

         <@formLib.renderFormButtons formId=formId />

         </form>

      </#if>



   </div>

</#if>



<#macro renderSetWithColumns set>

   <#if set.appearance?exists>

      <#if set.appearance == "fieldset">

         <fieldset><legend>${set.label}</legend>

      <#elseif set.appearance == "panel">

         <div class="form-panel">

            <div class="form-panel-heading">${set.label}</div>

            <div class="form-panel-body">

      </#if>

   </#if>

   

   <#list set.children as item>

      <#if item.kind == "set">

         <@renderSetWithColumns set=item />

      <#else>

         <#if (item_index % 2) == 0>

         <div class="yui-g"><div class="yui-u first">

         <#else>

         <div class="yui-u">

         </#if>

         <@formLib.renderField field=form.fields[item.id] />

         </div>

         <#if ((item_index % 2) != 0) || !item_has_next></div></#if>

      </#if>

   </#list>

   

   <#if set.appearance?exists>

      <#if set.appearance == "fieldset">

         </fieldset>

      <#elseif set.appearance == "panel">

            </div>

         </div>

      </#if>

   </#if>

</#macro>

In the template there is a reference to the form object and its element members, things like form.mode, form.structure, form.showCaption, etc. The definition of these elements can be found on the Alfresco wiki here.

When the form is rendered for the a document of this custom type, this is what it looks like now.  The form is now rendered with two columns.