Localize the audience criteria

Localizing audience criteria lets editors work with criterion labels, descriptions, and values in their own language, supporting multilingual editorial teams.

Translate criterion metadata

Translate criterion metadata such as DisplayName, Category, and Description by setting the LanguagePath property on the VisitorGroupCriterion attribute. This property points to a location in the language files where CMS looks for matching keys. When DisplayName, Category, or Description keys are found at that path, CMS uses the translated values in the UI.

Localize the client side

Client-side localization provides translated strings for custom criterion editor components. Custom components are described in Configure editor templates. This section covers the front-end localization functionality.

The component receives three localization-related properties:

initLocalization(path: string): any;
translationsLoaded: boolean;
localization(key: string, fallbackText?: string, values?: any[]): string

Call initLocalization with the path to the XML node to fetch, for example, initLocalization('path.to.xml.node'). This triggers a back-end call and stores the result in state. The translationsLoaded property indicates when the call completes.

Use the localize function to translate strings:

localize('path.to.xml.node')
localize('path.to.xml.node', 'My fallback text')
localize('path.to.xml.node', 'My fallback text', valuesToInsertIntoPlacholders)

The following code samples demonstrate localization with value interpolation:

<page>
  <amount>out of {0} pages</amount>
</page>

    
initLocalization('page');
const value = 10;
localize('amount', 'My fallback text', [value]) 
    
// Results in "out of 10 pages"

Localize enumeration

Enumeration localization translates Enum values in drop-down lists for multilingual editor teams. When using EnumSelectionFactory, add matching keys under the enumerators section of the language files. For an enum called EPiServer.Sample.Criteria.Answer, the keys look similar to the following code:

<enums>
  <episerver>
     <sample>
        <criteria>
           <answer>
             <yes>Oh yes!</yes>
             <no>No way!</no>
           </answer>
        </criteria>
     </sample>
  </episerver>
</enums>