How to set i18n translations for Style System | Adobe Higher Education
Skip to main content
VeenaVikraman
Community Advisor
VeenaVikramanCommunity Advisor
Community Advisor
November 7, 2023
해결됨

How to set i18n translations for Style System

  • November 7, 2023
  • 4 답변들
  • 1215 조회

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

이 주제는 답변이 닫혔습니다.
최고의 답변: 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 답변

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 Advisor작성자
    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
      Adobe Employee
      kautuk_sahniAdobe Employee답변
      Adobe Employee
      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
        Adobe Employee
        kautuk_sahniAdobe Employee
        Adobe Employee
        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.

         

        약관 및 조건Accessibility statement

        Loading footer...