{"id":15279,"date":"2019-04-01T11:37:20","date_gmt":"2019-04-01T11:37:20","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=15279"},"modified":"2019-04-01T11:37:20","modified_gmt":"2019-04-01T11:37:20","slug":"cascading-of-two-multi-select-option-set-fields-in-dynamics-365-v9-0","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2019\/04\/cascading-of-two-multi-select-option-set-fields-in-dynamics-365-v9-0\/","title":{"rendered":"Cascading of Two Multi-Select Option Set fields in Dynamics 365 v9.0"},"content":{"rendered":"

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

Microsoft introduced Multi Select Option Set in Dynamics 365 V9.0, which will help us to select more than one option.<\/p>\n

Recently we had a business requirement, where the client required multi-select option set values to populate programmatically on selection of another multi-select option set.<\/p>\n

To achieve this, first, we need to create two multi-select option set fields in CRM e.g. Mobile Company (Parent Multi-Select option set) and Mobile Handset (Child Multi-Select option set).<\/p>\n

Then we need to create one JSON web resource in Dynamics 365 CRM, where we can define child option set values against each parent option set value.<\/p>\n

JSON<\/strong><\/h2>\n

E.g.<\/p>\n

var JsonDataobj =<\/p>\n[{<\/p>\n

mobileCompany: 100000010,<\/p>\n

mobileHandset: [<\/p>\n

{value: 100000011,text: ‘Nokia 6.1’},<\/p>\n

{value: 100000012,text: ‘Nokia 7.1’},<\/p>\n

{value: 100000013,text: ‘Nokia 8.1’}<\/p>\n

]},<\/p>\n

{<\/p>\n

mobileCompany: 100000020,<\/p>\n

mobileHandset: [<\/p>\n

{value: 100000021,text: ‘iPhone X’},<\/p>\n

{value: 100000022,text: ‘iPhone 7’}<\/p>\n

]},<\/p>\n

{<\/p>\n

mobileCompany: 100000030,<\/p>\n

mobileHandset: [<\/p>\n

{value: 100000031,text: ‘Samsung S8’}<\/p>\n

]\n

}]\n

Now onLoad of Entity Form and onChange of parent Multi-Select option set we need to call below script.<\/p>\n

Script<\/strong><\/h2>\n

cascadingMultiOptionSet(executionContext): void {<\/p>\n

\/\/\/ <summary><\/p>\n

\/\/\/\u00a0 This function trigger on onload of form and onchange of Parent multi-option set field and set values of child multi option set field<\/p>\n

\/\/\/ <\/summary><\/p>\n

\/\/\/ <returns type=”void” \/><\/p>\n

var functionName = “cascadingMultiOptionSet”;<\/p>\n

var newChildOptArr = [];<\/p>\n

var position = 0;<\/p>\n

var newSelectedChildOpts = new Array();<\/p>\n

try {<\/p>\n

\/\/JSON data retrieved from webresource<\/p>\n

var parentChildCollection = JsonDataobj;<\/p>\n

var formContext = executionContext.getFormContext();<\/p>\n

\/\/get parent’s selected\u00a0 option values<\/p>\n

var selectedParentOptValue = formContext.getAttribute(“ikl_mobilecompanies”).getValue();<\/p>\n

\/\/check if value selected or not<\/p>\n

if (selectedParentOptValue != null && selectedParentOptValue.length > 0) {<\/p>\n

\/\/add value from parentChildCollection array to newChildOptArr.<\/p>\n

for (var i = 0; i < selectedParentOptValue.length; i++) {<\/p>\n

newChildOptArr = newChildOptArr.concat((parentChildCollection.find(x => x.mobileCompany == selectedParentOptValue[i])).mobileHandset);<\/p>\n

}<\/p>\n

\/\/get all options from child option set<\/p>\n

var existingChildOptValues = formContext.getControl(“ikl_mobilehandset”).getOptions();<\/p>\n

\/\/get selected options from child optionset<\/p>\n

var selectedChildOptValue = formContext.getAttribute(“ikl_mobilehandset”).getValue();<\/p>\n

var childOptCount = existingChildOptValues.length;<\/p>\n

\/\/remove options from child optionset<\/p>\n

for (var i = childOptCount – 1; i >= 0; i–) {<\/p>\n

\/\/check if option is not selected or not present in newChildOptArr array then remove that option<\/p>\n

if (selectedChildOptValue == null || selectedChildOptValue.indexOf(parseInt(existingChildOptValues[i].value)) <= -1 || (newChildOptArr.find(x => x.value == existingChildOptValues[i].value)) == undefined) {<\/p>\n

\/\/remove options from child options set<\/p>\n

formContext.getControl(“ikl_mobilehandset”).removeOption(existingChildOptValues[i].value);<\/p>\n

}<\/p>\n

}<\/p>\n

\/\/set position of new element<\/p>\n

position = selectedChildOptValue == null ? 0 : selectedChildOptValue.length;<\/p>\n

\/\/clear selected values from child option set<\/p>\n

formContext.getAttribute(“ikl_mobilehandset”).setValue(null);<\/p>\n

\/\/add new options from newChildOptArr to child option set field<\/p>\n

for (var i = 0; i < newChildOptArr.length; i++) {<\/p>\n

\/\/if value aready selected then don’t add that value<\/p>\n

if (selectedChildOptValue == null || selectedChildOptValue.indexOf(parseInt(newChildOptArr[i].value)) <= -1) {<\/p>\n

\/\/addOptions with values and position<\/p>\n

var optionSet = new Object();<\/p>\n

optionSet.value = newChildOptArr[i].value;<\/p>\n

optionSet.text = newChildOptArr[i].text;<\/p>\n

formContext.getControl(“ikl_mobilehandset”).addOption(optionSet, position++);<\/p>\n

}<\/p>\n

\/\/add previously selected option set to newSelectedChildOpts array<\/p>\n

if (selectedChildOptValue != null && selectedChildOptValue.indexOf(parseInt(newChildOptArr[i].value)) > -1) {<\/p>\n

newSelectedChildOpts = newSelectedChildOpts.concat(parseInt(newChildOptArr[i].value, 10));<\/p>\n

}<\/p>\n

}<\/p>\n

}<\/p>\n

else\/\/if parent options not selected then clear child options<\/p>\n

{<\/p>\n

formContext.getAttribute(“ikl_mobilehandset”).setValue(null);<\/p>\n

formContext.getControl(“ikl_mobilehandset”).clearOptions();<\/p>\n

}<\/p>\n

\/\/set value of selected child option set<\/p>\n

if (newSelectedChildOpts != null && newSelectedChildOpts.length > 0) {<\/p>\n

formContext.getAttribute(“ikl_mobilehandset”).setValue(newSelectedChildOpts);<\/p>\n

}<\/p>\n

}<\/p>\n

catch (ex) {<\/p>\n

throw new Error(ex);<\/p>\n

}<\/p>\n

}<\/p>\n

Result<\/strong><\/h2>\n

1)<\/strong> If we select Nokia in Mobile Company Multi-select option set, then the Mobile Handset will bind only mobile handsets of Nokia.<\/p>\n

\"Cascading<\/p>\n

2)<\/strong> If we select Apple and Nokia in Mobile Company, then both Apple and Nokia handset will be displayed in Mobile Handsets multi-select option set and the selected values of Nokia will remain the same.<\/p>\n

\"Cascading<\/p>\n

3)<\/strong> If we remove Nokia from Mobile Company, then only Apple company handsets will be displayed in Mobile Handset multi-select option set and the selected options of Nokia handset will be cleared.<\/p>\n

\"Cascading<\/p>\n

4)<\/strong> If the Mobile Company doesn\u2019t contain any value, then Mobile Handset multi-select option will remain empty.<\/p>\n

\"Cascading<\/p>\n

In order to see saved values of the multi-select option set for both parent and child it is necessary to trigger the above script function on a load of form.<\/p>\n

Conclusion<\/strong><\/h2>\n

We can achieve cascading of two multi-select option set from the above given script.<\/p>\n

\"Click2Clone-One-Click-Productivity-App-to-Copy_clone-Dynamics-365_CRM-Records\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction Microsoft introduced Multi Select Option Set in Dynamics 365 V9.0, which will help us to select more than one option. Recently we had a business requirement, where the client required multi-select option set values to populate programmatically on selection of another multi-select option set. To achieve this, first, we need to create two multi-select\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":15284,"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":[13,16,18,19],"tags":[],"class_list":["post-15279","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizations","category-dynamics-365","category-dynamics-365-v9-2","category-dynamics-crm"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/15279","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=15279"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/15279\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/15284"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=15279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=15279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=15279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}