Vadim Tabakman

Nintex Forms - Multilingual Form

I want to try to get a pure Javascript way of doing it.  Dan mentions at the bottom of his post that he could extend it to pull some information from a User Profile, which is one of the things I wanted to mess around with.  I can't help myself :).  My development brain ... I have no control over it.

Building the Form

We start with something dear to all of our hearts, the Leave Request.  I've created a simple list in SharePoint with the obvious fields - Title, Description, Leave Type, Start and End Time.

Leave Requests

By default, this bring up a form with the labels for each field, taking on the same text as your typed into the name fo the fields when you created them.  The idea here to create a form so that a user who is logged, can view the form in other languages.

Default Form

Enhancing the Form

There are few things to consider here. 

  1. we need to find out what languages a user supports.  In the SharePoint User Profile, there are any number of languages a user can add. It doesn't have to be just one.  So first issue, we need to find a way to query the SharePoint user profile and get back the users available languages.
  2. we need to have a resource list of all the appropriate translations.
  3. we need to identify each label we want to translate and link them to the appropriate language
  4. we need to give the user the ability to choose a language they want to see

To pull our User Profile information, we do this via Javascript.  We can use the SPAPI javascript libraries that I mentioned here : Querying User Profiles

In my case, I created a Document Library in my site called "JS" and I've uploaded all the JS files into there.  That way I can build other forms and reuse these Javscript libraries.

JS Library

Notice there are a bunch of JS files, so this is a very powerful library.

For those who are very techie, you may ask "Why didn't you just use the SP javascript library that comes with SharePoint?".  Well, because I couldn't get the User Profile stuff to work and I didn't want to spend too much time on this.

Next, we need a list that will contain our translations.  I created a list called NFTranslations.

NFTranslations

Notice that I have these label terms, the language translation and a language code.  In my example I have English, Spanish and Portuguese (Brazillian).  Not to give you the wrong impression, I don't know Spanish or Portuguese.  I used one of my collegues who is fluent in all three of the above languages.  Thank you Luis!!.

The second last step is to uniquelly identify the labels we need to change.  In Nintex Forms, we can open each label, expand the Formatting section and add a class name to it.  The CSS class doesn't need to exist, but it will be something we can use in the Javascript.

Adding a Class to a Label

This class name is what we use in the NFTranslation list for each language translation.

Now in the final step, we add a Choice field to our form, add it to the top right which will contain the list of the current users available languages.  This will allow the user to select the language and have the form automatically update the labels with the selected language.

All this is happening with Javascript.  As briefly described above, we talk to the UserProfile.asmx service in SharePoint to get the languages.  We then talk to the Lists.asmx service to get the appropriate translations, based on the selected langauge from the drop down.

What does the Javascript look like?

NWF$(function () {
  var translations = new Array();
  var sSiteUrl = '';

     function getUserProfileInfo() {
        var userprofiles= new SPAPI_UserProfile('')
        var currentUser = userprofiles.getUserProfileByName('');
        if(currentUser.status == 200)
        { 
            return currentUser;
        } 
        else
        {
            return null;
        }    
    }
    
    var result = '';
    function getPropertyValue(userProfileDoc,propertyName)
    {
        try
        {
         NWF$(userProfileDoc.responseXML).find("PropertyData > Name:contains(" + propertyName + ")").each(function() 
          {   
              result = NWF$(this).parent().find("Values").text();
              if(result != '')  
              {
                return false;
              }
          });
          return result;
         }
         catch(e)
         {
            return '';
         }
    }

    function getLanguages(userProfileDoc)
    {
        var languages= getPropertyValue(userProfileDoc,'SPS-MUILanguages');
        
        return languages;
    }

    createTranslationDictionary();
    getSiteUrl();

    // Get User Info   
     var userProfile = getUserProfileInfo();
     var userLanguages = getLanguages(userProfile);
     var saLanguages = userLanguages.split(',');
     
     var choiceObj = NWF$('#' + varLanguagesID);

     choiceObj.find('option').remove().end();
 
     var bSelected = true;
     for(var iLang=0;iLang<saLanguages.length;iLang++)
     {
       if(iLang > 0)
         bSelected = false;
       choiceObj.append(new Option(saLanguages[iLang], saLanguages[iLang], bSelected , bSelected ));
     }

    if(saLanguages[0] != 'en-US')
      changeLanguage(saLanguages[0]);
  
     choiceObj.change(function() 
     {      
        changeLanguage(choiceObj.val());
     });

  function changeLanguage(language)
  {
       var lists = new SPAPI_Lists(sSiteUrl + SP.ClientContext.get_current().get_url());
       var items = lists.getListItems(
                          'NFTranslations',// SharePoint list name
                          '',        // SharePoint list view name (for default leave blank)
                          ''+language+'', // query
                          '', // which field/s to view
                         0,  // RowLimit
                         ''  // QueryOptions
                         );

     if (items.status == 200)
     {
       var rows = items.responseXML.getElementsByTagName('z:row');
   
       for(x=0; x < rows.length; x++)
       {
          var listLabelID = rows[x].getAttribute('ows_Title'); // query field + ows prefix
         var listTranslation = rows[x].getAttribute('ows_Translation'); // query field + ows prefix
         translations[listLabelID] = listTranslation;
         var node = NWF$('.' + listLabelID).find('.nf-label-control');
         node.text(listTranslation);
       }
     }
     else
     {
       alert('There was an error: ' + items.statusText); // else alert error message
     }
  }
 
  function createTranslationDictionary() 
  {
    translations['ml_title'] = '';
    translations['ml-leavetype'] = '';
    translations['ml-description'] = '';
    translations['ml-starttime'] = '';
    translations['ml-endtime'] = '';
    translations['ml-attachments'] = '';
  }
 
  function getSiteUrl()
  {
    var ctx = new SP.ClientContext();
   
    var site = ctx.get_site();
    ctx.load(site);
    ctx.executeQueryAsync(function(s, a)
    {
      sSiteUrl = site.get_url();
    });
  }
});

There are probably ways of improving the Javascript above, but I'm happy with it and it seems to be quite fast in getting the data I need.  Potentially, if the NFTranslations list grows quite large to handle many languages and many labels, querying it might take a hit.  But it shouldn't be that bad.

The other thing to note, is that to use the Javascript above you need the SPAPI libraries and you need to make sure you reference them in the Form Settings of the form you're building.

Javsacript Includes

When you download the form below, you'd need to update the includes with the correct paths.

Videos

Description of the Form Configuration and Design

 

Multilingual Nintex Form in Action

Downloads

Nintex Forms 2013

Download the Form - Download and import it into the Form Designer Page

Gravatar
Posted by Vadim Tabakman Thursday, November 21, 2013 10:35:00 AM Categories: Javascript Nintex Nintex Forms Nintex Forms 2013
Copyright Vadim Tabakman
Rate this Content 0 Votes

Comments

Tuesday, December 31, 2013 12:58:16 PM
Sydney

re: Nintex Forms - Multilingual Form

Hi Vadim,

 

When I tried to reference those js links inside the Custom Javascripts Includes box, I can't publish the form. The publishing window keeps running and never finishes. My environment is SharePoint 2013 Online. Do you know why?

 

Thanks,

Sydney.

Tuesday, December 31, 2013 1:14:42 PM

re: Nintex Forms - Multilingual Form

Hi Sydney,

when you say online, do you just mean a hosted 2013 or do you mean Office 365?

I've only tried this with an on-prem installation of SP2013.

Does the form publish if you just have the JS includes or is it breaking on the custom JavaScript itself?

cheers,

Vadim

Friday, October 3, 2014 5:16:56 AM
Cedric
Gravatar

re: Nintex Forms - Multilingual Form

Great post - thanks! You’ve shown us how to change the labels of the fields. My client also need to translate the controls. For example for a choice fields the possible answers could be : Blue, Red, Green. How would you do that ?

For example the label would be “color” – and we can change it with your tricks to “Couleur” in French. But how do we change the values of the choice control to “Bleu, Rouge, Vert” ?

Friday, October 3, 2014 8:23:12 AM

re: Nintex Forms - Multilingual Form

Hi Cedric,

that's harder to do. You'll need to find the choice control using JavaScript.  What you can do, is assign it's ID to a JavaScript variable in the settings of that control (in Advanced).

Then you'll be able to find the control with some JavaScript like this :

NWF$('#' + myIDVariable)

Then,  you'll need to iterate through each OPTION, pull out the value, figure out what it is and replace it with the translation.  That, I don't know how to do off the top of my head.

cheers,

Vadim

Friday, October 23, 2015 2:48:41 AM
Manuel
Gravatar

re: Nintex Forms - Multilingual Form

Hi Vadmin,

 

does the translation work for buttons too?

 

cheers, Manuel

You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register

Statistics

  • Entries (279)
  • Comments (1769)

Categories