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.
