Localization

Add multi-language support to your v5 apps using UXP's localization system.

---

Setup

1. Create localization.json

In your app's Resources/views/ folder:

{
    "ivivalocation.text.new-location": {
        "en": "New Location"
    },
    "ivivalocation.text.update-location": {
        "en": "Update Location"
    },
    "ivivalocation.text.delete-location": {
        "en": "Delete Location"
    },
    "ivivalocation.field.location-name": {
        "en": "Location Name"
    },
    "ivivalocation.field.location-type": {
        "en": "Location Type"
    },
    "ivivalocation.status.active": {
        "en": "Active",
        "ar-sa": "نشط"
    },
    "ivivalocation.status.inactive": {
        "en": "Inactive",
        "ar-sa": "غير نشط"
    },
    "ivivalocation.message.created": {
        "en": "Location created successfully"
    }
}

Format: Message key at top level → language codes → translations

2. Enable Localization

In your app's entry point (src/index.tsx):

import { enableLocalization } from './uxp';

enableLocalization();

---

Using Translations

Use the $L() function from UXPContext:

import { useUXPContext } from "uxp/components";

const LocationList = () => {
    const uxpContext = useUXPContext();

    return (
        <div>
            <h1>{uxpContext.$L('ivivalocation.text.new-location')}</h1>
            <button>{uxpContext.$L('ivivalocation.text.delete-location')}</button>
        </div>
    );
};

---

Parameters in Translations

Use $ prefix for parameters:

{
    "ivivalocation.message.welcome": {
        "en": "$userName welcome to $locationName"
    },
    "ivivalocation.message.count": {
        "en": "Showing $count of $total locations"
    }
}

Pass parameters as object:

const welcome = uxpContext.$L('ivivalocation.message.welcome', {
    userName: "Jane Doe",
    locationName: "Building A"
});
// "Jane Doe welcome to Building A"

const count = uxpContext.$L('ivivalocation.message.count', {
    count: 10,
    total: 50
});
// "Showing 10 of 50 locations"

---

Naming Conventions

Use hierarchical keys: appname.category.message-id

{
    "ivivalocation.text.new-location": {
        "en": "New Location"
    },
    "ivivalocation.field.location-name": {
        "en": "Location Name"
    },
    "ivivalocation.action.add": {
        "en": "Add"
    },
    "ivivalocation.status.active": {
        "en": "Active"
    },
    "ivivalocation.message.success": {
        "en": "Success"
    }
}

---

See Location 5.0 app (/Location/5.0/Resources/views/localization.json) for complete localization examples.

---

Next Steps

• Building & Deployment - Deploy your app