Multiple language options on a single web page in Microsoft Portal

By | October 17, 2018

Introduction:

Recently we had a business requirement to use a localization (Multiple language options) on a single page i.e. not for the whole portal website.

1Multiple language options on a single web page in Microsoft Portal

But we don’t want to use out of box localization concept since it applies to whole portal website as shown in above screenshot.

So after some research and play around we found the solution as follows:

2Multiple language options on a single web page in Microsoft Portal

Steps to achieve the localization on single page:

1. Firstly we will create a “MulitpleLanguage” record (it can be anything) in Site Settings entity.

While creating Site setting record the Value field will contain different languages with ”,” separated and Description field will contains a translation json for each language as shown in the below screenshot.

3Multiple language options on a single web page in Microsoft Portal

2. Now on the WebPage entity where we want to call the multiple language option we will have a Blank Page page template that calls Blank page web template.

Here we have created a Time entry web page that calls Blank Page page template and that page template calls Blank Page web Template that contains following code:

Time Entry(Web Page) => Blank  Page(Page Template) => Blank Page(Web Template)

{% fetchxml multipleLanguageQuery %}
    <fetch version="1.0" output- format="xml-platform" mapping= "logical" distinct= "false" >
    <entity name="adx_sitesetting" >
    <attribute name="adx_name" />
    <attribute name="adx_value" />
    <attribute name="adx_description" />
    <filter type="and" >
    <condition attribute="adx_name" operator= "eq" value= "MulitpleLanguage" />
    </filter>
    < /entity>
    < /fetch>
{% endfetchxml %}

{% assign multipleLanguages = multipleLanguageQuery.results.entities %}
{% assign languages = "" %}
{% assign translations = "" %}

<div class="container" style= "padding-top:25px;" >
    {% editable page 'adx_copy' %}

    {% if multipleLanguages.size > 0 %}
        <div style="text-align: right; padding-top:25px;" >
            <select id="selectedlanguage" >
                {% for multipleLanguage in multipleLanguages %}
                    {% assign languages = multipleLanguage.adx_value | split: "," %}
                    {% assign translations = multipleLanguage.adx_description %}
                    {% for language in languages %}
                        <option value={ { language } }>{{language }}</option>
                    {% endfor %}
                {% endfor %}
            </select>
            < label id= "jsonlanguage" style= "display:none;" > {{translations }}</label>
        < /div>
    {% endif %}
    {% if page.adx_entityform %}
        {% entityform id: page.adx_entityform.id %}
    {% endif %}
</div>

 3. On “Time Entry” record of Web Page entity we have an advanced tab that contains a custom javascript which will contain following javascript code that will change the single form language based on the language selected in the dropdown.

window.onload = function () {
    
    var selectedlanguage = localStorage.getItem("selectedLanguage");
    if (selectedlanguage != "") {
        $("#selectedlanguage").val(selectedlanguage).change();
    }
    
};

$("#selectedlanguage").change(function () {
     var selectedlanguage = $("#selectedlanguage").val();
    // Check browser support
    if (typeof (Storage) !== "undefined") {
        // Store
        localStorage.setItem("selectedLanguage", selectedlanguage);
    }
    var jsonObject = $.parseJSON($('#jsonlanguage')[0].innerText);
    var jsonLanguageFields = jsonObject[selectedlanguage].Fields;
    var jsonLanguageOptionSets = jsonObject[selectedlanguage].OptionSet;
    var jsonLanguageButtons = jsonObject[selectedlanguage].Buttons;
    if (Object.keys(jsonLanguageFields).length > 0) {
        $.each(jsonLanguageFields, function (key, value) {
            document.getElementById(key).innerText = value;
        });
    }
    if (Object.keys(jsonLanguageOptionSets).length > 0) {
        var htmlOptionSet = $("option");
        $.each(jsonLanguageOptionSets, function (key, value) {
            for (var i = 0; i < htmlOptionSet.length; i++) {
                if (htmlOptionSet[i].innerText == key) {
                    htmlOptionSet[i].innerText = value;
                }
            }
        });
    }

    if (Object.keys(jsonLanguageButtons).length > 0) {
        var htmlButton = $(":button");
        $.each(jsonLanguageButtons, function (key, value) {
            for (var i = 0; i < htmlButton.length; i++) {
                if (htmlButton[i].value == key) {
                    htmlButton[i].value = value;
                }
            }
        })
    }
});

4. On change of the language in dropdown we have following translated form with the optionset value also translated in it as shown in below screenshot.

English translated single page

4Multiple language options on a single web page in Microsoft PortalSpanish translated single page

Multiple language options on a single web page in Microsoft Portal

Conclusion:

By keep translation in JSON format in Site Setting record we can achieve the localization On single page.

Generate Your Own New Leads Now Within Dynamics 365 CRM with Maplytics