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.

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.

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.

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.

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.

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.

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