How to add language localization to your info path web browser form 2010/2013


Sometimes your form needs to be available in different languages. This solution provides you with an "easy" way to change the language of drop down lists, buttons, labels and screen-tips depending on the selected language through a XML file and some rules. The following example shows how to to do all of this in 3 languages (English, Spanish and Basque) :




The following steps will show you how to set up the drop down list that will change between the languages:
  1. Create a XML file using the following format:
<?xml version="1.0" encoding="UTF-8"?>
<LocalSettings>
    <Languages>
        <Language Name="English" Code="ENG"/>
        <Language Name="Español" Code="SPA"/>
        <Language Name="Euskara" Code="EUS"/>    
    </Languages>
    <Labels>
          <Label Name="Personal Data">
            <LocalLabel Code="ENG" Value="Personal Data"/>
            <LocalLabel Code="SPA" Value="Datos Personales"/>
            <LocalLabel Code="EUS" Value="Datu Pertsonalak"/>    
        </Label>
        <Label Name="First Name">
            <LocalLabel Code="ENG" Value="First Name"/>
            <LocalLabel Code="SPA" Value="Nombre"/>
            <LocalLabel Code="EUS" Value="Izena"/>    
        </Label>
        <Label Name="Last Name">
            <LocalLabel Code="ENG" Value="Last Name"/>
            <LocalLabel Code="SPA" Value="Apellido"/>
            <LocalLabel Code="EUS" Value="Abizena"/>    
        </Label>
        <Label Name="Address">
            <LocalLabel Code="ENG" Value="Address"/>
            <LocalLabel Code="SPA" Value="Dirección"/>
            <LocalLabel Code="EUS" Value="Helbide"/>        
        </Label>
        <Label Name="Sex">
            <LocalLabel Code="ENG" Value="Sex"/>
            <LocalLabel Code="SPA" Value="Género"/>
            <LocalLabel Code="EUS" Value="Sexu"/>
        </Label>
        <Label Name="Age">
            <LocalLabel Code="ENG" Value="Age"/>
            <LocalLabel Code="SPA" Value="Edad"/>
            <LocalLabel Code="EUS" Value="Adina"/>
        </Label>
           <Label Name="Send">
            <LocalLabel Code="ENG" Value="Send"/>
            <LocalLabel Code="SPA" Value="Enviar"/>
            <LocalLabel Code="EUS" Value="Bidali"/>
        </Label>
    </Labels>
<Gender>
<LocalGender ID="Male" Code="ENG" Value="Male"/>
<LocalGender ID="Male" Code="SPA" Value="Masculino"/>
<LocalGender ID="Male" Code="EUS" Value="Arra"/>  
<LocalGender ID="Female" Code="ENG" Value="Female"/>
<LocalGender ID="Female" Code="SPA" Value="Femenino"/>
<LocalGender ID="Female" Code="EUS" Value="Emea"/>
</Gender>
<ToolTips>
<Dropdwon>
<ENG>
<img xmlns="http://www.w3.org/1999/xhtml" src="/Style Library/Images/info.png" border="0" title="Use the dropdown list to select your language" /> 
</ENG>
<SPA>
<img  xmlns="http://www.w3.org/1999/xhtml" src="/Style Library/Images/info.png" border="0" title="Usa la lista desplegable para seleccionar tu idioma" />
</SPA>
<EUS>
<img xmlns="http://www.w3.org/1999/xhtml" src="/Style Library/Images/info.png" border="0" title="Erabili zerrenda zabalgarria zure hizkuntza aukeratzeko" />
</EUS>
</Dropdwon>
<InsertName>
<ENG>
<img xmlns="http://www.w3.org/1999/xhtml" src="/Style Library/Images/info.png" border="0" title="Insert the name here" /> 
</ENG>
<SPA>
<img xmlns="http://www.w3.org/1999/xhtml" src="/Style Library/Images/info.png" border="0" title="Inserta el nombre aqui"/>
</SPA>
<EUS>
<img xmlns="http://www.w3.org/1999/xhtml" src="/Style Library/Images/info.png" border="0" title="Idatzi hemen zure izena" />
</EUS>
</InsertName>
</ToolTips>
</LocalSettings>

You can copy and paste it in notepad and then save as "All files", Encoding: UTF8 and save the XML file on /Style Library/Language.xml

Make sure you can find the Info.png image in the Style Library of SharePoint (/Style Library/Images/info.png). If you cannot find it there save this imageas "info.png" in that location.

             2.  Go to your form and create a new connection called "languages" as following:
                  Receive Data -> XML document -> Include the location of your XML file (http://server/Style Library/Language.xml) -> Access Data from the specified location-> Automatically receive data when the form is opened

              3. Create a drop down list box called "Language" into your form and connect it to the "languages" XML file connection as following:
                  Include LocalSettings/Languages/Language in the Entries field.
                  Include @Code in the Value field.
                  Include @Name in the  Display name field.


Your drop down box will be populated now with the 3 languages. 
You can add an action when the form is loading to set your form language to English (ENG) by default, as following:
Data-> Form Load -> Manage Rules -> New Action -> Add -> Set a fields value: include your language drop down list in "field:" and ENG in "value:"

Once, you have your language drop down list box ready, you can start to set up the rest of the stuff in your form.

How to set up the language in labels

  1. Insert a Text field to create the labels.
  2. Go to Borders and Shading and select "None" in the Borders tab
  3. Go to the field Properties and tick the "Read-only" option from the Display tab
  4. Go to the field Properties and include an expression in the default value by selecting the Value field from the language connection (/Labels-/Label/LocalLabel/Value) and clicking on Filter Data...

        
3. Include the following filter where

Name: The "Name" field within the language connection (LocalSettings/Labels/Label/Name)
First Name: The label name that you want to compare with (It could be First Name, Last Name, Address or Age according to our XML file )
Code: The "Code" field within the language connection ( LocalSettings/Labels/Label/LocalLabel/Code)
Language: The drop down list box that contains the three languages



Now, you can use the Language drop down list box to change between languages.
Repeat all the steps for every single label that you want to insert.


How to set up the language in buttons

  1. Include a button and go to the Button Properties (Right click on the mouse). 
  2. Click on the Fx to include an expression for your button label.

 


    3. Follow the steps 2 and 3 from the "How to set up the language in labels" section.
                                             
Now, our button label will change depending on the language selected within the drop down list box.

How to set up the language in screen-tips

  1. Drag and drop the three Rich text box fields (ENG, SPA and EUS)  within the language connection (LocalSettings/ToolTips/DropDown) to the info path form, next to the drop down list box.
  2. Add a formatting condition in each field as following:
    • For the ENG field: IF  Language (drop down list with the three languages) is not equal to "ENG" hide the control
    • For the SPA field: IF  Language (drop down list with the three languages) is not equal to "SPA" hide the control
    • For the EUS field: IF  Language (drop down list with the three languages) is not equal to "EUS" hide the control. 
  3. Note that the formatting conditions in the Rich Text box fields  might not work using info path web browser forms, if this is the case just include the fields within 3 different sections and add the conditions in the section instead of in the Rich Text box.
  4. Change the size in Rich Text Box properties to Height: 25px and Width: 25px. Change the border and shading to None.

The result should be something like this when you hand the mouse over the image: 

Tool tips


The below image shows how the tool tip looks when no mouse is over the image

tool tips


How to set up the language in drop down lists


Create a drop down list box into your form and in the default value connect it to the "language" as following: 
    1. Include /LocalSettings/Gender/LocalGender in the Entries field and click on the Filter Data.. button. Include the following filter: 
      • Code (LocalSettings/Gender/LocalGender/Code) = Language (drop down list with the three languages)     

    1. Include @ID in the Value field
    2. Include @Value in the  Display name field.




    Note: If you are still using Info path 2007, everything above will work except the "How to set up the language in screen-tips" section.






    Comments

    Post a Comment

    Popular posts from this blog

    How to convert fields in lower case/upper case within Info path forms

    Info path forms does not have any function to convert fields to lowercase or uppercase but there is an easy way to do it by using the translate function. Basically, the  translate  function returns the first argument string with occurrences of characters in the second argument string replaced by the character at the corresponding in the third argument. Using the translate function we can convert fields  from upper case to lower case, first word in upper case... or even use it to remove all the dashes and colons. The Translate function is better than the Replace function as can change several words at the same time. If we want every single character to get converted, we will have to specify every letter in the alphabet in upper case and then lower case to make sure every character will get converted. These are some examples: Converting from UPPER case to Lower case: translate( FieldToConvert , "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz") C
    Read more

    How to auto save a browser enabled info path form every X minutes in Sharepoint 2007, 2010 and 2013

    Info Path forms can be saved automatically every X minutes by updating the FormServer.aspx file. This update will avoid for users to lose their information when the session has expired and they forgot to save the form. The following code add some conditions so only the forms within a specific site and form view will be saved . I recommend you to copy the FormServer.aspx file before start with the changes to facilitate the file recovery if it fails. Update the FormServer.aspx file using a text editor as following:   If you are using SharePoint 2007: Include before the   </head>  tag    the following: < script language ="javascript" type ="text/javascript" > var timer_is_on = 0; var t; function doTimer() { clearTimeout(t); if (document.URL.indexOf( "SiteName" ) != -1) if (g_objCurrentFormData[9] != "FormViewToExclude"  && PostbackBody.intPostbacksInProgress == 0) if (!timer_is_on) { timer_is_on
    Read more

    Auto-populate the person/Group picker from the current user on InfoPath 2007/2010/2013

    Image
    If you need to fill the default value of the person/group picker with the current logged user when the form is loading, there is an easy way to do it. The following steps will show you how to do it: Create a web service connection to get the user profile information from the current user: Manage Data Connections -> Add -> Receive Data -> SOAP Web Service: Include the location of the SOAP Web service definition: http:// YourServer /_vti_bin/UserProfileService.asmx?WSDL Select GetUserProfileByName Make sure the "Automatically retrieve data when form is opened" option is ticked.   2. Add a Person/Group picker field to your info path form  3. Create a new action rule in the "Form Load" to run under a condition, if needed, i.e: Add the current user into the Person/Group picker field when the Person/Group picker field is blank:  DisplayName is blank 4. Set the Person/group picker DisplayName to PreferredName 5. Set the P
    Read more