Custom form Dropdown

sp2

Hi,

I Have create custom form where there are multiple Dropdown.

My requirement is that if i change first Dropdown then second Dropdown would fill base on first Dropdown value and all these values are coming from custom constraint.

Ex.Dropdown  1 - Country (Coming from database)

      Dropdown 2 -State (need to fill base on country)

Please guide me how to fullfill this type of requirement.

ratik_singhal

Sanjay Bandhniya‌

You have to write 2 ftl (country.ftl and state.ftl) and associate in *-form-confix.xml file under the <appearance> like

<appearance>

<field id="abc:company">
<control template="/org/alfresco/components/form/controls/company-dropdown.ftl">
</control>
</field>

</appearance> 

In company-dropdown.ftl, you need to call the repo webscript to get the list of state based on selected country. Hope you have configured countries in the constraint list.

<div class="form-field">
<script type="text/javascript">//<![CDATA[cons
YAHOO.util.Event.onAvailable("${fieldHtmlId}", function(){
 // if want to call something on load.
});

function getState(currentValueHtmlId) {
this.currentValueHtmlId = currentValueHtmlId;
var select = Dom.get(this.currentValueHtmlId);
this.register = function () {
Alfresco.util.Ajax.jsonGet({
url: Alfresco.constants.PROXY_URI+"/abc/get-state",
successCallback: {
fn: this.updateOptions,
scope: this
},
failureCallback: {
fn: function(){},
scope: this
}
});
};
this.updateOptions = function (res) {
var result = res.serverResponse.responseText;
console.log("Company ." + result);
if (result.length > 0) {
var sp=result.split("|");
for(var i=0;i<sp.length;i++){
var option = new Option(sp[i].trim(), sp[i].trim());
select.options[select.options.length] = option;
}
}
};
this.register();
}

//]]></script>
<input type="hidden" id="companyName" name="companyName" value=""/>
<label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
<select id="${fieldHtmlId}" name="${field.name}" tabindex="0" onchange="getState();"
<#if field.description??>title="${field.description}"</#if>
<#if field.control.params.size??>size="${field.control.params.size}"</#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>>
<option value="">Select</option>
</select>

Sanjay Bandhniya Please mark helpful if it works.