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.
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:
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.
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
Spanish translated single page
Conclusion:
By keep translation in JSON format in Site Setting record we can achieve the localization On single page.
