How to set i18n translations for Style System | Community
Skip to main content
VeenaVikraman
Community Advisor
VeenaVikramanCommunity Advisor
Community Advisor
November 7, 2023
Solved

How to set i18n translations for Style System

  • November 7, 2023
  • 4 replies
  • 1185 views

Hi All

      I am trying to set translations for my dialog and style system in AEM as Cloud. While I am able to translate the dialog using i18n , the style system values are not getting translated. Any help is appreciated. 

 

TIA

Veena

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

Effectively translating style system values for your dialog in AEM as Cloud involves these steps:

  1. Ensure Proper JSON Structure: Verify the JSON file's structure aligns with the required format. The JSON should organize keys corresponding to style system properties for translation and values representing the translations in the desired language.

  2. Map JSON Properties to Style System Variables: Establish a connection between translated values and style system properties by mapping JSON keys to corresponding style system variables using data-* attributes.

  3. Utilize i18n for Translation Retrieval: Employ the i18n API to retrieve translated values from the JSON file. This involves using the I18n class to fetch the corresponding translation based on the current language setting.

  4. Apply Translated Values to Style System: Dynamically apply retrieved translated values to style system properties using JavaScript. This ensures UI elements reflect the translated style system values.

4 replies

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity Advisor
Community Advisor
November 10, 2023

Interesting usecase, any reason for Style system translations? Do you have authors from different regions use aem localized UI?

    VeenaVikraman
    Community Advisor
    VeenaVikramanCommunity AdvisorAuthor
    Community Advisor
    November 20, 2023

    Yes. Component Style System gets added as Styles Tab in the Component Dialog. But , how much ever I tried , except a text "None" nothing is getting picked from the JSON for the style system values. 

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity ManagerAccepted solution
      Community Manager
      November 23, 2023

      Effectively translating style system values for your dialog in AEM as Cloud involves these steps:

      1. Ensure Proper JSON Structure: Verify the JSON file's structure aligns with the required format. The JSON should organize keys corresponding to style system properties for translation and values representing the translations in the desired language.

      2. Map JSON Properties to Style System Variables: Establish a connection between translated values and style system properties by mapping JSON keys to corresponding style system variables using data-* attributes.

      3. Utilize i18n for Translation Retrieval: Employ the i18n API to retrieve translated values from the JSON file. This involves using the I18n class to fetch the corresponding translation based on the current language setting.

      4. Apply Translated Values to Style System: Dynamically apply retrieved translated values to style system properties using JavaScript. This ensures UI elements reflect the translated style system values.

      Kautuk Sahni
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        January 3, 2024

        @veenavikraman Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

        Kautuk Sahni
        A
        Adobe Employee
        adolfodepazvela-adobeAdobe Employee
        Adobe Employee
        March 13, 2025

        The style system's values cannot be translated; the i18n option to do so is not included in the code (${style.label}) found in /libs/cq/gui/components/authoring/styleselector/form.html. For versions below SP 22, at least.

         

        Terms & ConditionsAccessibility statement

        Loading footer...