The Multilingual Management of Apps


You manage multiple languages in Service Apps apps using keywords.

  • Each keyword is associated with text information in the app. This information can be translated into all of the languages supported by the app.
  • You can add a keyword to a widget's text field using the Translation tag... advanced tag or the Translation Tags Picker. Its label will then be dynamically displayed in the app based on the logged-in user's language.
  • Keywords are listed in a CSV file specific to each app. You manage this file using a dedicated data source called Translation and the translation editor.

Example

The CSV file associated with this example uses the following keywords.
         Example - CSV file.png

< keyword> instructions in design mode Display in execute mode

Text information is displayed in the following format, #[TRANSLATION.< keyword>]#, regardless of the logged-in user's language.

It will automatically be converted to the logged-in user's language using the labels in the CSV file.

Place keywords using the Translation Tags Picker for descriptive information. Open url.png See the procedure

.

example Page name

Example - Keyword instruction in descriptive information.png

Place keywords using the text editor for HTML fields. Open url.png See the procedure

.

example Data Viewer widget displaying tickets

Example - Keyword instruction in text editor.png

The app is run by an EN US user: labels will appear in English

Example - App in Run mode - EN.png


The same app is run by an FR user: labels will appear in French

Example - App in Run mode - EN.png

Notes

  • The CSV file must be encoded in CSV UTF-8 to avoid any conflict with accents and special characters.
  • All templates available in the Service Apps template library are shipped with a multilingual file containing the translations of all text information in the six main languages: English, French, Portuguese, Spanish, German and Italian.
    • These translations are maintained by EasyVista for all templates.
    • Modifications made to the template's CSV file for a version upgrade will not be propagated to any existing app created with this template.
  • When you create an app using one of the templates from the template library, it will automatically inherit the multilingual file of that template.
    • You can modify the translations provided in the six main languages.
    • You can add other languages supported by your app in columns L1 to L6, provided you already configured these languages in Service Manager.
    • You can add or delete keywords.
  • When you create a new app with no content, no multilingual CSV file will be associated with it.
    • If you want to create a multilingual CSV file, you can download the template below. The template contains the relevant column headers.
               Download icon.png  CSV file template
  • Keywords in the CSV file are available for all app pages.
  • You can add keywords to any data entry or descriptive field in a widget.
    • In the HTML Code, Label, Header/Footer properties used for entering HTML code, you can add keywords using a dedicated advanced tag in the text editor.
    • For descriptive properties where HTML code cannot be entered, e.g. page names, chart titles or legends, you can add keywords using the Translation Tags Picker. 
  • Keyword labels appear in the following format, #[TRANSLATION.<keyword>]# in the widget's text editor. They are displayed in the logged-in user's language in the Design pane of the graphic editor and in execute mode.

Caution

  • You must not modify the column headers of the CSV file. The headers are mandatory for the translation process.
  • When you modify the name of a keyword in the CSV file, this modification will not be propagated to the app. You must modify the name in all widgets using the keyword. Open url.png See the procedure.
  • If you delete the CSV file, text information in the app will no longer be translated. Instead, it will be replaced by the #[TRANSLATION.<keyword>]# instructions.

Naming convention for keyword names

  • Keyword names must be in the lower case.
  • Keyword names must not contain any spaces. If required, use the underscore _.

    example  Keyword: creation_date instead of creation date

  • They must not contain any special characters.

Best Practice

  • Save a backup of the CSV file before making any modification to its contents. If required, you can upload the backup file to revert back to the earlier version.
  • Use the advanced tag, Translation Tags, in the text editor or the Translation Tags Picker to avoid introducing errors in the #[TRANSLATION.<keyword>]# instruction associated with the relevant keyword.
  • You must avoid making modifications, as much as possible, to the names of keywords once they are used in the app. This is because modifications are not automatically propagated to the widgets where keywords are used.
  • If you want to create a multilingual CSV file, you can download the template below. The template contains the relevant column headers. You can then add your list of keywords and labels for each of the languages supported by your app.
             Download icon.png  CSV file template

Screens description

Translation data source

Multilingual management is based on a dedicated data source called Translation which is used to retrieve keywords from the CSV file (comma-separated values in structured text format). Once you upload it, all keywords will be available for the entire app.

         Translation datasource.png

Access: Click Apps - Translation icon.png in the Objects pane of the graphic editor.

CSV Data Editor: Used to open the translation editor for translating keyword labels into different languages.

  • If no CSV file is associated with the app, the words, No Translation will appear instead of the Edit Translation button.
     

CSV Upload/Update Time: Date on which the CSV file was last uploaded or modified.

ChooseFile

Choose A File: Used to select the CSV file using the Open dialog box. Note: You can also select the file using a drag and drop.

Export Translation: Used to save the CSV file on the local machine so that you can modify it easily. You can then upload it again to the app. All text information in the app will automatically be refreshed.

Remove Translation: Used to delete the CSV file.

Best Practice icon.png  Click Export Translation to make a backup of the file before deleting it. This way, you can recover the previous translations if required. 

Translation editor

The translation editor enables you to check translated keyword labels easily in all of the languages used in Service Manager. You can then correct them if required, without opening the CSV file in Excel.

         Translation editor.png

Access: Click Edit Translation in the CSV Data Editor section

Note: The modifications you make in the table will be integrated when you click OK.

KeyWord: Column containing all keywords listed in the CSV file.

Columns en, fr, sp, po, it, de: Translations in the six main languages: English, French, Portuguese, Spanish, German and Italian, for all templates.

Columns L1 to L6: Columns available for translations in six additional languages.

Add New Row: Used to add a row for a new keyword at the bottom of the table.

Delete Row: Used to delete the row selected in the table from the CSV file.
Note: You can select several adjacent rows.

Download CSV: Used to download the table displayed on screen.
Note: Unlike the download performed when you click the Export Translation button, the file you download here will contain all modifications made to the table even if they have not yet been validated.

Other functionalities

  • Use the search field to filter keywords.
    • The search will run as soon as you enter the first character.
    • The search for the string of characters entered will be run on all columns.
               Translation editor - Search functionality.png
  • Double-click a column header to sort keywords based on this column. You can sort a column in ascending alphabetical order (A to Z) Up icon.png or descending alphabetical order (Z to A) Down icon.png.
  • To modify the contents of a cell, double-click it or click inside the cell and press the <F2> key.

Translation Tags Picker

The Translation Tags Picker enables you to enter keywords in a descriptive field, e.g. page name, chart title, text displayed by default in a search field (Search Placeholder), etc.
Note: Unlike HTML fields, only one keyword can be selected in a descriptive field.

         Translation tags picker.png

Access: Click Translation tags picker icon.png next to the descriptive property.

Item Label: Keyword to be applied to the descriptive field.
 

Other functionalities

  • Use the search field to filter keywords.
    • The search will run as soon as you enter the first character.
    • The search for the string of characters entered will be run on all keywords.
               Translation tags picker - Search functionality.png
  • Click Deactivate keyword icon.png to unselect the keyword.
             Translation tags picker - Cancel keyword.png

Procedure: How to translate an app

Step 1 (optional): Select a multilingual CSV file.

Note: If you created your app using a template from the template library, a CSV file will automatically be associated with the app.

1. Open the graphic editor.

2. Click Apps - Translation icon.png in the Objects pane.
The Properties Inspector of the Translation data source will appear.

3. Click the Choose A File field and select the CSV file. You can also click and drag the CSV file to this field.
All keywords in the file will be available for the entire app.

Step 2 (optional): Modify the contents of the CSV file.

Note: If you created your app using a template from the template library, translations in the six main languages will automatically be loaded.

1. Click Edit Translation in the CSV Data Editor section to open the translation editor.
The CSV file will appear.

2. Make the required modifications.

Best Practice icon.png  Use the search field to filter keywords in the table.

Modify the translations of a keyword

  • Double-click the cell to be modified.
    or
    Click inside the cell and press the <F2> key.
  • Translate the keyword into the relevant language.
     

Add a keyword

  • Click Add New Row.
    A new row will be added at the bottom of the table.
  • Enter the keyword in the KeyWord column.
  • Translate the keyword into each of the languages supported by your app.
     

Delete a keyword

  • Click the row containing the keyword to be deleted.
  • Click Delete Row.
     

3. Click OK to save your changes.
The translation editor will close.

Step 3: Place keywords in the app's widgets.

1. Enable the widget where you want to insert a keyword.
The Properties Inspector will appear.

2. Follow the procedure below based on the type of field where you want to insert a keyword.


Place a keyword in a descriptive field

a. Click Translation tags picker icon.png next to the descriptive property.
         Active widget - Open Translation tags picker.png

The Translation Tags Picker will appear.

b. Click the keyword to be inserted in the descriptive field.

         Active widget - Translation tags picker - Keyword selection.png

c. Click OK.

  • The Translation Tags Picker will close.
  • The #[TRANSLATION.<keyword>]# instruction will be added to the descriptive field.
  • The keyword label will appear in the Design pane in the logged-in user's language.
    Active widget - Translation tags picker - View keyword code.png


Place a keyword in a HTML field

a. Click Apps - Edit Html icon.png next to the HTML field.
         Active widget - Open Editor text.png

The text editor will appear.

b. Place the cursor at the spot where you want to insert the keyword.

c. Click Apps - Text Editor - Advanced tags icon.png to open the advanced tags pane and click Translation Tag...
The pane displaying keywords will appear.

d. Select the keyword you want.
The #[TRANSLATION.<keyword>]# instruction will be inserted in the text editor.
         Active widget - Editor text - Translation advanced tag.png

e. Repeat the procedure for each keyword to be inserted.

f. Click Apps - Text Editor - Advanced tags icon.png to close the keywords pane.

g. Click OK.

  • The text editor will close.
  • The #[TRANSLATION.<keyword>]# instruction will be added to the widget's HTML code.
  • The keyword label will appear in the Design pane in the logged-in user's language.
    Active widget - Translation editor - View keyword code.png

Step 4 (optional): Correct the names of keywords that have already been placed in the app.

Note: If you correct a keyword name in the translation editor, you must also make the same correction manually in all widgets where this keyword name is used.

1. Enable the widget whose keyword name you want to correct.
The Properties Inspector will appear.

2. Correct the #[TRANSLATION.<keyword>]# instructions in the relevant fields.

Correction in a descriptive field

  • Click Translation tags picker icon.png to open the Translation Tags Picker.
  • Select the new keyword.
  • Click OK.
    The descriptive field will be updated.
     

Correction in a HTML field

  • Click Apps - Edit Html icon.png to open the text editor.
  • Delete the incorrect #[TRANSLATION.<keyword>]# instruction.
  • Click Apps - Text Editor - Advanced tags icon.png to open the keywords pane and click Translation Tag...
  • Select the new keyword.
    The HTML code will be updated.
  • Click OK to close the text editor.
Tags:
Last modified by Unknown User on 2020/10/26 16:01
Created by Administrator XWiki on 2020/10/26 12:18

Shortcuts

Powered by XWiki ©, EasyVista 2020