Building Apps with Jigx

Localization

3min

If you want to offer users your solution in multiple languages, you can use localization built into Jigx. Every option that accepts string-based values (e.g. field labels) can be localized. If you see TextLocale popping up in IntelliSense, it can be localized. 
IntelliSense for localized values
﻿
Add Localization to the Jig
In the right screenshot you can see an example of a localized ﻿ being displayed on a mobile device with German language setting active.
There are two options for localization:
Static
You can map a string using a unique identifier to a localized string, that is stored in a language file (e.g. translations/de.jigx for german) in your solution directory.
If there is no translation found for the active device language, it will either fall back to your specified defaultMessage or if that's missing, to English.
Dynamic
In the right example the second field will display a different text (good morning or good afternoon) based on the time of the day and add another context variable (userName) as well
This can be achieved with values you add to the TextLocale option and ICU Message definitions in the translations file (translations/de.jigx)
You can find an online playground for ICU messages here﻿
Localized Jig (german)
﻿
localized-jig.jigx
title: 
  id: jig-name
  defaultMessage: Example (Fallback)
type: jig.default

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Localized Text (Static)
            value: 
              id: example-static
              defaultMessage: Good afternoon (Fallback)
        - type: component.entity-field
          options:
            label: Localized Text (Expression)
            value:
              id: example-dynamic
              values:
                name: =@ctx.user.displayName
                time: =$fromMillis($millis(),'[P]')
title: 
  id: jig-name
  defaultMessage: Example (Fallback)
type: jig.default

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Localized Text (Static)
            value: 
              id: example-static
              defaultMessage: Good afternoon (Fallback)
        - type: component.entity-field
          options:
            label: Localized Text (Expression)
            value:
              id: example-dynamic
              values:
                name: =@ctx.user.displayName
                time: =$fromMillis($millis(),'[P]')
﻿
Translations file 
All translation files have to be added to the translations folder in root and are following ISO 639-1 naming conventions (e.g. en for english, de for german, etc.)
translations/de.jigx
translations/en.jigx
example-static: 'Guten Nachmittag'
example-dynamic: '{ time, select, pm {Guten Nachmittag} am {Guten Morgen} } {name}'
jig-name: Beispiel
example-static: 'Guten Nachmittag'
example-dynamic: '{ time, select, pm {Guten Nachmittag} am {Guten Morgen} } {name}'
jig-name: Beispiel
﻿
You can find the above examples in the jigx-samples app on Github.
﻿

Updated 05 Jun 2023

Did this page help you?

Stories

Tips, tricks and shortcuts

Docs powered by Archbee

TABLE OF CONTENTS

Add Localization to the Jig