Localization (Translation)

4min
Solutions can easily be translated into any language by using the Text Locale property and creating a translation file with the translated text in 
﻿. On the device, use the Profile>Settings>Language option and select Device (Respect settings of the device).
To understand how to configure localization in 
﻿ see Localization﻿.
﻿Configuration options﻿
Core structure
﻿
text Locale
id - provide a unique identifier for the property to be translated. 
values - create context variables with values to use in the translation file. This is useful when creating dynamic content. 
defaultMessage - If no translation is found for the active device's language, it will either fallback to the specified defaultMessage or, if one is not specified, to English.
﻿Examples and code snippets﻿
Form localized in five languages with static values
In this example, the new employee form is translated into German, French, and Czech. To see the form in each of the languages change your device language setting to one of the configured languages.
Examples:
See the jig example in GitHub.
See the translation file examples in GitHub.
Chez, German, English
﻿
localized-form-static.jigx
de.jigx
fr.jigx
cs.jigx
title: 
  id: title
  defaultMessage: New employee form
icon: form

description: 
  id: description
  defaultMessage: Capture the new employee details
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=2374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.form
    instanceId: form-employee # used in the submit-form action to get context to the property instanceId
    options:
      children:
        - type: component.text-field
          instanceId: first_name # becomes the name of the column in table
          options:
            label: 
              id: first_name
              defaultMessage: First Name
              
             
        - type: component.text-field
          instanceId: last_name # becomes the name of the column in table
          options:
            label: 
              id: last_name
              defaultMessage: Last Name
                
        - type: component.number-field
          instanceId: contact_number # becomes the name of the column in table
          options:
            label: 
              id: contact_number
              defaultMessage: Mobile number
        
        - type: component.date-picker
          instanceId: date_of_birth # becomes the name of the column in table
          options:
            label: 
              id: date_of_birth
              defaultMessage: Date of birth
        
        - type: component.avatar-field 
          instanceId: photo # becomes the name of the column in table
          options:
            label: 
              id: photo
              defaultMessage: My profile
       
        - type: component.signature-field
          instanceId: signature # becomes the name of the column in table
          options:
            label: 
              id: signature
              defaultMessage: Sign 
        
        - type: component.email-field
          instanceId: email # becomes the name of the column in table
          options:
            label: 
              id: email
              defaultMessage: Email address
      
actions:
  - children: 
      - type: action.submit-form
        options:
          formId: form-employee
          provider: DATA_PROVIDER_DYNAMIC
          title: 
            id: create
            defaultMessage: Create Record
          entity: default/employee
          method: create
          goBack: previous
title: 
  id: title
  defaultMessage: New employee form
icon: form

description: 
  id: description
  defaultMessage: Capture the new employee details
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=2374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.form
    instanceId: form-employee # used in the submit-form action to get context to the property instanceId
    options:
      children:
        - type: component.text-field
          instanceId: first_name # becomes the name of the column in table
          options:
            label: 
              id: first_name
              defaultMessage: First Name
              
             
        - type: component.text-field
          instanceId: last_name # becomes the name of the column in table
          options:
            label: 
              id: last_name
              defaultMessage: Last Name
                
        - type: component.number-field
          instanceId: contact_number # becomes the name of the column in table
          options:
            label: 
              id: contact_number
              defaultMessage: Mobile number
        
        - type: component.date-picker
          instanceId: date_of_birth # becomes the name of the column in table
          options:
            label: 
              id: date_of_birth
              defaultMessage: Date of birth
        
        - type: component.avatar-field 
          instanceId: photo # becomes the name of the column in table
          options:
            label: 
              id: photo
              defaultMessage: My profile
       
        - type: component.signature-field
          instanceId: signature # becomes the name of the column in table
          options:
            label: 
              id: signature
              defaultMessage: Sign 
        
        - type: component.email-field
          instanceId: email # becomes the name of the column in table
          options:
            label: 
              id: email
              defaultMessage: Email address
      
actions:
  - children: 
      - type: action.submit-form
        options:
          formId: form-employee
          provider: DATA_PROVIDER_DYNAMIC
          title: 
            id: create
            defaultMessage: Create Record
          entity: default/employee
          method: create
          goBack: previous
﻿
Jig translated into German with dynamic values
In this example, a 
﻿with today's activites is translated into German. The translation is configured dynamically agains the Text Locale values. To see the form in each of the languages change your device language setting to one of the configured languages.
One jig in two languages
﻿
Examples:
See the jig example in GitHub.
See the translation file examples in GitHub.
localized-activities-dynamic.jigx
de.jigx
en.jigx
title: 
  id: greeting
  values:
    name: [email protected]
    time: =$fromMillis($millis(),'[P]')
  defaultMessage: ="Welcome " & @ctx.user.displayName
description: 
  id: activities
  defaultMessage: Today's activities
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1508614999368-9260051292e5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

datasources:
  activities: 
    type: datasource.static
    options:
      data:
        - id: 1
          name: Swimming
          location: Pool
          previewDetail: 7pm
          icon: swimming-diving
        - id: 2
          name: Tennis
          location: Court
          previewDetail: 6am
          icon: tennis-backhand
        - id: 3
          name: Exercising
          location: Gym
          previewDetail: 5pm
          icon: fitness-weights

children:
  - type: component.avatar
    options:
      title: profile
      size: large
      align: center
      uri: https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YXZhdGFyJTIwd29tYW58ZW58MHx8MHx8fDA%3D
   
  - type: component.list
    options:
      data: [email protected]
      item: 
        type: component.list-item
        options:
          title: 
            id: sport
            values:
              name: [email protected]    
          subtitle: 
            id: venues
            values:
              location: [email protected]
          rightElement: 
            element: icon
            icon: [email protected]
title: 
  id: greeting
  values:
    name: =@ctx.user.displayName
    time: =$fromMillis($millis(),'[P]')
  defaultMessage: ="Welcome " & @ctx.user.displayName
description: 
  id: activities
  defaultMessage: Today's activities
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1508614999368-9260051292e5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

datasources:
  activities: 
    type: datasource.static
    options:
      data:
        - id: 1
          name: Swimming
          location: Pool
          previewDetail: 7pm
          icon: swimming-diving
        - id: 2
          name: Tennis
          location: Court
          previewDetail: 6am
          icon: tennis-backhand
        - id: 3
          name: Exercising
          location: Gym
          previewDetail: 5pm
          icon: fitness-weights

children:
  - type: component.avatar
    options:
      title: profile
      size: large
      align: center
      uri: https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YXZhdGFyJTIwd29tYW58ZW58MHx8MHx8fDA%3D
   
  - type: component.list
    options:
      data: =@ctx.datasources.activities
      item: 
        type: component.list-item
        options:
          title: 
            id: sport
            values:
              name: =@ctx.current.item.name    
          subtitle: 
            id: venues
            values:
              location: =@ctx.current.item.location
          rightElement: 
            element: icon
            icon: =@ctx.current.item.icon
﻿
﻿
﻿
Core structure
text Locale	id - provide a unique identifier for the property to be translated. values - create context variables with values to use in the translation file. This is useful when creating dynamic content. defaultMessage - If no translation is found for the active device's language, it will either fallback to the specified defaultMessage or, if one is not specified, to English.
Updated 04 Jul 2024
Did this page help you?
OpenAI integration
Localization (Translation)

﻿Configuration options﻿

Core structure

﻿Examples and code snippets﻿

Form localized in five languages with static values

Jig translated into German with dynamic values

Configuration options

Examples and code snippets
