AnsweredAssumed Answered

Internationalization of CDE Dashboard using a parameter

Question asked by Tiago Marques on Sep 12, 2018

Hi,

 

I am currently trying to create a dashboard where you can change the language using a parameter (changed via flag icons or url).

 

From what I have read so far, you have to first set the language in the BA Console or via /Home?locale=<language>, which is not viable when trying to embed dashboards with requireJS, or when the end user simply wants to select its language.

 

I have found a workaround: I created a Freeform Component with the highest priority, and inside it I overwrite the i18n "map" and "prop" properties of the dashboard object using a AJAX call.

 

This returns the messages_<language>.properties file and requires a bit of tweaking at the end of the following function:


function postInit() {
   // This works, but requires an override of the window.SESSION_LOCALE variable, a AJAX call and also overwrites the original methods...
    window.SESSION_LOCALE = Utils.getQueryParameter("p_locale") || window.SESSION_LOCALE;
    require(["cdf/lib/jquery"], function(n) {
        var e, a = n.i18n.properties;
        n.i18n.properties = function(u) {
            (null === u.language || "" == u.language || void 0 == u.language) &&
                (u.language = t()),
            (null === u.language || void 0 == u.language) &&
                (u.language = ""),
            u.language = r(u),
            e && (n.ajaxSetup({type: "GET"}),
            a(u),
            n.ajaxSetup({type: "POST"}))
        },
        n.i18n.browserLang = function() {
            return window.SESSION_LOCALE;
        };
        var getTraductions = function(a) {
            var t;
            return n.ajax({
                type: "GET",
                url: (void 0 != a.path ? a.path : "") +
                    "messages_"+
                    window.SESSION_LOCALE+
                    ".properties",
                    async: !1,
                    cache: a.cache,
                    contentType: "text/plain;charset=" + a.encoding,
                    dataType: "text",success: function(n) {
                        t = u(n, a.language), e = !0
                    },
                    error: function(n) {
                        e = !1, 404 == n.status && (t = a.language)
                    }}), t
        },
        u = function(n, e) {
            var arr = n.replace(/ =|= /g,'=').split(/\n/),
                traduction = {};
            for (var i = 0; i < arr.length; i++) {
                var pos = arr[i].indexOf('=');
                traduction[arr[i].substring(0,pos)] = arr[i].substring(pos+1);
            }
            myself.i18nSupport.map = traduction;
            myself.i18nSupport.prop = function(code) {
                return myself.i18nSupport.map[code] || '[' + code + ']';
            }
        };
        getTraductions(a);
    });
}

Honestly, I feel there must be a simpler way to do this, but I can't figure out how. Any thoughts?

 

Thank you for your attention,

 

Tiago

Outcomes