Intro
SF Translation Dialog – simple fields 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 only have 1 or 2 fields of an object need to be translated.
- You need to translate several fields into multiple languages. Please use Translation Dialog-Multifields.
Structure
One field of an object need to be translated:
Two fields of an object need to be translated:
For Translation Table, it support standard Table vertical scrolling.
Behavior & Interaction
The text field translation pattern is intended to support the users to:
- Initially maintain a business object in their language.
- Translate the object into the needed languages
- themselves,
- via a peer or
- via an external translation bureau.
1. The translation task is moved to a pop-up. Click Configure Translations Button (global icon).
2. The pop-up is opened by clicking the global icon button. See the information and fill the language need to be translated.
3. Show message toast when Click Confirm button. (TBDLi, Theresa)
1. Click Configure Translations Button.
2. The pop-up is opened by clicking the Configure Translations Button. See the information and the language need to be translated, and then fill the value.
In assignment, admin only need to translate field name and input prompt for custom fields.
3. Click Save button.
- User can click Tab to focus on Translation Table.
- User can click Up or Down, then press Enter to focus on each rows of the table. User 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 the English version does not exist, the original text language will be shown as default. Follow by MDF (TBD- Need more discussion with PM Yang, Lorna and Piao, Junjie (PJ))
Parameters
- For Dialog parameters, please refer to: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698913313
- For Responsive Table Parameters, please refer to:https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2848852795
- For Icon Button parameters, please refer to: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698912599
Responsiveness and Adaptiveness
Accessibility
Jira ticket: A11Y Design Review for Assignment Customized fields and Observer role
A11y Annotation link: https://www.figma.com/file/3yskMkYZmmV5UjJngbzLnc/b2211-Assignment?node-id=2%3A60
Examples (Application-specific examples)
One field: https://www.figma.com/file/HuMVUnqbWNsDWINmGOKGRJ/Assignment_Web_2202-2211?node-id=0%3A1
Two fields: https://www.figma.com/file/3yskMkYZmmV5UjJngbzLnc/b2211-Assignment?node-id=1153%3A38798
Resources
Here are design and prototype links:
Observer role (low priority): https://www.figma.com/proto/3yskMkYZmmV5UjJngbzLnc/b2211-Assignment?node-id=1154%3A106607&scaling=scale-down&page-id=1153%3A38799&starting-point-node-id=1154%3A106279&show-proto-sidebar=1
Customized fields: https://www.figma.com/file/3yskMkYZmmV5UjJngbzLnc/b2211-Assignment?node-id=1153%3A38798
Observer role (low priority): https://www.figma.com/file/3yskMkYZmmV5UjJngbzLnc/b2211-Assignment?node-id=1153%3A38799