Let the Editor translate the site using a page in EPiServer CMS instead of using external resources

In my last blog post, http://world.episerver.com/Blogs/Eric-Pettersson/Dates/2013/2/Example-of-baseclass-and-access-to-StartPage-in-your-CMS-7-projects/, I explained how you can access the startpage as strongly typed so that you can access the user defined properties on startpage on any pagetemplate. In this blog post I will try to explain how you can use a page in EPiServer CMS to translate your text in code instead of using a external resource like the good old languange files in EPiServer.

When using a page, instead of xml-files, we can give the responsibility of translating the website to the editor. Most of the time we work with xml-resources and therefore we, developers, are responsible for translating the website. This will cost the customer much more when the like to globalize the website. A solution to this is to use a page in EPiServer CMS and let the editor globalize the page in any language they like.

Since this is not my own idea I will give credit to the one that came up with the idea, Mattias Olsson from CGI – Gävle. Thank you very much for beeing an awsome developer! Since then I have used this in all my projects instead of using the xml-files.

Create a new PageReference and PageType

We extend the StartPageType with a new property of type PageReference and add a new pagetype, TranslatePage.

Code startpage:

Create a public PageData object of type TranslatePage using the new Get<>.

   1: private TranslatePage mTranslatePage;

   2: /// <summary>

   3: /// Global translation page for the web site. Used instead of language xml files.

   4: /// </summary>

   5: public TranslatePage TranslationPage

   6: {

   7:     get

   8:     {

   9:         if (mTranslatePage == null)

  10:         {

  11:             if (!PageReference.IsNullOrEmpty(TranslationPageLink))

  12:                 mTranslatePage = DataFactory.Instance.Get<TranslatePage>(TranslationPageLink);

  13:         }

  14:  

  15:         return mTranslatePage;

  16:     }

  17: }

Code TranslatePage

Just an empty definition of a PageType. Add your lables that needs to be translated.

   1: [ContentType(DisplayName = "TranslatePage", GUID = "f26fe705-780d-4bf0-90fa-66dba465e0a3", Description = "")]

   2: public class TranslatePage : PageData

   3: {

   4:     

   5: }

Extend our templates with our own base class

In your base class for templates we now extend the functionality with the TranslatePage, read my last blogpost for more information: http://world.episerver.com/Blogs/Eric-Pettersson/Dates/2013/2/Example-of-baseclass-and-access-to-StartPage-in-your-CMS-7-projects/

   1: /// <summary>

   2: /// Global translation page

   3: /// </summary>

   4: public TranslatePage TranslationPage

   5: {

   6:     get

   7:     {

   8:         if (StartPage.TranslationPage == null)

   9:         {

  10:             throw new EPiServerException("Translation page is not defined on start page.");

  11:         }

  12:  

  13:         return StartPage.TranslationPage;

  14:     }

  15: }

When this is done we can now access our propertys on the TranslationPage with:

   1: TranslationPage.MyLabel;

If we are kind to our editors we can also use a fallback, either with some external resource like xml or just add a value if empty:

   1: TranslationPage.MyLabel ?? "Text that you can translat in episerver";

Finally we have to create a new page inside EPiServer based on TranslatePage and set the property on StartPage to the new page for translation. When that is done we can use the page for labels and other information that needs to be translated but is not a part of a ordinary page, for instance labels for search.