Intro

SF Translation Dialog - Multifields is a customized component that used for Admins to provide translations to certain descriptive and related fields. The user should be able to see which languages are fully translated.

Usage

You need to translate several fields into multiple languages.
The translating fields are related.
If you only have 1 or 2 fields to translate. Please refer to Translation Dialog- Simple Fields.

Structure

Parts

The Translation Dialog contains 2 parts:

The list of languages that need to translate.
The original value and translated value table.

Screen Shot 2022-08-31 at 15.02.39.png

Scrolling

For languages list, it support standard list vertical scrolling.

For Translation Table, it support standard Table vertical scrolling.

Behavior & Interaction

Click Translate Button:

Screen Shot 2022-08-31 at 15.06.33.png

2. The Translation Dilalog is open. Read the information by click the information button:

Screen Shot 2022-08-31 at 15.14.45.png

3. Navigate to the language that need to translate, and fill in the translated value:

If all fields have been translated in one language, there will be a "tick" icon on the language list to show it is fully translated.

4. Click Save and the translation is saved.

User can click Tab to focus on the language select list. And user can click Up or Down, then press Enter to navigate different languages.
User can click Tab to focus on Translation Table. And user can click Up or Down, then press Enter to focus on each rows of the table. User than click Tab to select each cells and focus on the translate text area and press enter to edit the translations.
Click Esc will exit the cell to back to parent row.
Please follow the Web Accessibility QuickGuide
If user didn't type in any translated value, the original value will be the default value to show on frontend for end users.