Translate choice column values in NewForm, DispForm and EditForm

Change log

25.02.2013 Updated the code and changed the variable “fields” to “localizeFields” to avoid interference with other scripts.


I got a request for a solution for translating choice column values in a form.

This solution changes the text in the drop-down list, radio button or checkbox in NewForm or EditForm, leaving the “value” untouched. In DispForm the field value is “localized” directly.

This means that the text the user sees is changed, but the value that SharePoint sees is the original. This means that the value shown in the form is localized, but the value stored in the SharePoint list when saving the form is not.

Add this code to a CEWP or HTML Form web part BELOW the list form web part in NewForm, DispForm and EditForm of your list.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var translationSettings = {
					"MyDropDownMenu":
						{
							"Yes":{"1044":"Ja","default":"Yes"},
							"No":{"1044":"Nei","default":"No"}
						},
					"MyMultiChoice":
						{
							"Choice 1":{"1044":"Valg 1","default":"Choice 1"},
							"Choice 2":{"1044":"Valg 2","default":"Choice 2"},
							"Choice 3":{"1044":"Valg 3","default":"Choice 3"}
						}
					};

var localizeFields = init_fields_v2();
var isDispForm = $("input:button[id$='SaveItem']").length===0;

$.each(translationSettings,function(fin,t){
	if(localizeFields[fin] !== undefined){
		var fType, arr, txt, tTxt;
		fType = "";
		txt = "";
		tTxt = "";
		if($(localizeFields[fin]).attr("fieldtype") === "SPFieldChoice"){
			if(!isDispForm){
				if($(localizeFields[fin]).find("select").length > 0){
					fType = "select";
				}else if($(localizeFields[fin]).find("select").length === 0 && $(localizeFields[fin]).find("input:radio").length > 0){
					fType = "radio";
				}
			}else{
				fType = "dispform";
			}
		}else if($(localizeFields[fin]).attr("fieldtype") === "SPFieldMultiChoice"){
			if(!isDispForm){
				fType = "multichoice";
			}else{
				fType = "dispform";
			}
		}else{
			return;
		}
		switch(fType){
			case "dispform":
				arr = $(localizeFields[fin]).find('.ms-formbody').text().replace(/[ xA0]+$/,'').split("; ");
				tTxt = [];
				$.each(arr,function(i,txt){	
					if(t[txt] !== undefined){
						tTxt.push(t[txt][L_Menu_LCID] !== undefined ? t[txt][L_Menu_LCID] : t[txt]["default"]);
					}
				});
				$(localizeFields[fin]).find('.ms-formbody').text(tTxt.join("; "));
			break;
			case "select":				
				$(localizeFields[fin]).find("select option").each(function(i,opt){
					txt = $(this).text();
					if(t[txt] !== undefined){
						tTxt = t[txt][L_Menu_LCID] !== undefined ? t[txt][L_Menu_LCID] : t[txt]["default"];
						$(this).text(tTxt);
					}
				});
			break;
			case "radio":
			case "multichoice":
				$(localizeFields[fin]).find("input").each(function(i,opt){
					txt = $(this).next().text();
					if(t[txt] !== undefined){
						tTxt = t[txt][L_Menu_LCID] !== undefined ? t[txt][L_Menu_LCID] : t[txt]["default"];
						$(this).next().text(tTxt);
					}
				});
			break;
		}
	}
});

// This function is found in spjs-utility.js and can be removed from here if you already have referred this library.
function init_fields_v2(){
	var res = {};
	$("td.ms-formbody").each(function(){
	var myMatch = $(this).html().match(/FieldName="(.+)"s+FieldInternalName="(.+)"s+FieldType="(.+)"s+/);	
		if(myMatch!=null){
			// Display name
			var disp = myMatch[1];
			// FieldInternalName
			var fin = myMatch[2];
			// FieldType
			var type = myMatch[3];
			if(type=='SPFieldNote'){
				if($(this).find('script').length>0){
					type=type+"_HTML";
				}else if($(this).find("div[id$='_TextField_inplacerte']").length>0){
					type=type+"_EHTML";
				}				
			}
			if(type=='SPFieldLookup'){
				if($(this).find('input').length>0){
					type=type+"_Input";
				}
			}
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('FieldType',type);
		}		
	});
	return res;
}
</script>

The translation is set up in the variable “translationSettings” like this:
var translationSettings = {
“FieldInternalName”:
{
“Actual value 1”:{“1044″:”Norwegian value 1″,”default”:”Default value 1″},
“Actual value 1”:{“1044″:”Norwegian value 1″,”default”:”Default value 2″}
}
};

You can add alternate languages by using the LCID. The selected LCID must be among the installed language packs on your SharePoint server.

Ask if something is unclear.

Alexander

3 thoughts on “Translate choice column values in NewForm, DispForm and EditForm”

    1. When adding new choices, the new ones will not get localized until you have edited the script. Those choices will display as the actual value from the list settings.

      Alexander

Leave a Reply