![\"PCF](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/09\/PCF-Control-ink.jpeg\")
<\/p>\nRecently in one of our project, we had come acorss a requirement where we needed to create a PCF control for multi select optionset field \u00a0with which user can visualize the values in a list form.<\/p>\n
In the new updates of PowerApps Component Framework, with the help of MultiSelectOptionSet type property, now we can develop the PCF control for multi select optionset field. We have given an example, where we create a PCF control for multi select optionset field and added the same on custom multi select optionset field.<\/p>\n
<\/p>\n
Given below are the steps to achieve the same:<\/p>\n
1<\/strong>. First we need to add MultiSelectOptionSet property in ControlManifest.Input.xml file. The code is as follows:<\/p>\n <property\u00a0name=”sampleProperty”\u00a0display-name-key=”Property_Display_Key”\u00a0description-key=”Property_Desc_Key”\u00a0of-type=”MultiSelectOptionSet”\u00a0usage=”bound”\u00a0required=”true”\u00a0\/><\/p>\n 2<\/strong>. Now define the IInput and IOutputs for multi select optionset in ManifestTypes.d.ts<\/strong> file.<\/p>\n 3<\/strong>. On load of multi select PCF control, set the current field value in multi select control inside init function.<\/p>\n 4<\/strong>. Add the action on select of multi select optionset to select\/deselect the option.<\/p>\n 5<\/strong>. Set the changed value of multi select optionset using getOutputs function.<\/p>\n In this way, with the help of new MultiSelectOptionSet type property, we can easily create the PCF control for the multi select optionset field.<\/p>\n Introduction: Recently in one of our project, we had come acorss a requirement where we needed to create a PCF control for multi select optionset field \u00a0with which user can visualize the values in a list form. In the new updates of PowerApps Component Framework, with the help of MultiSelectOptionSet type property, now we can\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"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":[1929,2361],"tags":[1941],"class_list":["post-29397","post","type-post","status-publish","format-standard","hentry","category-pcf","category-technical","tag-pcf-control"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/29397","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=29397"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/29397\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=29397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=29397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=29397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\/\/Define\u00a0IInputs\u00a0and\u00a0IOutputs\u00a0Type.\u00a0They\u00a0should\u00a0match\u00a0with\u00a0ControlManifest\r\nexport\u00a0interface\u00a0IInputs\u00a0{\r\nsampleProperty:\u00a0ComponentFramework.PropertyTypes.MultiSelectOptionSetProperty;\r\n}\r\nexport\u00a0interface\u00a0IOutputs\u00a0{\r\nsampleProperty?:\u00a0number[];\r\n}\r\n<\/pre>\n\/\/Create a select option for each option specified by the target OptionSet and add it to\u00a0the\u00a0dropdown\r\n(context.parameters.sampleProperty\u00a0as\u00a0ComponentFramework.PropertyTypes.MultiSelectOptionSetProperty).attributes?.Options.forEach(option\u00a0=>\u00a0{\r\nconst dropdownOption = document.createElement(\"option\");\r\ndropdownOption.setAttribute(\"value\", String(option.Value));\r\ndropdownOption.innerText = option.Label;\r\ndropdownOption.onclick = this.updateIndividualSelected.bind(this, dropdownOption);\r\ndropdownOption.selected = this._selectedOptions.includes(option.Value);\r\nthis._dropdown.appendChild(dropdownOption);\r\n});\r\n<\/pre>\n\/\/onClick\u00a0callback\u00a0for\u00a0individual\u00a0options\u00a0in\u00a0the\u00a0dropdown.\u00a0Clicking\u00a0an\u00a0option\u00a0will\u00a0add\/remove\u00a0it\r\nprivate\u00a0updateIndividualSelected(option:\u00a0HTMLOptionElement):\u00a0void\u00a0{\r\nconst value = Number(option.getAttribute(\"value\"))\r\nconst index = this._selectedOptions.indexOf(value);\r\nif (index === -1) {\r\nthis._selectedOptions.push(value);\r\noption.selected = true;\r\noption.className = \"TestBlue\";\r\n} else {\r\nthis._selectedOptions.splice(index, 1);\r\noption.selected = false;\r\noption.className = \"TestWhite\";\r\n}\r\nthis._notifyOutputChanged();\r\n}\r\n<\/pre>\n\/\/It\u00a0is\u00a0called\u00a0by\u00a0the\u00a0framework\u00a0prior\u00a0to\u00a0a\u00a0control\u00a0receiving\u00a0new\u00a0data.\r\npublic\u00a0getOutputs():\u00a0IOutputs\r\n{\r\n\/\/Send the currently selected options back to the ComponentFramework\r\nreturn { sampleProperty: this._selectedOptions } ;\r\n}\r\n<\/pre>\nConclusion:<\/h2>\n
![\"User](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/09\/User-Adoption-Monitor.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"