Mutli-lingual Page Layout Text for Site Variations Part 1 - Using Javascript

For my French Variation, I need the above to look like this;

Subtle but important difference N’est-ce Pas? ;) 

OK, the earlier approach (in earlier article) of using the Sharepoint Language pack text isn’t suitable in this case. There is no suitable text available (though you can create your own language resource files as detailed in Part 2 here http://www.the-north.com/sharepoint/post/Mutli-lingual-Page-Layout-Text-for-Site-Variations-Part-2---Using-Resource-Files.aspx ). 

We need to amend the title text as soon as the Page Layout can determine what Variation Language it is being loaded into. JavaScript is how we will achieve this. 

My Purpose heading in the page layout looks like this; 

<p class=heading3>Purpose</p> 

I’m going to keep the English text in there as a fail safe measure. If my script ever fails for whatever reason at least I’ll have a title of some description in there. (Plus I have 5 site variations that are English speaking so at least someone will be happy!). 

The Microsoft Sharepoint Designer Team Blog yields a neat little JavaScript function called getTagFromIdentifierAndTitle() to find page elements here.  

To make sure I can find my Heading I place it into a DIV; 

<div title="purpose"><p class=heading3>Purpose</p> </div> 

Now it’s time for some custom coding.  

Tell Sharepoint to execute your function;

_spBodyOnLoadFunctionNames.push("fillDefaultValues"); 

Create your function; 

function fillDefaultValues() { 

Determine the variation you are on by looking at the page url and then set your language text; 

if (location.href.search('/FR/') > 0)

{     

purposeVal = 'Objectif';     

processVal = 'Processus';} 

Use the neat little Microsoft function to find that title DIV

var assignedToInput = getTagFromIdentifierAndTitle("div", "", "purpose"); 

…then push in the language text you set above;

assignedToInput.innerHTML = "<p class=heading3>"+purposeVal+"</p>"; 

Your language text is now set! The solution has deliberately been kept simple, and has some shortcomings; 

1. The method of finding the Variation by looking at the url isn’t exactly hi-tech! If your Variation Labels conflict with other urls in your site hierarchy, you’re sunk.
2. The Language text has been hard coded into your Javascript. If you want to do anything more ambitious, it’s going to be a maintenance overhead.

 However, in 95% of cases the simple solution will work fine. 

Here is the complete code. I suggest the script is placed into the top of the main content placeholder. 

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("fillDefaultValues"); 

function fillDefaultValues() { 

var purposeVal = 'Purpose';

var processVal = 'Process'; 

if (location.href.search('/FR/') > 0){     

purposeVal = 'Objectif';     

processVal = 'Processus';} 

var assignedToInput = getTagFromIdentifierAndTitle("div", "", "purpose");

assignedToInput.innerHTML = "<p class=heading3>"+purposeVal+"</p>"; 

var assignedToInput = getTagFromIdentifierAndTitle("div", "", "process");

assignedToInput.innerHTML = "<p class=heading3>"+processVal+"</p>";} 

function getTagFromIdentifierAndTitle(tagName, identifier, title) {  

var len = identifier.length;  

var tags = document.getElementsByTagName(tagName);  

for (var i=0; i < tags.length; i++) {    

var tempString = tags[i].id;    

if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) ==  tempString.length - len)) {    

   return tags[i];    

}  

}  

return null; }

</script>