Subscribe in a reader Mutli-lingual Page Layout Text for Site Variations Part 1 - Using Javascript

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

by JamieMcAllister 2/22/2008 12:20:00 PM

My Site Variations are still throwing up challenges. Recently I was asked to produce a Page Layout to be used on some of the publishing pages that would contain section headings. Producing a page layout is easy enough, but when it contains text you immediately have to think about how you will provide that text to the various variations in the right language. (You could have one page layout per language, but that would rapidly turn into a maintenance nightmare!).

 

This seems like an opportunity to showcase two ways of changing page layouts dynamically, which I'll be doing over two posts. Today will cover javascript, and part two will cover language resource files. Part two is probably the ideal technique for this particular problem, but todays javascript technique is suitable for a variety of problems and needs to be documented too!

 

Do make sure you read Part 2 of this article after this one, it's a much better solution for multi-lingual page layouts and can be found here; http://www.the-north.com/sharepoint/post/Mutli-lingual-Page-Layout-Text-for-Site-Variations-Part-2---Using-Resource-Files.aspx

 

OK, so what I start with is a page that looks like this;

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> 

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , ,

CMS | Sharepoint

Related posts

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

11/20/2008 8:33:43 PM

Powered by BlogEngine.NET 1.3.0.0
Theme by Mads Kristensen

About the author

Jamie McAllister Jamie McAllister
Manchester (UK) Based Consultant for Northridge Solutions Ltd.


Jamie McAllister Linked In

        
        
        
        
        
        
        

Calendar

<<  November 2008  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

View posts in large calendar

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008

Sign in

Disclaimer: The software and source code on this website is provided "AS IS"
with no warranties of any kind. The entire risk arising out of the use or
performance of the software and source code is with you.