Use a Language selector

This tutorial demonstrates how to add a language selector in a designer's view. This selector will provide you with the functionality to select diferent culture defined in Sitefinity backend. For more information on selectors in MVC, see principles of using a content selector.

Adding a language selector

1. In your DesignerView.YourView.json file you have to add a scripts array. The content of the file should be similar to:

{ "priority": 1, "scripts": [ "Mvc/Scripts/Angular/angular-resource.min.js", "client-components/selectors/common/sf-services.js", "client-components/selectors/common/sf-selectors.js", "client-components/selectors/localization/sf-language-selector.js", "client-components/selectors/localization/sf-language-service.js" ] } ```

NOTE: For more information on the scripts that you must load, see List of selectors scripts.

2. In your designerview-yourview.js place the following snippet right before the definition of your custom view controller:

var designerModule = angular.module('designer'); angular.module('designer').requires.push('sfSelectors'); ``` 3. In your DesignerView.YourView.cshtml place the following tag somewhere in the html:

```html

```

The “sf-site” attribute is required for the selector. It will be used for loading the culture for the given site provided by this attribute. You can use the optional attribute “sf-culture” to access the selected culture. The value of this attributes are scope properties (“sfCulture and sfSite”) that you must have added in your widgets controller:

  public string Culture
  {
     get;
     set;
  }

  public string Site
  {
    get;
    set;
  }

The selector will not be rendered if you don’t supply a ‘sfSite’ attribute value. This particular selector works in its best mode in conjunction with site selector, where language selector will use the provide site for displaying the site’s cultures.

• The “sf-site” has the following JSON properties structure:

 {"CultureDisplayNames" : [values],
  "Id" : [Guid],
  "IsAllowedConfigureModules" : [false/true],
  "IsAllowedCreateEdit" : [false/true],
  "IsAllowedSetPermissions" : false,
  "IsAllowedStartStop" : false,
  "IsDefault" : false,
  "IsDeleteable" : false,
  "IsOffline" : false,
  "Name" : "site2",
  "SiteMapRootNodeId" : [Guid],
  "SiteUrl" : [Url],
  "UIStatus" : "[Online/Offline]"}

• The “sf-culture” has the following JSON properties structure:

{"Culture":["en"],
"DisplayName":["English"],
"FieldSuffix":["Value"],
"IsDefault":[true],
"Key":["english-en"],
"ShortName":["en"],
"SitesNames":["site1","site2"],
"SitesUsingCultureAsDefault":["site1","site2"],
"UICulture":["en"]}