TranslateView

Label: :IA_Function
Property: type: TranslateView
Inherits from: Function and View

Shows a grid to manage translations.

TranslateView

Description

The TranslateView provides a user-friendly grid interface for managing translations within the application. It allows users to view, add, edit, and delete translation keys and their corresponding values for different languages.

Visuals and Interaction

The TranslateView displays translations in a filterable and sortable grid.

Adding Translations: Click the "New Translation" button to add a new, empty row to the grid.
Editing Translations: Double-click on a cell to edit its value. The Key, Namespace, and language columns are editable for namespaces defined in the namespacesEditable property.
Deleting Translations: Right-click on a row and select "Delete" from the context menu to mark a translation for deletion.
Saving Changes: Click the "Save" button to persist all additions, changes, and deletions. An "Unsaved changes" badge will appear when there are pending changes.
Download Translations: Click the "Download" button to export the current translations (filtered by graphileon-logic namespace) to a JSON file.
Upload Translations: Click the "Upload" button to import translations from a JSON file. Existing translations will be updated, and new ones will be added.

Properties

Key	Description	Default value	Possible values
`languages`	The languages to be loaded in the view.	`['en']`	Array of language codes.
`languagesRTL`	Languages to be displayed in right-to-left direction.	(none)	Array of language codes.
`namespaces`	The language namespaces to be shown in the view.	(all)	Array of namespace strings.
`namespacesEditable`	The language namespaces that should be editable in the view.	`['graphileon-logic']`	Array of namespace strings.
`enableAddTranslation`	When set to `false` user can not add new translation row	`true`	Boolean
`enableDownload`	When set to `false`, the download button will be disabled.	`true`	Boolean
`enableUpload`	When set to `false`, the upload button will be disabled.	`true`	Boolean
`ttAddNewTranslation`	Tooltip text for the 'New Translation' button.	`undefined`	String
`ttDownloadTranslations`	Tooltip text for the 'Download' button.	`undefined`	String
`ttUploadTranslations`	Tooltip text for the 'Upload' button.	`undefined`	String

Columns

The grid displays the following columns:

Header	Description
`Key`	The unique identifier for the translation string.
(language code)	A column for each language (e.g., `en`, `nl`), showing the translated text.
`Read-Only`	Indicates if the row is editable. This is based on the `namespacesEditable` property.
`Namespace`	The namespace the translation belongs to.

Row Styling

The rows in the grid are color-coded to indicate their status:

Color	Meaning
Green	The translation has been newly added.
Blue	The translation has been modified.
Yellow	The translation has been changed by another user.
Red (with strikethrough)	The translation is marked for deletion.

Real-time Updates

The TranslateView automatically updates in real-time. If another user makes changes to the translations, your view will be updated to reflect those changes. A message will be displayed to inform you of the remote changes.

Permissions and License

Permissions: To use the TranslateView, the user must have the language:translate permission.
License: The Graphileon license should allow for a Multi-lingual UI, see Graphileon Pricing - Graphileon

Notes:

Make sure the languages and namespacesEditable match languages and values defined in the config.json.
It is recommended to not change the core namespace directly. Read the best practice here.
See Translations for more information about translations.
Import/Export JSON Format: The expected JSON format for importing and exporting translations is an object where keys are translation keys and values are objects containing language codes as keys and translated strings as values. Example:
```
{
  "my.translation.key": {
    "en": "My English translation",
    "fr": "Ma traduction française"
  },
  "another.key": {
    "en": "Another English text",
    "fr": "Un autre texte français"
  }
}
```

Outgoing triggers

Besides those inherited from Function, TranslateView does not have any outgoing triggers.

For Dashboard Designers Reference TranslateView