Building a Localized Region

All components in Iris Classic have the ability to be localized when they have built in content. The following example will help you get started with localization.

window.addEventListener("iris.init.start", function(event) {
    const iris = event.detail.iris;
    const RegionSettings = iris.RegionSettings;
    const regionId = "en-GB";  //Update to the language code you want to register.

    const region = new RegionSettings({
        "calendar.dayofweekabbr.sunday": "su",
        "calendar.dayofweekabbr.monday": "mo",
        "calendar.dayofweekabbr.tuesday": "tu",
        "calendar.dayofweekabbr.wednesday": "we",
        "calendar.dayofweekabbr.thursday": "th",
        "calendar.dayofweekabbr.friday": "fr",
        "calendar.dayofweekabbr.saturday": "sa",
        "calendar.month.january": "January",
        "calendar.month.february": "February",
        "calendar.month.march": "March",
        "calendar.month.april": "April",
        "calendar.month.may": "May",
        "calendar.month.june": "June",
        "calendar.month.july": "July",
        "calendar.month.august": "August",
        "calendar.month.september": "September",
        "calendar.month.october": "October",
        "calendar.month.november": "November",
        "calendar.month.december": "December",
        "calendar.monthabbr.january": "Jan",
        "calendar.monthabbr.february": "Feb",
        "calendar.monthabbr.march": "Mar",
        "calendar.monthabbr.april": "Apr",
        "calendar.monthabbr.may": "May",
        "calendar.monthabbr.june": "Jun",
        "calendar.monthabbr.july": "Jul",
        "calendar.monthabbr.august": "Aug",
        "calendar.monthabbr.september": "Sep",
        "calendar.monthabbr.october": "Oct",
        "calendar.monthabbr.november": "Nov",
        "calendar.monthabbr.december": "Dec",
        "contentheader.item.ascendinglabel": "{0} (ascending)",
        "contentheader.item.descendinglabel": "{0} (descending)",
        "contentheader.item.neutrallabel": "{0}",
        "contentheader.item.ascendingdirections": "Activate button to sort by {0} ascending.",
        "contentheader.item.descendingdirections": "Activate button to sort by {0} descending.",
        "dropdown.sr.focused": "{0}, {1} Combo box.",
        "dropdown.sr.selected": "{0} selected.",
        "dropdown.sr.unselected": "{0} unselected.",
        "dropdown.sr.active": "{0}, active.",
        "dropdown.sr.disabled": "{0}, active, disabled.",
        "dropdown.multiselect.selected": "{0} items selected",
        "list.sr.active": "{0}, active.",
        "list.sr.disabled": "{0}, active, disabled.",
        "list.sr.selected": "{0} selected.",
        "list.sr.unselected": "{0} unselected.",
        "tab.sr.selected": "{0} selected."
    });

    RegionSettings.regions[regionId] = region;
    RegionSettings.defaultRegionId = regionId;  //Remove this line if you are not wanting the region to be selected.

});

The example above is self contained. This allows you to create multiple javascript files labeled as the region (e.g. 'en-gb.js') and add them as a script tag when needed.