{"id":13140,"date":"2018-10-17T22:50:13","date_gmt":"2018-10-17T17:20:13","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=13140"},"modified":"2018-10-17T22:50:13","modified_gmt":"2018-10-17T17:20:13","slug":"multiple-language-options-on-a-single-web-page-in-microsoft-portal","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2018\/10\/multiple-language-options-on-a-single-web-page-in-microsoft-portal\/","title":{"rendered":"Multiple language options on a single web page in Microsoft Portal"},"content":{"rendered":"

Introduction:<\/strong><\/h2>\n

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.<\/p>\n

\"1Multiple<\/p>\n

But we don\u2019t want to use out of box localization concept since it applies to whole portal website as shown in above screenshot.<\/p>\n

So after some research and play around we found the solution as follows:<\/p>\n

\"2Multiple<\/p>\n

Steps to achieve the localization on single page:<\/p>\n

1<\/strong>. Firstly we will create a \u201cMulitpleLanguage\u201d record (it can be anything) in Site Settings entity.<\/p>\n

While creating Site setting record the Value<\/strong> field will contain different languages with \u201d,\u201d separated and Description<\/strong> field will contains a translation json for each language as shown in the below screenshot.<\/p>\n

\"3Multiple<\/p>\n

2<\/strong>. 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.<\/p>\n

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:<\/p>\n

Time Entry(Web Page) => Blank\u00a0 Page(Page Template) => Blank Page(Web Template)<\/p>\n

{% fetchxml multipleLanguageQuery %}\n    <fetch version=\"1.0\" output- format=\"xml-platform\" mapping= \"logical\" distinct= \"false\" >\n    <entity name=\"adx_sitesetting\" >\n    <attribute name=\"adx_name\" \/>\n    <attribute name=\"adx_value\" \/>\n    <attribute name=\"adx_description\" \/>\n    <filter type=\"and\" >\n    <condition attribute=\"adx_name\" operator= \"eq\" value= \"MulitpleLanguage\" \/>\n    <\/filter>\n    < \/entity>\n    < \/fetch>\n{% endfetchxml %}\n\n{% assign multipleLanguages = multipleLanguageQuery.results.entities %}\n{% assign languages = \"\" %}\n{% assign translations = \"\" %}\n\n<div class=\"container\" style= \"padding-top:25px;\" >\n    {% editable page 'adx_copy' %}\n\n    {% if multipleLanguages.size > 0 %}\n        <div style=\"text-align: right; padding-top:25px;\" >\n            <select id=\"selectedlanguage\" >\n                {% for multipleLanguage in multipleLanguages %}\n                    {% assign languages = multipleLanguage.adx_value | split: \",\" %}\n                    {% assign translations = multipleLanguage.adx_description %}\n                    {% for language in languages %}\n                        <option value={ { language } }>{{language }}<\/option>\n                    {% endfor %}\n                {% endfor %}\n            <\/select>\n            < label id= \"jsonlanguage\" style= \"display:none;\" > {{translations }}<\/label>\n        < \/div>\n    {% endif %}\n    {% if page.adx_entityform %}\n        {% entityform id: page.adx_entityform.id %}\n    {% endif %}\n<\/div>\n<\/pre>\n
\u00a03<\/strong>. On \u201cTime Entry\u201d 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.<\/p>\n
window.onload = function () {\n    \n    var selectedlanguage = localStorage.getItem(\"selectedLanguage\");\n    if (selectedlanguage != \"\") {\n        $(\"#selectedlanguage\").val(selectedlanguage).change();\n    }\n    \n};\n\n$(\"#selectedlanguage\").change(function () {\n     var selectedlanguage = $(\"#selectedlanguage\").val();\n    \/\/ Check browser support\n    if (typeof (Storage) !== \"undefined\") {\n        \/\/ Store\n        localStorage.setItem(\"selectedLanguage\", selectedlanguage);\n    }\n    var jsonObject = $.parseJSON($('#jsonlanguage')[0].innerText);\n    var jsonLanguageFields = jsonObject[selectedlanguage].Fields;\n    var jsonLanguageOptionSets = jsonObject[selectedlanguage].OptionSet;\n    var jsonLanguageButtons = jsonObject[selectedlanguage].Buttons;\n    if (Object.keys(jsonLanguageFields).length > 0) {\n        $.each(jsonLanguageFields, function (key, value) {\n            document.getElementById(key).innerText = value;\n        });\n    }\n    if (Object.keys(jsonLanguageOptionSets).length > 0) {\n        var htmlOptionSet = $(\"option\");\n        $.each(jsonLanguageOptionSets, function (key, value) {\n            for (var i = 0; i < htmlOptionSet.length; i++) {\n                if (htmlOptionSet[i].innerText == key) {\n                    htmlOptionSet[i].innerText = value;\n                }\n            }\n        });\n    }\n\n    if (Object.keys(jsonLanguageButtons).length > 0) {\n        var htmlButton = $(\":button\");\n        $.each(jsonLanguageButtons, function (key, value) {\n            for (var i = 0; i < htmlButton.length; i++) {\n                if (htmlButton[i].value == key) {\n                    htmlButton[i].value = value;\n                }\n            }\n        })\n    }\n});<\/pre>\n
4<\/strong>. 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.<\/p>\n
English translated single page<\/p>\n
\"4MultipleSpanish translated single page<\/p>\n
\"Multiple<\/p>\n
Conclusion<\/strong>:<\/h2>\n
By keep translation in JSON format in Site Setting record we can achieve the localization On single page.<\/p>\n
\"Generate<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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\u2019t 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\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":13147,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,18,19,37],"tags":[1162,1235],"class_list":["post-13140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-dynamics-crm","category-microsoft-portals","tag-microsoft-portal","tag-multiple-language-options-microsoft-portal"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/13140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=13140"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/13140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/13147"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=13140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=13140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=13140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}