Using the Interactive Localized Text Editor

Owned by Phillip Hanegan
Last updated: Sept 08, 2020
5 min read

Instead of searching through a list of locale keys, you can add the query string parameter ?langdebug=true to your EmpowerID web application URL, and interactively create or edit keys directly on the text as it appears in the page.

Once enabled, the Locale Key Editor Enabled info box provides you with information on how to use the editor.

 

There are three things that you can accomplish using this editor.

  • Create new keys — This is for use by developers who are adding new text to the UI. Developers can use this shortcut to add a key to correspond with a value in their code.

  • Edit localized values for existing keys — This is for use by administrators or authorized users who are adding translations of the value for other languages or editing existing translations.

  • Edit localized values and add keys — This is for use by administrators or authorized users who are adding translations of the value for other languages when keys do not yet exist in the database.

In this topic, we explore how to add or edit localized text for existing keys and how to add keys for existing localized text. We cover how to create new keys in the developer documentation.

Each person can set their Preferred Language by clicking the globe next to My Cart and selecting from the languages supported in the organization.

How to enable the Locale Key Editor

When you navigate to other EmpowerID pages with the Locale Key Editor enabled, the query string stays in the URL so that you can continue localizing other pages. So you can start off by appending the query string to the main entry point of your EmpowerID site like this: https://sso.empoweriam.com/UI?langdebug=true

  1. Navigate to the EmpowerID page with text that you want to localize, and insert the query string parameter ?langdebug=true in the URL between /UI and #, in place of the slash. For example:

    https://sso.empoweriam.com/UI/#Common/Find/Person becomes https://sso.empoweriam.com/UI?langdebug=true#Common/Find/Person

  2. The Locale Key Editor Enabled info box appears, and all localized strings are highlighted in yellow, or in orange if a localized value exists in the code, but no key exists in the database. 

     

  3. To see the locale key, hover your mouse over any text that is localized (highlighted in yellow).



How to add or edit localized text for existing keys

  1. While pressing the Ctrl key, click any yellow highlighted text.


    You should see the clicked text highlight change to green and an “Edit an existing locale key” dialog open.

     

  2. The default locale is English, so the Localized Value here is "People." You can customize this value. For example, your organization might prefer the term "Associate." Do do that simply replace the Localized Value with the preferred term and click Save. Do not change the Key Name field, as this is what connects the value to the proper place in the UI.



  3. To provide a translated value for another language, click the Locale drop-down and select the desired language.

     

  4. In the Localized Value box, enter your translation and click Save.

  5. Once that language has a translation, you can choose another locale to translate. When you are finished, click Close. The translated text is highlighted green to show that it was the last edited key.

To check your work, you can append a language query string parameter to the base URL for any page in the web application to force it to display the page in that language.

To display all pages of the Web application in a specific language, append the following to the Home page URL:

?lang=<ISO 639 culture code>-<ISO 3166 subculture code>

For example: https://sso.empoweriam.com/UI/?lang=ja-jp where sso.empoweriam.com is the FQDN of the EmpowerID Web server in your environment, and ja-jp represents the ISO settings for the locale.

EmpowerID then appends that parameter to each page of the Web application until it is removed from the URL or the user session ends so that any pages you navigate to are displayed in the specified language.

How to localize a value and add the key to the database

  1. While pressing the Ctrl key, click any orange highlighted text.


    The clicked text highlight changes to green to indicate that it is being edited, and the Change or update a locale key dialog appears.

     

  2. Click Save. The localized text should now be in the database/

To close the Locale Key Editor

  1. Replace the query string parameter ?langdebug=true with a slash: / and press Enter. (Or simply navigate to another page.)

  2. The Locale Key Editor Enabled info box disappears and the highlights are removed from the text.

IN THIS ARTICLE