Customizing the Localization of a Search Interface in Salesforce With the Legacy Interface Editor

The Coveo JavaScript Search Framework bundled with Coveo for Salesforce comes with standard user interface string translations for several languages (see Built-in Languages).

When a user configures a Salesforce Web user interface personal language (see Language Settings Overview and How to change to a different language for Salesforce?) to be one supported by the Coveo JavaScript Search Framework, Coveo for Salesforce search interfaces automatically open in that language. The English version of the search interface strings are always loaded and are used by default when a string is missing in the loaded localization. For unsupported languages, the search interfaces also appear in English by default.

Using the Coveo JavaScript Search Interface Editor, you can override existing localization, add translations for custom strings, and also add translations for unsupported languages or regional versions of a language.

To customize the localization of a search interface with the Legacy Inte

  1. In Salesforce, ensure the personal language for your Salesforce user is configured to use the language in which you want to customize the localization (see Language Settings Overview and How to change to a different language for Salesforce?).

  2. Open or reload your Coveo search interface.

    For Coveo JavaScript Search Framework supported languages (see Built-in Languages), most search interface strings should already appear in the selected language. Custom user interface strings and, obviously, search result content are not translated.

  3. Access the Interface Editor (see Accessing the Coveo Legacy Interface Editor in Salesforce).

    While the Interface Editor is open, the search interface strings appear in English.

    You can open the search interface in another browser tab, without the Interface Editor, to identify the untranslated strings for which you want to customize the localization.

  4. In the Interface Editor, access the localization panel:

    1. Select the Advanced Mode checkbox.

    2. If you already added a Localization component to your search interface, click All Components to expand the list of currently defined search interface components, and then click Localization.

      Otherwise:

    3. Click Hidden to show the list of available components with no visible elements.

    4. Click the Localization icon to add the component to your search interface and open the localization panel.

      While you can add more than one Localization component to a search interface, you should include only one where you define all your string translations.

  5. In the localization panel, add one or more languages:

    1. Click Add a Language.

    2. In the Add a Language panel, in the Language key box, enter the 2 or 4-letter language code for the desired localization, referring to the Salesforce supported language list (see Which Languages Does Salesforce Support?).

      • fr for French

      • zh_CN for simplified Chinese

    3. Click OK.

    4. Repeat previous steps when you want to customize the localization for other languages. You can always add languages later.

    You can delete a language from the localization panel by hovering over the language header and then clicking the Delete button that appears.

  6. Add a string localization:

    1. In the search interface, identify a string for which you want to customize the localization.

    2. In the localization panel, click Add a String.

    3. In the Add a String panel, what you enter in the Word box depends on the string characteristics:

      • Strings hardcoded in the HTML page:

        Enter the original English exact case-sensitive string.

        To confirm a string is hardcoded in the HTML page:

        1. At the top of the Interface Editor, click Code to access the HTML page code.

        2. Search for the string you want to translate to confirm it is present.

        You created a custom facet labeled KB Author. In the HTML code, the facet label is defined in the data-title attribute of a CoveoFacet component.

          <div data-field="@kbauthor" data-title="KB Author" class="CoveoFacet"></div>
        

        Enter KB Author in the Word box.

      • Strings coming from a CoveoJsSearch.js dictionary:

        Enter the case-sensitive JavaScript dictionary key.

        Here, you need some developer skills to find if a string comes from a JavaScript dictionary and what its key is:

        1. In the browser tab where the Interface Editor is opened for your search interface, open your browser developer tools to inspect the code.

        2. In the Sources tabs, locate and open the CoveoJsSearch.js file (illustrated below with Chrome developer tools).

          ChromeDevTools-C4SF-CoveoJsSearchJS1

        3. In the CoveoJsSearch.js file, search for the exact string for which you want to customize the localization.

        4. Look for an occurrence in the following format:

           (function () {
             var dict = {
               ...
               "StringKey": "The string you search",
               ...
             }
           })
          
        5. Enter the corresponding StringKey in the Word box.

    From the localization panel:

    • You can delete a string by hovering over the string key, and then clicking the Delete button that appears.

    • You cannot modify a string key, but you can add a new corrected one, enter translations, and then delete the original one.

    • The order in which strings are entered does not matter, as strings are replaced only when there is an exact case-sensitive match with the key.

  7. Back in the localization panel, add the translation for the added string for each language that you defined.

    Enter the string without quotes.

    Here are special cases to consider:

    • Dictionary strings containing variables {n}:

      Some original English JavaScript dictionary strings may be built dynamically by concatenating hard coded text with one or more string or numerical variables referenced with {n}, where n is 0 for the first variable, and incremented for other variables.

      When you create a translation for such a string, you should include the variable marker(s) present in the original string at the appropriate location in the appropriate order in your translated string.

      In the following original dictionary string, {0} refers to the filter name and {1} the query expression of this filter.

        "AreYouSureDeleteFilter": "Are you sure you want to delete the filter {0} with the expression {1}"
      

      For the string translated to Chinese, because of the language flow, the variable order must be inverse:

        "您是否确定要删除采用 {1} 表达式的筛选条件 {0}"
      
    • Dictionary strings containing singular and plural tags <sn></sn> <pl></pl>:

      An original English JavaScript dictionary string may contain singular/plural tags to dynamically change the string from a singular to a plural form, depending on the context such as the value of a numerical variable. Anything within the <sn></sn> tags only appears in a singular context, and similarly, anything within the <pl></pl> tags appears in a plural context.

      When you create a translation for such a string, if the target language also has a singular/plural concept, you should include appropriate singular and plural tags in your translation.

      In the following original dictionary string, the singular versus plural context depends on the number of available search results for the current query. Singular applies when there is no or only one result. Plural applies when there are two or more results.

        "Results": "Result<pl>s</pl>"
      

      In French your translation would be:

        Résultat<pl>s</pl>
      

      You can create easier to read singular and plural string forms by enclosing the whole string of each version with the appropriate tags:

        <sn>There is only one result</sn><pl>There are many results</pl>
      

      Rather than tagging each individual singular/plural difference:

        There <sn>is</sn><pl>are</pl> <sn>only one</sn><pl>many</pl> result<pl>s</pl>
      
  8. Make changes effective:

    1. In the Interface Editor, click Return, to close the localization panel.

    2. Click Draft, and then Publish Draft that also closes the Interface Editor.

  9. Back in the updated search interface, validate that your localization changes appear as expected.

    Repeat the previous steps to add other languages and add or modify string localization customizations.

  • The localization panel adds a script section at the bottom of the HTML page code as shown in the following example.

      <script type="text/javascript">
          String.toLocaleString({"fr":{"Year":"Année","Month":"Mois","friday":"Vendredi"},"es":{"Year":"Año","Month":"Mes","friday":"viernes"}});
      </script>
    

    From the Interface Editor Code tab, you can view and also edit the localization JSON when this is more efficient than using the localization panel, such as for renaming a string key.

  • If you want to add an unsupported regional version of a base language, an efficient way would be:

    1. Set Salesforce to the base language.

    2. Copy the list of key/strings pairs from the resource/[id]/coveov2__JsSearch/js/cultures/[baselang].js file.

    3. Paste the key/strings pairs in the script section at the bottom of the HTML page code.

    4. Change or add the region specific strings in the localization panel or directly in the code.

  • If you include JavaScript code in your HTML page, you can reference a localized string version as follows:

      'StringKey'.toLocaleString();