{"id":22873,"date":"2020-02-17T11:33:15","date_gmt":"2020-02-17T11:33:15","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=22873"},"modified":"2020-02-26T07:24:49","modified_gmt":"2020-02-26T07:24:49","slug":"how-to-run-pcf-control-in-multilanguage-using-resx-resource-files","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/02\/how-to-run-pcf-control-in-multilanguage-using-resx-resource-files\/","title":{"rendered":"How to run PCF Control in Multilanguage using .resx (resource) files"},"content":{"rendered":"

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

In this blog, we will see how to run PCF Control in multiple languages. Let\u2019s consider a scenario where we have one PCF field control, which contains some user interface part which we currently display in only one language i.e English. Now, we want to display PCF control UI part in more than one language such as French and English which is also supported by Dynamics 365 CRM, so that the PFC control will load as per logged in user language.<\/p>\n

Solution<\/strong><\/h2>\n

Step 1: <\/strong>For this scenario, we are using .resx (resource) files, wherein we maintain XML entries for all languages as shown below. For each language, we have created individual resource files. Please find below sample code of resource file:<\/p>\n

1. English:<\/p>\n

<data<\/em>\u00a0<\/em>name<\/em>=<\/em>“agelbl”<\/em>\u00a0<\/em>xml:space<\/em>=<\/em>“preserve”<\/em>><\/em><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0<\/em><value><\/em>Age<\/em><\/value><\/em><\/p>\n

<\/data><\/em><\/p>\n

<data<\/em>\u00a0<\/em>name<\/em>=<\/em>“agetbplaceholder”<\/em>\u00a0<\/em>xml:space<\/em>=<\/em>“preserve”<\/em>><\/em><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/em><value><\/em>Enter\u00a0the\u00a0age\u00a0here<\/em><\/value><\/em><\/p>\n

<\/data><\/em><\/p>\n

2. French:<\/p>\n

<data<\/em>\u00a0<\/em>name<\/em>=<\/em>“agelbl”<\/em>\u00a0<\/em>xml:space<\/em>=<\/em>“preserve”<\/em>><\/em><\/p>\n

\u00a0<\/em><value><\/em>\u00c2ge<\/em><\/value><\/em><\/p>\n

<\/data><\/em><\/p>\n

<data<\/em>\u00a0<\/em>name<\/em>=<\/em>“agetbplaceholder”<\/em>\u00a0<\/em>xml:space<\/em>=<\/em>“preserve”<\/em>><\/em><\/p>\n

\u00a0<\/em><value><\/em>Entrez\u00a0l’\u00e2ge\u00a0ici<\/em><\/value><\/em><\/p>\n

<\/data><\/em><\/p>\n

Note : All resource files name should be have in following format : [PCF_ControlName].[Language_Code].resx where Language_Code is dynamic 365 logged language code for example ([].1036.resx).<\/p><\/blockquote>\n

Step 2:<\/strong> Add all languages files into PCF control project and add resources reference of each .resx in ControlMainfest.Input.xml file as shown in below code:<\/p>\n

\u00a0 <resources><\/em><\/strong><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/em><code <\/em>\u00a0<\/em>path<\/em>=<\/em>“index.ts”<\/em>\u00a0<\/em>order<\/em>=<\/em>“1”<\/em>\/><\/em><\/strong><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/em><resx<\/em>\u00a0 <\/em>path<\/em>=<\/em>“\/[PCF_ControlName].1033.resx”<\/em>\u00a0<\/em>version<\/em>=<\/em>“1.0.0”<\/em>\u00a0<\/em>\/><\/em><\/strong><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/em><resx<\/em>\u00a0 <\/em>path<\/em>=<\/em>” \/[PCF_ControlName].1036.resx”<\/em>\u00a0<\/em>version<\/em>=<\/em>“1.0.0”<\/em>\u00a0<\/em>\/><\/em><\/strong><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/em><\/resources><\/em><\/strong><\/p>\n

Step 3:<\/strong> Access languages data of rescouce files using PCF control context as shown in below code:<\/p>\n

public init(context: ComponentFramework.Context, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {\r\n        let functionName: string = \"init\";\r\n        this._contextObj = context;\r\n        this._container = container;\r\n        let labelText: string = \"\";\r\n       let labelPlaceholder: string = \"\";\r\n        try {\r\n            \/\/Create div\r\n            this._mainContainer = document.createElement('div');\r\n            \/\/label input\r\n            this._label = document.createElement(\"label\");\r\n\r\n           \/\/read label text from language resource files\r\n\/\/check the value returned by getstring \u2013 if it does not find a resource file for the logged-in users language or the base language of the organization \u2013 it returns the same value as the key requested.\r\n            if(context.resources.getString(\"agelbl\")!=\"agelbl\"){\r\n\t\/\/found a matching key in the resource file\r\n               labelText = context.resources.getString(\"agelbl\");\r\n            }else{\r\n\t\/\/resource file not found for the logged-in user\u2019s language or the base language.\r\n\tlabelText = \u201cAge\u201d;\r\n            }\r\n            this._label.innerText = labelText;\r\n            this._label.setAttribute(\"id\", \"ageTB\");\r\n\r\n            \/\/text input\r\n            this._input = document.createElement(\"input\");\r\n\r\n            \/\/read placeholder text from language resource files\r\n\/\/check the value returned by getstring \u2013 if it does not find a resource file for the logged-in users language or the base language of the organization \u2013 it returns the same value as the key requested.\r\n            if(context.resources.getString(\"agetbplaceholder\")!=\"agetbplaceholder\"){\r\n               \/\/found a matching key in the resource file\r\n               labelPlaceholder = context.resources.getString(\"agetbplaceholder\");\r\n            }else{\r\n\/\/resource file not found for the logged-in user\u2019s language or the base language.\r\n\tlabelPlaceholder = \u201cEnter the age here\u201d;\r\n            }\r\n            this._input.placeholder = labelPlaceholder;\r\n            this._input.setAttribute(\"type\", \"text\");\r\n            this._input.setAttribute(\"id\", \"ageTB\");\r\n            this._input.setAttribute(\"class\", \"form-control\");\r\n\r\n            \/\/add all html components in dic container\r\n            this._mainContainer.appendChild(this._label);           \r\n            this._mainContainer.appendChild(this._input);\r\n            \r\n\r\n\r\n            \/\/append div to PCF container\r\n            this._container.appendChild(this._mainContainer);\r\n        } catch (error) {\r\n                    let alertStrings = { text: error.message };\r\n                    let alertOptions = { height: 100, width: 200 };\r\n                    this._ contextObj.navigation.openAlertDialog(alertStrings, alertOptions);\r\n        }\r\n    }<\/pre>\n
In the above code, we find one of the default functions of PCF control and in that function we try to append some HTML elements to default HTMLDivElement of PCF control i.e container. HTML part contains one label and input type Html element and we can see label text and place holder of input element we retrieve from context.resources.getString() function. With the help of this function, we can read the language data from .resx (resource) files. We need to pass XML_Tag_Name which will retrieve text from resource files with respect to their XML tag name. Also, language data always read on the basis of current logged in user of selected language code (for eg. 1033, 1036)of Dynamic 365 CRM.<\/p>\n
In our example we use context.resources.getString(“agelbl”) & context.resources.getString(“agetbplaceholder”) , it will retrieve the result as follows:<\/p>\n
1. If logged in user have English language as selected then result will be retrieved language data from [PCF_ControlName].1033.resx <\/strong>and further it will be filtered by XML tag name i.e \u201cagelbl<\/em><\/strong>\u201d and \u201cagetbplaceholder<\/em><\/strong>\u201d.<\/p>\n
\"PCF<\/p>\n
2. If logged in user have Frech language as selected then result will be retrieved language data from [PCF_ControlName].1036.resx <\/strong>and further it will be filtered by XML tag name i.e \u201cagelbl<\/em><\/strong>\u201d and \u201cagetbplaceholder<\/em><\/strong>\u201d.<\/p>\n
\"PCF<\/p>\n
Conclusion<\/strong><\/h2>\n
In this way, if you want to run our PCF control in more than one language then we can use resources file and access language data from that file using ComponentFramework.Context.getString([XML_Tag_Name])<\/em><\/strong>. We just need to create a language tag for the text which we want to display in different languages and add into resource files.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction In this blog, we will see how to run PCF Control in multiple languages. Let\u2019s consider a scenario where we have one PCF field control, which contains some user interface part which we currently display in only one language i.e English. Now, we want to display PCF control UI part in more than one\u2026 Read More: How to run PCF Control in Multilanguage using .resx (resource)\u2026 »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":22880,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,18,19,44,1929,1985],"tags":[1170,1941],"class_list":["post-22873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-dynamics-crm","category-power-apps","category-pcf","category-power-automate","tag-microsoft-powerapps","tag-pcf-control"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t