Customize MultiSelect Control of Alfresco Share

The main Beauty of any Open Source project is its freely available source code with the help of which you can customize it easily. When it comes to propriety products sometimes you end up spending lots of money even to change one small label. Anyways here I am going to show one small customization requirement which I recently come across in one of my implementation so I though it’s worth sharing.

Requirement was to disable some of the values from combobox control which we normally see in alfresco share form. Steps to implement it are as follow.

Step1:

Create custom control file to render property with multiselect requirement

Create file called customselectmany.ftl under

<TOMCAT_HOME>\share\classes\alfresco\web-extension\site-webscripts\org\alfresco\components\form\controls

<#include "/org/alfresco/components/form/controls/common/utils.inc.ftl" />
<#if field.control.params.size??><#assign size=field.control.params.size><#else><#assign size=5></#if>

<#assign hiddenlist=[]>

<#if field.control.params.optionSeparator??>
   <#assign optionSeparator=field.control.params.optionSeparator>
<#else>
   <#assign optionSeparator=",">
</#if>
<#if field.control.params.labelSeparator??>
   <#assign labelSeparator=field.control.params.labelSeparator>
<#else>
   <#assign labelSeparator="|">
</#if>

<#assign fieldValue=field.value>

<#if fieldValue?string == "" && field.control.params.defaultValueContextProperty??>
   <#if context.properties[field.control.params.defaultValueContextProperty]??>
      <#assign fieldValue = context.properties[field.control.params.defaultValueContextProperty]>
   <#elseif args[field.control.params.defaultValueContextProperty]??>
      <#assign fieldValue = args[field.control.params.defaultValueContextProperty]>
   </#if>
</#if>

<#if fieldValue?string != "">
   <#assign values=fieldValue?split(",")>
<#else>
   <#assign values=[]>
</#if>

<div class="form-field">
   <#if form.mode == "view">
      <div class="viewmode-field">
         <#if field.mandatory && !(fieldValue?is_number) && fieldValue?string == "">
            <span class="incomplete-warning"><img src="${url.context}/res/components/form/images/warning-16.png" title="${msg("form.field.incomplete")}" /><span>
         </#if>
         <span class="viewmode-label">${field.label?html}:</span>
         <#if fieldValue?string == "">
            <#assign valueToShow=msg("form.control.novalue")>
         <#else>
            <#if field.control.params.options?? && field.control.params.options != "" &&
                 field.control.params.options?index_of(labelSeparator) != -1>
                 <#assign valueToShow="">
                 <#assign firstLabel=true>
                 <#list field.control.params.options?split(optionSeparator) as nameValue>
                    <#assign choice=nameValue?split(labelSeparator)>
                    <#if isSelected(choice[0])>
                       <#if !firstLabel>
                          <#assign valueToShow=valueToShow+",">
                       <#else>
                          <#assign firstLabel=false>
                       </#if>
                       <#assign valueToShow=valueToShow+choice[1]>
                    </#if>
                 </#list>
            <#else>
               <#assign valueToShow=fieldValue>
            </#if>
         </#if>
         <span class="viewmode-value">${valueToShow?html}</span>
      </div>
   <#else>
      <label for="${fieldHtmlId}-entry">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
      <input id="${fieldHtmlId}" type="hidden" name="${field.name}" value="${fieldValue?string}" />
      <#if field.control.params.options?? && field.control.params.options != "">
         <select id="${fieldHtmlId}-entry" name="-" multiple="multiple" size="${size}" tabindex="0"
               onchange="javascript:Alfresco.util.updateMultiSelectListValue('${fieldHtmlId}-entry', '${fieldHtmlId}', <#if field.mandatory>true<#else>false</#if>,'${fieldHtmlId}-hidden');"
               <#if field.description??>title="${field.description}"</#if> 
               <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
               <#if field.control.params.style??>style="${field.control.params.style}"</#if>
               <#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if>>
               <#list field.control.params.options?split(optionSeparator) as nameValue>
                  <#if nameValue?index_of(labelSeparator) == -1>
                     <option value="${nameValue?html}"<#if isSelected(nameValue)> selected="selected"</#if><#if isSpecial(nameValue)> disabled="true"</#if>>${nameValue?html}</option>
			     <#else>
                     <#assign choice=nameValue?split(labelSeparator)>
                     <option value="${choice[0]?html}"<#if isSelected(choice[0])> selected="selected"</#if><#if isSpecial(choice[0])> disabled="true"</#if>>${msgValue(choice[1])?html}</option>
                  </#if>
               </#list>
         </select>
		 
         <select id="${fieldHtmlId}-hidden" name="--" multiple="multiple" size="${size}" tabindex="0" hidden="true">
     		 <#list field.control.params.options?split(optionSeparator) as nameValue>
			    <#if nameValue?index_of(labelSeparator) == -1>
			      <#if isSelected(nameValue) && isSpecial(nameValue)>
				     <option value="${nameValue?html}" selected="selected"/>
				  </#if>  
				<#else>
				     <#assign choice=nameValue?split(labelSeparator)>
					   <#if isSelected(choice[0]) && isSpecial(choice[0])>
					       <option value="${choice[0]?html}" selected="selected"/>	
						</#if>			
				</#if>
                </#list>
		 </select>		
         <@formLib.renderFieldHelp field=field />
         <#if field.control.params.mode?? && isValidMode(field.control.params.mode?upper_case)>
            <input id="${fieldHtmlId}-mode" type="hidden" name="${field.name}-mode" value="${field.control.params.mode?upper_case}" />
         </#if>
      <#else>
         <div id="${fieldHtmlId}" class="missing-options">${msg("form.control.selectone.missing-options")}</div>
      </#if>
   </#if>
</div>

<#function isSelected optionValue>
   <#list values as value>
      <#if optionValue == value?string || (value?is_number && value?c == optionValue)>
         <#return true>
      </#if>
   </#list>
   <#return false>
</#function>

<#function isSpecial optionValue>
<#assign specialValues = ["value1","value2","value3"]>
   <#list specialValues as value>
      <#if optionValue == value?string>
         <#return true>
      </#if>
    </#list>
    <#return false>
</#function>

<#function isValidMode modeValue>
   <#return modeValue == "OR" || modeValue == "AND">
</#function>

This is how my new custom control file looks like. You need to search for “specialValues” array which I am maintaining so, from the list of values which are defined as constrain in your custom property add all values which you want to disable to “specialValues” array.

Step2:

Associate that property with new control through share-config-custom.xml which is under

<TOMCAT_HOME>\share\classes\alfresco\web-extension\

<config evaluator="model-type" condition="custom:type">
<forms>
<form>
<field-visibility>
<show id="custom:property" />
</field-visibility>
<appearance>
                <field id="custom:property" > 
                <control template="/org/alfresco/components/form/controls/customTextfield.ftl" />
                </field>
</appearance>
</form>
</forms> 
</config>

Step3

Just restart the server and you are done. Check effect of your new custom control through alfresco share user interface.

Looking for quality Alfresco Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under Alfresco | RSS 2.0

Author Spotlight

mitpatoliya

I love opensource technologies working with those technologies from the time I have stepped in to the Software Industry. Alfresco CMS is my area of expertise. I have worked on various complex implementations which involved integration of Alfresco with other technologies, extensively worked with JBPM workflows and Webscripts.

Leave a Reply

Your email address will not be published. Required fields are marked *