Tuesday, March 23, 2010

Add Language Localization to InfoPath 2007 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.



Source: http://www.infopathdev.com/blogs/matt/archive/2006/02/02/Add-Language-Localization-to-a-Form.aspx

No comments:

Post a Comment