Language / Translations

The HybridForms App supports three options of language control.

Info

Currently fully supported are English and German.

App Settings

The chosen app language is applied to all general parts of the app that are no form definition contents. The user can choose the app language on the app settings page.

Settings page - Language

Form Definition

Furthermore, the language of the form definition can be specified. This is done server side on the form definition settings page in the template area.

Template settings - Language/culture

Info

The form template language definition affects the default behaviour of the form controls "DatePicker", "TimePicker" and "NumericField" unless any explicitly defined options or form translations are provided.

Form Translation

Additionally form translations can be used to provide a form in different languages to the user.

In the form template use placeholders for your content that should be translated. Define these placeholders by enclosing the placeholder-id with curly brackets and mark the id with an at-sign.

    <var data-hf-name="Title">{{@Title}}</var>
    <li data-hf-title="{{@StructureTitles.Controls}}">...</li>

Provide the translations for each placeholder inside the "translation.json"-file. Include this translations file in your form template folder that you upload to the server.

{
    "keys": {
        "de-DE": {
            "Title": "Demo Formular",
            "Page1.Label": "Seite 01",
            "Page1.FirstNameCtrl": "Vorname",
            "staticHTML": "<div class=\"foo\">This is static html</div>"
        },
        "en-US": {
            "Title": "Demo form",
            "Page1.Label": "Page 01",
            "Page1.FirstNameCtrl": "First name",
            "staticHTML": "<div class=\"foo\">This is static html</div>"
          },
        "es-ES": {
            "Title": "formulario de demostración",
            "Page1.Label": "página 01",
            "Page1.FirstNameCtrl": "Nombre de pila",
            "staticHTML": "<div class=\"foo\">Esto es html estático</div>"
        }
    },
    "metadata": {
        "Title": {
            "remark": null,
            "reference": "Form title"
        },
        "Page1.Label": {
            "remark": "A comment to this translation key",
            "reference": "Page 1 Title"
        },
        "Page1.FirstNameCtrl": {
            "remark": "A comment to this translation key",
            "reference": "Page 1 | Tab 1 | block-id"
        },
        "staticHTML": {
          "remark": "static html that is included on page 1",
          "reference": "Page 1 | Tab 1 | block-id"
        }
    },
    "langSchema": [
        "de",
        "en",
        "es"
    ],
    "langCulture": [
        "de-DE",
        "en-US",
        "es-ES"
    ],
    "langLabels": [
        "Deutsch",
        "Englisch",
        "Español"
    ],
    "langDefault": "es",
    "langPDF": "user-defined",
    "schemaVersion": "2.0.0"    
}

The JSON-file has to contain the key-value pairs "langSchema", "langLabels", "langCulture", "langDefault", "langPDF", "schemaVersion" and the "keys" and "metakeys" (optional) with all of the defined text element placeholders.

Key	Value	Description
langSchema*	["de","en","es" ]	Provide an array of the language abbreviations for any language your form should be translated into.
langLabel*	["Deutsch", "English", "Español"]	Provide an array of the language names for any language your form should be translated into.
langDefault*	"en"	Provide the default language of a new created form item.
langCulture*	"["de-DE", "en-US" ]"	Provide an array of the HTML language codes.
langPDF	"user-defined"	Define the language the form pdf should be created in. You can either set this property to one of the defined lang schemes or to user-defined. If the latter option is chosen the pdf is created in the language the user has used to fill out the form.
keys	{ "de-DE": { "Title": "QA Testformular 1", "ShortTitle": "QA Short Title 1", ... }, "en-US":: { "Title": "QA Testformular 1", "ShortTitle": "QA Short Title 1", ... }}	Provide the text variants for all of your placeholders.
metakeys	{ "Title": {"remark": "the form title", "reference": "form title" }, {...}}	Provide context information to your translation keys. This property is optional.
schemaVersion*	"schemaVersion": "2.0.0"	Define the schema version of the translation.json file. Please use "2.0.0" if you use the schema that is documented here.

Info

Please keep in mind the sequence inside the values: the defined langSchema ["de, en, fr" ] must be matched by the placeholder values ["de-DE", "en-US", "fr-Fr" ] for a correct translation!

warning

If you define html or double-quotes in your translation key and this translation key is used in data-win-options of a control replace the quots with the according html entity """. Another option would be to use the html-pipe (see below).

Translation Pipes

Use pipes to transform translation string outputs. Pipes are simple functions to use in translation placeholders. Add the pipe symbol ("|") with a pipe function keyword after your translation key.

Usage:

    <var data-hf-name="Title">{{@Title | toUppercase}}</var>
    {{@staticHTML | escape}}
    <li data-hf-title="{{@StructureTitles.Controls}}">...</li>

Pipe Function	Example	Description
escape	{{@staticHTML | escape}}	If you include translation content with html or quotes within data-win-options add a "escape" pipe. Note: don´t use html pipes outside of data-win-options.
toUppercase	{{@staticHTML | escape}}	Transform the output of the translation to an uppercase string.
toLowercase	{{@staticHTML | escape}}	Transform the output of the translation to an lowercase string.