Sitecore 8.2 Dictionary Fallback

An important topic while working with Sitecore is how to handle different languages for the websites.

For example, we have a website that supports the English and Russian versions, all labels are stored in a local dictionary, also we have a global fallback dictionary that has just English version, so if there are no items in the local dictionary in Russian we going to use the Global Dictionary and render English labels.


First of all, we need to add Russian language and set the “Fallback Language” field in the language definitions.

Now we need to create a Global Domain item (/sitecore/templates/System/Dictionary/Dictionary Domain) and a Global Dictionary Entry(/sitecore/templates/System/Dictionary/Dictionary Entry). Each Dictionary Entry item has two fields: Key and Phrase.  Key is a Shared Field which means that the field is shared across all language and number versions and is not meant to be different across versions.  The Phrase field is a multiline text field and is an Unversioned Field, meaning it can differ across language versions.

Do the same for our local dictionary, but set the ‘Fallback Domain’ field to the Global Dictionary Domain

And create a Russian version of the Dictionary Entry:

Now we need to configure the Sitecore to use the Local Dictionary:

<?xml version="1.0"?>

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">

  <sitecore>

    <sites>

      <site name="website">

        <patch:attribute name="dictionaryDomain">Local Website Dictionary</patch:attribute>

      </site>

    </sites>

  </sitecore>

</configuration>

</configuration>

Below is a simple peace of code, it should show us a Title from the Local Russian dictionary and a Description from the Global English dictionary

<div>@Sitecore.Globalization.Translate.Text("Title")</div>
<div>@Sitecore.Globalization.Translate.Text("Description")</div>

It doesn’t work yet, but here is the trick: we just need to enable 2 options in the Global Dictionary Entry and the option “Enforce Version Presence” works as a trigger, so you can even clear the cache then uncheck it, save and it will work again. For me it’s a bug and probably I will do additional investigation soon.

Below is what we have now:

Setup Angular 2 and Typescript in Sitecore Project

It is detailed instruction on how to setup Angular 2 and Typescript in existing Sitecore project. For this purposes I’ve created a simple Sitecore solution, you can download it from here https://github.com/kosty78/SimpleSc and setup Angular 2 by following my instructions. The solution has TDS and Web projects with simple layout and test control.

Also I’ve checked in solution with configured Angular 2, so you can download it, restore all packages and run https://github.com/kosty78/SimpleScWithAngular2

My Environment:

• VS 2015 Update 3
• Sitecore 8.1
• NodeJS 6.3 https://nodejs.org/en/

First of all, please install the ‘Package Installer’ it will help us to manage JS packages:

·        

     Right click on the Project(SimpleSc.Web) and chose ‘Quick Install package’

Enter ‘angular2’ and click ‘Install’

Use the Quick Installer again and install

• rxjs
• es6-shim
• es6-promise
• gulp
• systemjs

Make all folders visible and you will see new folder in the project – ‘node_modules’

Now we need to setup the Typescript - add new folder ‘ts’ and 2 typescript files: boot and component

Add Typescript json configuration file and replace the text:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "target": "es5",
    "outDir": "static/scripts/js"
  },
  "compileOnSave": true,
  "watch": true,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Into boot.ts add:

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './component'

bootstrap(AppComponent);

Into Component.ts add:

/// 
import {Component} from 'angular2/core';

@Component({
    selector: 'angular2',
    template: `{{title}}

`
})

export class AppComponent {
    title: string;

    constructor() {
        this.title = 'Angular 2';
    }
}

Now we need to copy necessary js files to our folder, add Gulp configuration file

And replace the text in the file:

var gulp = require('gulp');

gulp.task('copy:libs', function () {
    return gulp.src([
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/systemjs/dist/system.src.js'
    ]).pipe(gulp.dest('static/scripts/vendor/ang'))
});

gulp.task('copy:rx', function () {
    return gulp.src([

        'node_modules/rxjs/**/*.js'

    ]).pipe(gulp.dest('static/scripts/vendor/ang/rxjs'))
})

gulp.task('copy:angular', function () {
    return gulp.src([
        'node_modules/angular2/**/*.js',
    ]).pipe(gulp.dest('static/scripts/vendor/ang/angular2'))
});

gulp.task('copy:symbol-observable', function () {
    return gulp.src([
        'node_modules/symbol-observable/**/*.js',
    ]).pipe(gulp.dest('static/scripts/vendor/ang/symbol-observable'))
});


gulp.task("copy", ["copy:libs", 'copy:rx', 'copy:angular', 'copy:symbol-observable']);

Go to the task runner and start the copy task

Now we need to configure system.js, create new javascript file setup.systemjs.js in static/script/js/ and add the text below into the file:

System.config({
 defaultJSExtension: true,
 map: {
  app: 'static/scripts/js',
  rxjs: 'static/scripts/vendor/ang/rxjs',
  angular2: 'static/scripts/vendor/ang/angular2',
  'symbol-observable': 'static/scripts/vendor/ang/symbol-observable'
 },
 packages: {
  app: {
   defaultExtension: 'js',
   format: 'register'
  },
  rxjs: {
   defaultExtension: 'js',
   format: 'cjs'
  }
  ,
  angular2: {
   defaultExtension: 'js',
   format: 'cjs'
  },
  'symbol-observable':
   {
    defaultExtension: 'js',
    main: 'index.js'
   }
 }
});

System.import('app/boot').then(null, console.error.bind(console));

Now we need to add the references in the Layout file : SimpleLayout.cshtml

    <script src="static/scripts/vendor/ang/es6-shim.min.js" type="text"></script>
    <script src="static/scripts/vendor/ang/system-polyfills.js"></script>


    <script src="static/scripts/vendor/ang/angular2/bundles/angular2-polyfills.js"></script>
    <script src="static/scripts/vendor/ang/system.src.js"></script>
    <script src="static/scripts/vendor/ang/rxjs/Rx.js"></script>
    <script src="static/scripts/vendor/ang/angular2/bundles/angular2.dev.js"></script>
    <script src="static/scripts/js/setup.systemjs.js"></script>

Add post build event to copy necessary angular2 files into sitecore web directory

xcopy "$(ProjectDir)Static\scripts\vendor\ang" "c:\Sitecore\Sites\sc8\Website\Static\scripts\vendor\ang" /i /e /y

Now rebuild and run the Sitecore and preview the Test page

Wow, it Works!!! Now you can research Angular 2 features! )