Add Language Localization to a Form - Matt Faus
in

InfoPath Dev

Matt Faus

Add Language Localization to a Form

When a form is used in several different countries the need for easy language localization becomes a very necessary goal. By leveraging expression boxes, a secondary data source, and data filtering techniques the ability to easily switch between languages on a form becomes a small feat.


Figure 1. An example of an InfoPath Form with localized text.

Although changing labels in a form is not difficult, there are will be some aspects missing from the form that keep it from achieving true localization. The following are some areas where you might run into problems when internationalizing your form:

  • Tooltip text
  • Insert Item links for repeating tables and sections
  • Button labels
  • Calendars from different parts of the world


In this task we will create a new blank form with a connection to a secondary data source that provides language localization settings. Let’s start by creating the XML file that will store the language settings.

Create the secondary data source:

Copy the following code into a text editor, and then save the file as Language Settings.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LocalSettings>
    <Languages>
        <Language Name="English" Code="ENG"/>
        <Language Name="Español" Code="SPA"/>
        <Language Name="Français" Code="FRE"/>   
    </Languages>
    <Labels>
        <Label Name="First Name">
            <LocalLabel Code="ENG" Value="First Name"/>
            <LocalLabel Code="SPA" Value="Nombre"/>
            <LocalLabel Code="FRE" Value="Nom"/>   
        </Label>
        <Label Name="Last Name">
            <LocalLabel Code="ENG" Value="Last Name"/>
            <LocalLabel Code="SPA" Value="Apellido"/>
            <LocalLabel Code="FRE" Value="Nom de Famille"/>   
        </Label>
        <Label Name="Phone Number">
            <LocalLabel Code="ENG" Value="Phone Number"/>
            <LocalLabel Code="SPA" Value="Número de Teléfono"/>
            <LocalLabel Code="FRE" Value="Numéro de Téléphone"/>   
        </Label>
        <Label Name="Address">
            <LocalLabel Code="ENG" Value="Address"/>
            <LocalLabel Code="SPA" Value="Dirección"/>
            <LocalLabel Code="FRE" Value="Adresse"/>       
        </Label>
        <Label Name="Age">
            <LocalLabel Code="ENG" Value="Age"/>
            <LocalLabel Code="SPA" Value="Edad"/>
            <LocalLabel Code="FRE" Value="Age"/>
        </Label>
        <Label Name="FavoriteColor">
            <LocalLabel Code="ENG" Value="Favorite Color"/>
            <LocalLabel Code="SPA" Value="Color Favorito"/>
            <LocalLabel Code="FRE" Value="Couleur Préférée"/>
        </Label>
    </Labels>
    <Colors>       
        <LocalColor ID="Blue" Code="ENG" Value="Blue"/>
        <LocalColor ID="Blue" Code="SPA" Value="Azul"/>
        <LocalColor ID="Blue" Code="FRE" Value="Bleu"/>       
        <LocalColor ID="Green" Code="ENG" Value="Green"/>
        <LocalColor ID="Green" Code="SPA" Value="Verde"/>
        <LocalColor ID="Green" Code="FRE" Value="Vert"/>       
        <LocalColor ID="Red" Code="ENG" Value="Red"/>
        <LocalColor ID="Red" Code="SPA" Value="Rojo"/>
        <LocalColor ID="Red" Code="FRE" Value="Rouge"/>       
        <LocalColor ID="Yellow" Code="ENG" Value="Yellow"/>
        <LocalColor ID="Yellow" Code="SPA" Value="Amarillo"/>
        <LocalColor ID="Yellow" Code="FRE" Value="Jaune"/>       
    </Colors>
</LocalSettings>

Now that we have our secondary data source, let’s design our form.

Add the secondary data source:

  1. Design a new blank form.
  2. Choose Data Connections from the Tools menu, and then click Add.
  3. In the Data Connection Wizard, select Receive Data, and then click Next.
  4. Select XML Document, and then click Next.
  5. Click Browse, locate and select the Language Settings.xml file, click Open, and then click Next.
  6. Click Finish, click Yes, and then click Close.

Add the language selection drop-down list:

  1. Open the Controls task pane.
  2. Add a drop-down list box to the view.
  3. Double-click the new drop-down list, rename the field to LanguageChoice, and then select Look Up Values From A Data Connection in the List Box Entries section.
  4. Select Language Settings from the Data Connection drop-down list.
  5. Select /LocalSettings/Languages/Language for the Entries field by clicking on the icon to the right of the field.
  6. Select @Code for the Value and @Name for the Display Name. Refer to Figure 2.
  7. Click OK to close the Drop-Down List Box Properties dialog box.


Figure 2. Configuring the language selection drop-down list.

Add the layout table and controls:

  1. Open the Layout task pane.
  2. Insert a Custom Table with 3 columns and 4 rows.
  3. Merge the last two columns of the third and fourth row (refer to Figure 5).
  4. Open the Controls task pane, and then insert a text box control into the first column of the second row.
  5. Double-click this text box, change the name to FirstName, and then click OK.
  6. Insert a text box into the second column of the second row, and then change the name to LastName.
  7. Insert a text box into the last column of the second row, and then change the name to Age.
  8. Insert a text box into the first column of the last row, and then change the name to PhoneNumber.
  9. Insert a text box into the last column of the last row, and then change the name to Address.

Now that all of the controls are in the layout, we need to add labels so that the user knows what information to type into each field. Using expression boxes we can dynamically set the content of each label depending on the language preference.


LOCALIZED FIELD LABELS

Add the expression boxes with data filtering:

  1. Click inside the first column of the first row to set the insertion point.
  2. Select Expression Box from the Controls task pane.
  3. Click the Function button on the dialog box that appears.
  4. Click Insert Field or Group in the Insert Formula dialog box.
  5. Select Language Settings (Secondary) from the Data Source drop-down box, select /LocalSettings/Lables/Label/LocalLabel/Value, and then click Filter Data.
  6. Click Add.
  7. Select Name from the Select A Field or Group first drop-down list, select Labels/Label/Name, click OK, and then type First Name into the third drop-down list.
  8. Click And, select Code from the first drop-down list, and then select Select A Field Or Group from the third-drop down list.
  9. Select Main from the Data Source drop-down list, and then select myFields/LanguageChoice.
  10. Click OK 6 times.
  11. Repeat steps 1 through 9 for each additional label, except in step 7 type the text that corresponds to whichever label you are adding.


Figure 3. Specifying the filter conditions.


Figure 4. The completed function for the expression box.

Make the labels bold:

  1. Select all of the expression boxes by holding the Ctrl key while clicking each one.
  2. Click the Bold button (or type Ctrl+B).


Figure 5. The completed view.

Now our form has labels that change depending on what the user selects from the drop-down list. Let’s preview our accomplishments before adding a finishing touch.

Preview the form:

  1. Click Preview Form (or type Alt+P).
  2. Select any of the languages from the drop-down list.
  3. Notice how the labels are blank originally and then change to the specified language depending on what is chosen from the drop-down list.


Figure 6. Selecting the language.


Figure 7. Labels in Spanish.

To remedy the problem of all of the labels being blank by default we will add a default value to the myFields/LanguageChoice node.

Set the default language:

  1. Open the Data Source task pane.
  2. Double-click the myFields/LanguageChoice node.
  3. Type ENG as the Default Value, and then click OK.

With another quick preview you will see that the drop-down list is automatically set to English and none of the labels are blank.


LOCALIZED DROP-DOWN LISTS

Now that the expression boxes have all been updated to display appropriate labels depending on the language choice, we will add a drop-down list that demonstrates similar functionality. The secondary data source already has elements with all of the correct information, so we will simply add a drop-down list with the appropriate data filtering.

Add the drop-down list:

  1. Click below the table to set the insertion point and type Enter a few times to insert some white space.
  2. Add an expression box that displays the Favorite Color label using the process described in the first section.
  3. Open the Controls task pane and select Drop-Down List to insert a new control.
  4. Double-click the drop-down list, and then change the name to FavoriteColor.
  5. Select Look Up Values In A Data Connection, select Language Settings from the data source drop-down list, and then click the field selection button.
  6. Select Colors/LocalColor, and then click the Filter Data button.
  7. Click Add, select Code from the first drop-down list, and then select Select A Field Or Group from the third drop-down list.
  8. Choose Main from the data source drop-down list, select /myfields/LanguageChoice, and then click OK four times to return to the Drop-Down List Box Properties dialog box.
  9. Select the @ID attribute as the Value for the entries, select the @Value attribute as the Display Name, and then click OK.


LOCALIZED BUTTONS

The last aspect of adding localization to the form will be making sure that the button labels are correctly displayed. Unfortunately, InfoPath does not allow the button labels to be changed programmatically, so we are forced to use several button controls with conditional formatting to solve this problem. This same process can be used to change the tooltip text and Insert Item links for repeating tables and sections, but depending on how many languages need to be supported this can generate tremendous amounts of clutter in design mode.

Add the buttons:

  1. Open the Controls task pane and insert a button onto the view.
  2. Double-click the button, change the Label to Submit, change the ID to butSubmit.
  3. Click the Display tab, click the Conditional Formatting button, and then click Add.
  4. In the first drop-down list select LanguageChoice, select Is Not Equal To in the second drop-down list, and then select Type Text and type ENG into the third drop-down list.
  5. Select Hide This Control, and then click OK three times.
  6. Copy and paste the button until there are three identical buttons right next to each other.
  7. Change the Label on the second button to Sométase, change the ID to butSubmit, and then follow step 4 to apply conditional formatting using SPA as the text instead of ENG.
  8. Change the Label on the third button to Soumettre, change the ID to butSubmit, and then follow step 4 to apply conditional formatting using FRE as the text instead of ENG.

Note: The ID of all three buttons should be the same because they will all perform the same action and any code that you attach to one button should be attached to the others.


Figure 8. The completed form in design mode.


Figure 9. The completed form being filled out.

Published Feb 02 2006, 01:18 PM by Matt Faus
Filed under:

Comments

 

ChetRCreacy said:

When InfoPath 2007 (12.0.4518.1014) MSO (12.0.4518.1014) tries to import the data connections "Language Settings.xml" I get the error "The form contains XML that cannot be parsed: An invalid character was found in text content.  Line 5, Position 29" which is '<Language Name="Espa'.  It does not like the special language characters.  Is there some special edition of InfoPath needed to support the character set?  Thanks, Chet Creacy

June 6, 2007 8:06 AM
 

engy_mamdouh said:

I had the same problem, i solved it by changing those non english letters, which is not the best solution obviously.

Moreover, Can this work on web browser enaled forms?

What about the direction for arabic languages for example?

Any Idea how to get the current locale id from sharepoint?

Any help would be appreciated.

Thanks

Engy

July 5, 2007 2:52 AM
 

engy_mamdouh said:

Hello -

UPDATE!!

It worked perfectly fine on browser enabled form, just by changing the list into a drop down list :)

It also worked fine with the letters by changing the save as encoding into UTF-8

I need help with the direction matter pleaseeeee!

Thank You

Engy

July 5, 2007 7:30 AM
 

engy_mamdouh said:

The Buttons are localisable the same way in 2007 !

Help with the direction Pleaseee!

July 5, 2007 8:34 AM
 

happydigit said:

Hey,

I build this example with round about 66 controls (labels). The performance is so slow, that Internet Explorer brings a warning, that JavaScript Code needs to much time and ask me if I want abort the script.

Are there any tuning suggestions?

Furthermore there is a mistake shown by the design detective. The labels are a not repeatable control. The node in xml is of course repeating - at the end it works but with error warning during publishing.

Thanks,

Sebastian.

November 28, 2007 9:46 AM
 

Hans Andringa said:

Happydigit,

I have also encountered the exact same problems as you have mentioned. I got a good solution/workaround for both problems.

For the first problem about working with large number of controls the solution is easy. The performance problem is caused by your browser rendering all the controls in JavaScript. The XPath query for each label is under water being translated into very large functions and arrays:

function _d(objContext,enumMode){

return

Expr.xpath_And(Expr.xpath_Eq(Expr.vpath_Select(objContext,[[[1,-1],[1,-1],[1,-1],[0,38]]]),"Title"),Expr.xpath_Eq(Expr.vpath_Select(objContext,[[[1,-1],[0,39]]]),Expr.vpath_Select(objContext,[[[1,-1],[1,-1],[1,-1],[1,-1],[1,-1],[0,16]]])))

}

When you change your language in the Drop-Down List Box, all the functions are being called in JavaScript and all the controls are being updated with XPath. If you have more than 10 controls, this will be very very slow.

The solution is easy. Just let the server change all the controls instead of the browser. So change your Drop-Down List Box to "Always" Postback. You can find this by double-clicking on the control and by going to the "Browser forms" tab in InfoPath 2007. I am not sure what your server load will do when multiple users are changing their language at the same time, but I assume this won't be a problem. Another good tip for boosting your performance, is to use multiple views.

For the second problem it's rather a workaround then a solution, because there is a bug in the Design Checker. When you update the XPath query in your control, the Design Checker doesn't sees that you have a WHERE clause in your query. It just thinks that you have selected a value from a Repeating Group (which is actually the case). You just cannot make an update to your control. The workaround I have found is when you want to change the XPath query, just remove the old control and add a new one. Then copy-paste the right XPath Query into it:

xdXDocument:GetDOM("Language Settings")/LocalSettings/Labels/Label/LocalLabel/@Value[../../@Name = "Title" and ../@Code = xdXDocument:get-DOM()/my:DTAControls/my:Global/my:Language]

Or you can just save and publish your InfoPath template and ignore the errors :p

Great topic btw!!

Greetings,

Hans

January 14, 2008 4:32 AM
 

SaurabhKV said:

A very good link to implement localization in an InfoPath form.

May 5, 2008 12:33 PM
 

dropdownlist blank first row said:

Pingback from  dropdownlist blank first row

May 15, 2008 4:16 PM
 

pnewhook said:

I've got the problem engy mentioned above. I can't get localized dropdown boxes because filters are not supported in brower enabled forms. Does anyone know of a work around for this?

September 3, 2008 9:24 AM
 

jbaekken said:

Got the same problem as pnewhook with filters on dropdown boxes on browser-enabled forms. Did you find a way to solve this, engy?

October 9, 2008 1:57 AM
 

Screen Tip translation in IFS | keyongtech said:

Pingback from  Screen Tip translation in IFS | keyongtech

January 18, 2009 8:58 AM
 

Multi-national(langage) support? | keyongtech said:

Pingback from  Multi-national(langage) support? | keyongtech

January 21, 2009 6:36 PM
 

pnewhook said:

Great article. I hope 2010 features more built in internationalization features.

As a time saver, instead of clicking throuh the dialogs in the "Add the expression boxes with data filtering" section, do it once then copy the xPath that's generated. You then only need to edit the Name parameter.

March 10, 2010 10:05 AM
 

rahulbabar said:

Very nice article! Can we get language in code behind rather user select it from the drop down menu?

October 29, 2010 10:30 PM
 

Multilanguage InfoPath Forms | Catalin Soca Blog said:

Pingback from  Multilanguage InfoPath Forms | Catalin Soca Blog

January 19, 2011 1:19 AM
 

Reference URL | Abhi's Blog said:

Pingback from  Reference URL | Abhi&#039;s Blog

February 8, 2011 1:48 AM
 

nenemourinho said:

Dear Matt,

Using this method in InfoPath 2010 (Administrator -approved form Template) with MOSS 2010 I have a problem...

When I try to upload my template.xsn in the SharePoint Central Administration I have the following error :

Object reference not set to an instance of an object.

ConstructFromXsnFile failed with unhandled exception System.NullReferenceException: Object reference not set to an instance of an object.     at Microsoft.Office.InfoPath.Server.SolutionLifetime.Filters.<>c__DisplayClass2.<CreateDependentNodeList>b__0(BaseControl match)     at System.Collections.Generic.List`1.Find(Predicate`1 match)     at Microsoft.Office.InfoPath.Server.SolutionLifetime.Filters.CreateDependentNodeList.........

If I delete the calculated values the upload is ok.

Have you already try this method with 2010 environment ?

Thanks in advance

February 21, 2011 8:46 AM
 

Add Language Localization to a Form | Software Design said:

Pingback from  Add Language Localization to a Form | Software Design

January 23, 2012 8:59 AM
 

Localizing a SharePoint 2010 List Form with InfoPath | SharePoint Cipher said:

Pingback from  Localizing a SharePoint 2010 List Form with InfoPath | SharePoint Cipher

August 24, 2012 12:25 PM
 

Office 365 #SharePoint multi language custom form | Valy Greavu's Live Blog said:

Pingback from  Office 365 #SharePoint multi language custom form | Valy Greavu&#039;s Live Blog

July 28, 2015 2:41 PM

About Matt Faus

Matt holds a BS in Computer Science and Software Engineering from the University of Texas at Dallas. During his studies, he helped Qdabra Software develop DBXL and InfoPath solutions. During that time he lived in Dallas, Seattle, and Valencia, Spain. He now works at Microsoft, developing for Hotmail.
Copyright © 2003-2019 Qdabra Software. All rights reserved.
View our Terms of Use.