Fallback Solution for Locales Not Supported by UI5 Web Components

[bonniegso]

Problem: Passing in a locale that is not included in the @ui5/webcomponents-localization/dist/generated/assets/cldr directory to fetchCldr() from @ui5/webcomponents-base/dist/asset-registries/LocaleData.js results in CLDR data for locale en.json is not loaded!. For example, if we call fetchCldr("fr_FR") this will result in the error because there is no json file correlated with fr_FR.

Solution we would like: Ideally, fetchCldr() would handle this logic of falling back to the general language (ex: fr_FR will use fr.json) when a locale is not found and en.json by default. If this isn't possible, then we would like a better way to check whether a locale is supported or not.

Alternative: To fix this, we are currently despecifying the locales to use the default json files for each general language (ex: fr_FR will use fr.json) and falling back to English if a language isn't found. Because we don't have a list of all the locales, we created a list from the files found here @ui5/webcomponents-localization/dist/generated/assets/cldr. Is there a better way to check whether a locale is supported or not by the UI5 WC?

[stoehr]

Thanks @bonniegso. @vladitasev et al., this is an issue that SuccessFactors requires a solution for.

[ilhan007]

On our side, when we run our test page of the DatePicker (as it needs and loads CLDR data), passing fr_FR, frCA, fr* fallbacks to "fr" does not produce error and the texts in the DatePicker are in French.

To try it yourself open the following page and change use the sap-ui-language query parameter: https://sap.github.io/ui5-webcomponents/master/playground/main/pages/DatePicker/?sap-ui-language=fr_FR

And the reason it works, is that we use another method from the base package getLocale before we call fetchCldr. The getLocale It will parse the input language.

import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";

const locale = getLocale()
//  locale.getLanguage() -> fr
//  locale.getRegion() -> FR
fetchCldr(locale.getLanguage(), locale.getRegion(), locale.getScript()),

Apart of that, there is a module that returns an array of the supported cldr locales:

import { SUPPORTED_LOCALES }  @ui5/webcomponents-base/dist/generated/AssetParameters.js

And in addition a method that can be useful nextFallbackLocale:

import nextFallbackLocale from "@ui5/webcomponents-base/dist/locale/nextFallbackLocale.js";

// from fr_FR, it would fallback to "fr" 
// and if "fr" is not found, it will fallback to the default lang "en"

Let's see if combining "getLocale" / "fetchCldr" will work for you. Using the SUPPORTED_LOCALES and nextFallbackLocale we consider more like a workaround.

Best, ilhan

[stoehr]

@bonniegso, please look into this (using internal SF ticket "WEF-5095").

[ilhan007]

Closing the issue due to inactivity. Feel free to reopen the issue in case you need further assistance.