Abiquo UI client language configuration

Create custom UI labels

To create custom UI labels and API error messages:

1. Go to the language file location which is as follows

   /var/www/html/ui/lang
   

   and find the default language file.

   lang_en_US_labels.json

     Do not change lang_en_US_labels.json because the platform will overwrite your changes when you upgrade
   

2. To customize the US English labels, create a new custom file in the same folder called:

   lang_en_US_custom.json

3. Copy any default labels you want to change to this file and enter the new text values. See UI labels, which also provides a change history for upgrades. For example, change "enterprise" to "tenant" in the part of the label after the colon ":".

       "enterprise.create.title":"Create tenant",
       "configuration.systemproperties.wiki.user.createenterprise":"Create tenant",

4. Copy any error messages you want to change from the list of default messages on the wiki. See UI error messages. Make appropriate changes, for example, for some sample messages VM-9999 and VM-10000. Tip: the error messages in table format are at User interface messages.

    "server.error.VM-9999":"VM error due to cosmic rays",
    "server.error.VM-10000":"VDC error due to increased sunspot activity",

5. Your file must always end with the "__EOF" label, for example:

   {
     ... 
   
     "__EOF": "End of file"
   }

   
   If you do not add the __EOF label, the UI will not load correctly and the login form will not display

6. Check your JSON format using a JSON validator, for example, https://jsonformatter.curiousconcept.com/#jsonformatter and remember:

   1. Check there are no commas after the last entry in the file, and that there are no missing commas between entries.

   2. You must escape special characters, for example, escape single and double quotation marks ('") and backslashes (\\) with a single or double backslash

7. Save your file in UTF-8 format

8. To display your changes, reload the UI 

The default language of US English is automatically compiled into the Abiquo UI Client, so if there are any problems with the language files, then the client will automatically revert to the default US English.

Create language files for additional languages

To create a new UI language file in another language:

1. Copy the en_US file and rename it to the language code of your language. For example, to create a label file for translation to French from France, enter the following commands while logged into the Abiquo Server as root:

   cd /var/www/html/ui/lang
   cp lang_en_US_labels.json lang_fr_FR_labels.json
   

   For language codes, see ISO language codes web page.

For instructions of how to translate the file, see Abiquo UI localization

You can compare language files between versions by looking at the change history of the pages UI labels and UI error messages. 

Add languages to the UI

After you have created the language files, do these steps to add the languages:

1. Add the files to the server in the languages folder:

   /var/www/html/ui/lang

   
   

2. Go to the configuration folder

   /var/www/html/ui/config

   
   

3. Edit the client-config-custom.json file 

4. Add your languages in the order that you want them to appear in the menu. For example, the default configuration is:

   {
       "config.languages" : [
           {"value":"en_US", "name":"English", "isDefault":true, "lcid":"1033", "flagIconUrl": "theme/abicloudDefault/img/country_flags/united-states-of-america.svg"}
       ],
   ...

   For example, to add the Spanish and French languages to the file, add a comma after the English entry, and add a new entry for Spanish and French

   {
       "config.languages" : [
   		{"value":"en_US","name":"English","isDefault":true,"flagIconUrl": "theme/abicloudDefault/img/country_flags/united-states-of-america.svg"},
   		{"value":"es_ES","name":"Spanish","lcid": "1034","flagIconUrl": "theme/abicloudDefault/img/country_flags/spain.svg"},
   		{"value":"fr_FR","name":"French","lcid":"1036"}
       ],
   ...
   

   Note that the platform will store the last language used in browser LocalStorage.

5. Check your JSON format because the platform will not load the UI with an invalid configuration

   • Check for an extra comma at the end of the list or a missing comma in the list!

6. Save the file with UTF-8 encoding to preserve the special characters

7. For VMware ESXi, you can also add a keyboard configuration for each language, see Configure Abiquo UI

Test new languages

To test new languages

1. After configuration, reload the client and the new languages will appear on the start-up menu. 

2. Select a language to change the Abiquo UI to that language.
   

   

The platform will remember the last language used in the UI and select it on the login screen. The value is stored in the browser's localStorage with “language” as the key and the language code as the value, for example, “es_ES” for Spanish from Spain. 

Customize About and Support messages

About and Support links display in the bottom right corner of the screen. These links open popups.

• To disable the popups, see Configure Abiquo UI. 

• To change the messages in the About and Support popups, change the values of the "about_popup" and "support_popup" labels in the language files.

Additional customizations

• To configure the browser tab name, see Configure Abiquo UI. Note: the platform will ignore the value of the "main.window.application.title" property in the language files.  

• To configure the browser tab favicon, see Abiquo branding guide

You can also customize these optional UI elements in the language files.

1. Add a message to the Backup tab of the popup to edit virtual machine configuration. See Display optional information message on VM backup tab

2. Add a custom label for a new icon in the main menu bar. See Add external link in Abiquo header menu