Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

...

minLevel1
maxLevel7
Info

This section describes how to customize UI labels to use your own preferred text and/or to translate the UI into different languages. It includes how to customize error messages

Warning

Changes to UI language files

You must have an "__EOF" label at the end of every language file, otherwise the UI will not load correctly and the login form will not display. (Abiquo 4.6+)

Warning

Changes to UI Client Configuration

You should add your custom configuration to the client-config-custom.json file. This new file should contain all custom UI configuration, such as language names and keyboards.
DO NOT make changes to client-config-default.json because your changes will be lost when you upgrade Abiquo. ( Abiquo 3. 4+)

...

Create custom UI labels

To create custom UI labels and API error messages:

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

    Code Block
    /var/www/html/ui/lang
    

    and find the default language file.

    Code Block
    lang_en_US_labels.json

    (warning) (warning) 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:

    Code Block
    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 ":".

    Code Block
        "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.

    Code Block
     "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:

    Code Block
    {
      ... 
    
      "__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.

...

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:

    Code Block
    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

...

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:

    Code Block
    /var/www/html/ui/lang


  2. Go to the configuration folder

    Code Block
    /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:

    Code Block
    {
        "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

    Code Block
    {
        "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.

    Image Modified

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. 

...

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

Warning

If your JSON format is not correct, the Abiquo UI may not function. To check your file, you can use a JSON checker, for example http://jsonformatter.curiousconcept.com/#jsonformatter

...