Localizing Archibus Workplace

Last updated
Save as PDF

Localization Coordinator

Contents

Translating Strings for Workplace
Add Custom Language Support for Workplace

Translating Strings for Workplace

Localization for the Workplace application is now detached from the Web Central; it’s independent (strings are independently managed and translated). After you have updated the translations, then you must rebuild the application, see Workplace Build Process.

Locale File Organization

Files organized in language folders can be found undersrc/locales/

locales/en/en.json
locales/fr/fr.json
locales/fr/fr-CA.json (contains only differences from fr.json)
locales/de/de.json
locales/es/es.json
locales/it/it.json
locales/jp/jp.json
locales/nl/nl.json
locales/ch/ch.json

Regional variants (fr-CA) fall back to the parent locale (fr), then to English (en).

There is specific support for the French Canadian (there are already a few strings that are different from French; see applications\schema\ab-products\essential\dev\workplace\src\locales\fr\fr-CA.json).

For example, in English: "Are you sure you want to cancel this booking ?"

French: "Voulez-vous vraiment annuler cette réservation ?"

French Canadian: "Êtes-vous certain de vouloir annuler cette réservation?"

Add Custom Language Support for Workplace

This describes the steps required to add support for a custom language in the Workplace application.

The workplace folder is the folder at the following location:

[Archibus installation folder]/schema/ab-products/essential/dev/workplace

Step 1. Enable the Language in Web Central

Make sure you enable the desired custom language in Web Central; see Add Language and Locales to the afm-config.xml.

Step 2. Create the Language directory and the Translation file

Navigate to the locales directory:

workplace/src/locales/

Create a new directory using the two-letter ISO 639-1 language code:

workplace/src/locales/[language-code]/

Example for Hindi:

workplace/src/locales/hi/

Create the translation JSON file inside the directory:

workplace/src/locales/[language-code]/[language-code].json

Example for Hindi:

workplace/src/locales/hi/hi.json

Step 3. Structure your Translation file

Copy the English translation file (en/en.json) as your starting template and maintain the same JSON structure.

Example structure

{
  "common": {
    "shared": {
      "buildingRequired": "Building is required",
      "buildingFloorTitle": "{{building}} · Floor {{floor}}",
      "yes": "Yes",
      "no": "No",
      "workspaceBooking": "Workspace booking"
    }
  }
}

Step 4. Translation all your strings

Translate each value in the JSON file manually or using tools like Crowdin.

Important: Do not translate interpolation placeholders like {{building}} or {{floor}}.

Example (Hindi translation)

{
  "common": {
    "shared": {
      "buildingRequired": "भवन की आवश्यकता है",
      "buildingFloorTitle": "{{building}} · मंजिल {{floor}}",
      "yes": "हाँ",
      "no": "नहीं",
      "workspaceBooking": "कार्यस्थल की बुकिंग"
    }
  }
}

Step 5. Update the i18n Configuration

Open the file called i18n.js

workplace/src/i18n/i18n.js

Add your language import along with others.

import i18n from 'i18next'
import {initReactI18next} from 'react-i18next'
// Import all translation files
import en from '../locales/en/en.json'
import zh from '../locales/zh/zh.json'
import de from '../locales/de/de.json'
import es from '../locales/es/es.json'
import fr from '../locales/fr/fr.json'
import frCA from '../locales/fr/fr-CA.json'
import it from '../locales/it/it.json'
import ja from '../locales/ja/ja.json'
import nl from '../locales/nl/nl.json'
import hi from '../locales/hi/hi.json'  // Add your language import

Update the resources object.

const resources = {
  en: {translation: en},
  de: {translation: de},
  es: {translation: es},
  fr: {translation: fr},
  'fr-CA': {translation: frCA},
  it: {translation: it},
  ja: {translation: ja},
  nl: {translation: nl},
  zh: {translation: zh},
  hi: {translation: hi}  // Add your language resource
}

Step 6. Build the Workplace application

Run from the workplace folder to build the application with the new translations.

yarn build

Learn more in Workplace Build Process.

Step 7. Verify the translation in Workplace

Set the custom language for a user, and log in to the Workplace application using that user.

Verify that the translations are correct.