Dictionary Service in Sitecore-JSS

A dictionary of static words that needs to be translated is frequently required for multilingual apps. Typically, these include of elements like footers, global navigation items, form labels, and more.

For the purpose of retrieving application-specific translation dictionaries via the Sitecore Dictionary Service, the Sitecore JavaScript Rendering SDK (JSS) offers an API.

An API endpoint is offered by Sitecore Headless Services to retrieve Dictionary data that is specific to a given application.

Dictionary API endpoint

The Dictionary API endpoint is formatted as follows:

/sitecore/api/jss/dictionary/<app>/<language>/        

Where

• app: The application or website name for which the dictionary should be retrieved.
• language: The language for which to obtain the dictionary.

e.g. The following is the response to a request made to https://sc103sc.dev.local/sitecore/api/jss/dictionary/ReactJssApp/en/:

{
    "lang": "en",
    "app": "ReactJssApp",
    "phrases": {
        "ContactUs": "Contact Us",
        "Documentation": "Documentation",
        "Styleguide": "Style Guide"
    }
}        

JSS Sample App

Typically, we start with?example JSS?apps and dictionary service artifacts that come with it. Dictionary service factory (src/lib/dictionary-service-factory.js) is used in React-JSS to initialize and build dictionary Api instances in order to fetch translated data.

To retrieve dictionary phrases for the active application, the Dictionary Service requires a root item ID. You can give the root item ID in dictionary-service-factory.js (rootItemId: '{GUID}) if your Sitecore instance has only one JSS App; if not, the service will use GraphQL and the app name to determine the root item for the active JSS App.

Default, you might observe that your JSS application, which was built using the Sitecore starting template, is requesting data from /sitecore/api/dictionary each time a page loads.

Knowing that Sitecore dictionaries are pretty static and that client-side queries are made regardless of whether your application is running headless or integrated with SSR,?it is not just an ideal choice.

Upon application startup, we retrieve the translated sentences from the src/i18n.js file. The Sitecore context language parameter is passed when calling this from the index.js file.

Note: If the website supports only one language, we should comment out this line.

How To Use

It's very easy to use dictionary contents in our code. To utilize it, import the i18next in your component and simply pass the dictionary entry key to apply the translated phrase based on selected language.

In following example, line 3 has import statement and on line 7 we have used translated content.

Please follow the documentation to get more understand of Dictionary API.

Thanks