Creating Multilingual Adaptive Forms

Posted by

Creating multilingual Adaptive Forms is an easy exercise when compared to their older XDP-based counterparts.

First off – DO NOT CREATE MULTIPLE FORMS. In the days of fillable pdf forms, creating one form per language was common practice. Do not do this. ONE FORM. MULTIPLE LANGUAGES. EASY.

Create your form in your first deliverable language (likely your native language). In this example, we’re creating a sample form using the Basic out of the box template. The native language of the operating system and installation here is English.

To preview the above example, we render the form using the below preview URL. Note that this form is named “basic-hello-world” and is stored in a folder named “hello-world”. It is important to note as we will need to locate the translation files later on.

http://localhost:4502/content/dam/formsanddocuments/hello-world/basic-hello-world/jcr:content?wcmmode=disabled

When rendering the default form, the English language form is shown by default as the browser used to render the form was installed and configured in English.

To attempt to force the rendering of this form in French, we need to add the afAcceptLang=fr parameter.

localhost:4502/content/dam/formsanddocuments/hello-world/basic-hello-world/jcr:content?wcmmode=disabled&afAcceptLang=fr

In this case, we’ll still see the original English form as no additional language files have been created. The same is true when the form is rendered with a French browser. When the language is not detected, the form will fall back to its original default.

Adding localization

The first step to creating localized content is to ensure the server is configured to allow the generation and render of multiple languages. Got to http://localhost:4502/system/console/configMgr and ensure the language code is available for the additional language(s) you wish to support in the Guide Localization Service. For this example we’ll be adding translations for French (fr).

Now we’re ready for the initial translation of the form.

Head over to the Forms Manager interface:

http://localhost:4502/aem/forms.html/content/dam/formsanddocuments/hello-worldhttp://localhost:4502/aem/forms.html/content/dam/formsanddocuments/hello-world

Select the form, then from the top menu bar, click Add Dictionary.

You’ll be prompted to create a new translation project. Note that multiple forms can be added to one translation project. Below, we’ve named the translation project “Hello World Forms” and added a target language of “French(fr). If you require additional translations, add them to the project and then click “Done” on the top right of the interface.

When prompted, select “Open Projects”. If your current service pack does not open the projects from this prompt, go to http://localhost:4502/projects.html/content/projects to open the new project manually.

Select the project and open the project properties.

The project can also be opened directly via the project folder and name: http://localhost:4502/projects/details.html/content/projects/hello_world_forms

Once the project is initiated the dictionaries are created under the form assets container.

/content/forms/af/hello-world/basic-hello-world/jcr:content/guideContainer/assets/dictionary/fr/

The sling:key represents the text to be translated and the sling:message represents the translated text.

Do not edit the keys or message in CRX, there is an editor provided for this task. However, before we manually translate any of the text, let’s continue with the translation project.

In the Hello World Forms [FR] project, open the summary by clicking on the ellipsis on the Summary panel.

Once open, select the Advanced Panel. Update the Translation Method from Human Translation to Machine Translation then select Save and Close. You’ll note that Microsoft is defaulted as the translation engine. This is configured out of the box.

From the project menu, start the translation project.

This will start the automated translation and generation of the required dictionaries.

To view the location and status of the dictionaries, select the ellipsis of the Translation Job [FR].

In this example we have a single dictionary allowing one added language (French) to be rendered in addition to the default form (en) English.

With the presence of the new language file, we can attempt to re-render the Adaptive Form in French using the the added “afAcceptLang” parameter: localhost:4502/content/dam/formsanddocuments/hello-world/basic-hello-world/jcr:content?wcmmode=disabled&afAcceptLang=fr

Alternatively, switching your browser language should cause the default render to also display the form in French.

Switching FireFox to French in the language settings, will cause the default render http://localhost:4502/content/dam/formsanddocuments/hello-world/basic-hello-world/jcr:content?wcmmode=disabled to display the form in French without the added language parameter. To render the form in English with a French browser, we’re forced to add the afAcceptLang=en parameter.

Translation support with minimal effort

Updating Translations

To access the translation dictionaries, you may download, edit, and re-upload translated XLIFF files via the translation manager:

http://localhost:4502/libs/cq/i18n/translator.html

Any translations you wish to add or modify can be done directly inside the translator. If a 3rd-party translation service is to be used, XLIFF files can be downloaded and exchanged with your vendor and then re-uploaded as necessary.

Considerations

  • When exporting Adaptive Forms, the translations / dictionaries are embedded into the exported form packages. Be aware that if translations have been edited on a destination machine, they will be overwritten by the form package. Be certain that form maintenance and translations are coordinated.
  • Dropdown values MUST have a value / description entry if business rules or logic are applied to selected values. For example, if a dropdown menu contains two entries: “One”, and “Two”, these values would be translated and business logic and internal form rules that depend on these values will not work on translated forms. “One=One”, and “Two=Two” would have the proper translations applied with the values kept intact.
  • When translations are edited, the form cache may not be cleared. If you make modifications to a dictionary, make a minor modification to the main form to ensure the translations themselves appear when the form is rendered in the alternate language (adding and removing an object is suffice).
  • Ensure your form is designed is such that translated text flows properly. While this was a challenge with XDP-based forms using XLIFF (very rarely used), Adaptive Forms will flow automatically but the length and spacing of translated objects should be sufficiently quality assured.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s