Mar 14, 2013
(3 votes)

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

In my last blog post,, 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:         }
  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: {
   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:

   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:         }
  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.

Mar 14, 2013


Mar 15, 2013 03:04 PM really looooooves visiting this page for some reason.
Most popular blog post ever, great success!

Eric Mar 15, 2013 04:06 PM

haha awsome :) and i thought it was such a great blogpost that someone actually read it :/

Please login to comment.
Latest blogs
Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog

404 Error on Static Assets Within an Optimizely plugin

Background With the move to CMS 12 and .NET 5/6, developers are now able to build Plugins and Extensions using Razor Class Libraries (RCL).  These...

Mark Stott | Sep 23, 2022