Hello Everyone,
I am creating this post to discuss various ideas regarding the project ‘Interactive Translation Builder.’
Key Realizations:
After gathering details about this project, I have identified the following key components:
1. The Form Builder consists of three primary components:
- Interactive Builder – Provides an intuitive UI that allows users to build forms, including pages, sections, questions, and validations.
- Schema Editor – Displays the schema of a form in a JSON editor, enabling users to edit the form structure.
- Form Renderer – Renders the schema using the form engine, displaying how the form will appear to the user.
2. Need for a Translation Component:
We need to develop a translation component that enables users to translate a form into a custom language by providing translation strings for each question, answer label, and other elements. This should allow users to preview the translated form without storing translations in the backend and also offer an option to download the translation file.
Identified Problem:
- The current translation process is not user-friendly and requires developer intervention.
- Translations are stored in the backend within a configuration folder.
- Translating a form currently involves creating a file in a specific format, placing it in the translation configuration folder, and restarting the O3 instance to apply the changes.
Proposed Solution:
We can create a translation component similar to the interactive builder that simplifies the translation process:
- The translation component will take the form schema (input schema, dummy schema, imported schema, new schema) as a prop and extract all translatable elements.
- It will provide user-friendly input fields to enter translation strings for each item.
- The component will generate a translation schema that conforms to the expected form structure.
- When previewing the form, the form renderer will allow users to view the form in their selected translation(s).
- Instead of sending just the schema to the form engine, the renderer will also send the corresponding translation schema based on the user’s selection.
- A download option for the translation file will be available, enabling users to store and reuse translations without backend storage.
Constraints & Considerations:
- I have not yet explored how the form engine processes the schema, which may pose a challenge since the engine currently only accepts the schema as a prop for rendering.
Looking forward to your thoughts and feedback @nethmi !