Version used for this post : CRM 2013 Online trial
Lets consider a scenario.
We have a custom entity called Systems. And it has 2 option sets.
1. Category- Values - Software, Hardware
2. Sub Category - Values - Business App, OS, Desktop and Laptop.
The option set values are dependent as shown in the below diagram.
For instance, when we select Software we should only see Business App and OS.
Firstly we need to understand the steps to be done for this functionality. From a helicopter view,
- Option sets should be defined with necessary values.
- XML Config file ( Here we define the dependency, sample is given below. We need to upload this file as a webresource)
- SDK.DependentOptionSet.js ( Could be found in SDK\SampleCode\JS\FormScripts . We need to upload this file as a webresource)
- Js function calls to be done.
1. Lets have a quick look at the option sets.
Category:
Sub Category:
2. The next step is to configure the xml file. Its based on the option set values as shown below.
Here is the contents of our XML file - SystemsOptionSetConfig.xml
<DependentOptionSetConfig entity="new_system" >
<ParentField id="new_category"
label="Category">
<DependentField id="new_subcategory"
label="Sub Category" />
<Option value="100000001"
label="Software">
<ShowOption value="100000000"
label="Business App" />
<ShowOption value="100000001"
label="OS" />
</Option>
<Option value="100000000"
label="Hardware">
<ShowOption value="100000002"
label="Desktop" />
<ShowOption value="100000003"
label="Laptop" />
</Option>
</ParentField>
</DependentOptionSetConfig>
Here is the contents of our XML file - SystemsOptionSetConfig.xml
<DependentOptionSetConfig entity="new_system" >
<ParentField id="new_category"
label="Category">
<DependentField id="new_subcategory"
label="Sub Category" />
<Option value="100000001"
label="Software">
<ShowOption value="100000000"
label="Business App" />
<ShowOption value="100000001"
label="OS" />
</Option>
<Option value="100000000"
label="Hardware">
<ShowOption value="100000002"
label="Desktop" />
<ShowOption value="100000003"
label="Laptop" />
</Option>
</ParentField>
</DependentOptionSetConfig>
Entity name, field names and values should be defined correctly. Also structure is important as the SDK dependent option set js works based on this.
Here Parent field is Category and the dependent field is Sub Category. Dependency is defined in terms of Option and Showoption.
Here Parent field is Category and the dependent field is Sub Category. Dependency is defined in terms of Option and Showoption.
3. We need to double check the values, as the dependency is purely defined in the above xml.
4. Lets upload the xml config file. Please note that the name of the webresource xml is "new_SystemsOptionSetConfig.xml". After save operation, we need to publish the webresource.
5. We need to upload the SDK.DependentOptionSet.js ( located in SDK\SampleCode\JS\FormScripts ) as a webresource. The next step is to save and publish this webresource. Please note that the name of this js file is new_SDK.DependentOptionSet.js. This js file is the core of this functionality.
6. Next step is to configure form. So lets navigate to System entity form.We need to add our core js code to the Form Library. as shown below.
7. Function call on the OnLoad event is the next step. We need to click on the Add button found on the Functions section. So here the function is SDK.DependentOptionSet.init and parameter is our xml config name "new_SystemsOptionSetConfig.xml"
8. So our Form onload event looks like this.
9. As the next step we need to configure the function call on the OnChange event of the parent field ( here its Category)
For instance, When we change the Category value, the Sub Category should be populated accordingly.
So double click on the field found on the form design. And click on the Add button as shown below. In this case, we do not need to add Form library as it was added earlier.
10. Here the function call is
SDK.DependentOptionSet.filterDependentField
And parameters are "new_category","new_subcategory"
lets say Okay and press Okay. And our final step is Save the form and publish the form.
11. During testing it was found there was a small syntax error in the SDK.DependentOptionSet.js file. (One curly bracket was extra. So we need to comment it. Please note that the SDK was Downloaded on 12/10/2013.) Hopefully this will be resolved in the upcoming SDK release. For our convenience, its explained here. This change could be done either before saving it as webresource OR by editing the webresource. The change is highlighted below.
12. And here is our final apple pie.
13 . In future , if we have some change in the option set values or if we need to append some option set values, all we need to do is amend the option set field in CRM and then update the xml configuration webresource file accordingly. No change required in the js file.
5. We need to upload the SDK.DependentOptionSet.js ( located in SDK\SampleCode\JS\FormScripts ) as a webresource. The next step is to save and publish this webresource. Please note that the name of this js file is new_SDK.DependentOptionSet.js. This js file is the core of this functionality.
6. Next step is to configure form. So lets navigate to System entity form.We need to add our core js code to the Form Library. as shown below.
7. Function call on the OnLoad event is the next step. We need to click on the Add button found on the Functions section. So here the function is SDK.DependentOptionSet.init and parameter is our xml config name "new_SystemsOptionSetConfig.xml"
8. So our Form onload event looks like this.
9. As the next step we need to configure the function call on the OnChange event of the parent field ( here its Category)
For instance, When we change the Category value, the Sub Category should be populated accordingly.
So double click on the field found on the form design. And click on the Add button as shown below. In this case, we do not need to add Form library as it was added earlier.
10. Here the function call is
SDK.DependentOptionSet.filterDependentField
And parameters are "new_category","new_subcategory"
lets say Okay and press Okay. And our final step is Save the form and publish the form.
11. During testing it was found there was a small syntax error in the SDK.DependentOptionSet.js file. (One curly bracket was extra. So we need to comment it. Please note that the SDK was Downloaded on 12/10/2013.) Hopefully this will be resolved in the upcoming SDK release. For our convenience, its explained here. This change could be done either before saving it as webresource OR by editing the webresource. The change is highlighted below.
12. And here is our final apple pie.
13 . In future , if we have some change in the option set values or if we need to append some option set values, all we need to do is amend the option set field in CRM and then update the xml configuration webresource file accordingly. No change required in the js file.
This works great in the Explorer web client. When i test it in Chrome, Safari or Outlook plugin i receive an onChange error opening saved records. Creating new records works ok. Is this a known issue or is it just me?
ReplyDeleteHi Karl, sorry for the delayed response. Could you please paste the error message here.
ReplyDeleteAny idea if this works if the two fields are part of a Business Process Flow??
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteWorking fine With IE but facing issue with other browsers sometime onchange at following line :
ReplyDeleteXrm.Page.data.entity.attributes.get(parent).fireOnChange();
This comment has been removed by the author.
ReplyDeleteGetting the same "onChange" issue as Karl Andersson from 4.11.2013. In IE everything is groovy, but when opening saved records using Chrome, Safari, Firefox, Opera, etc. I'm getting an 'onChange' error - it seems that the browser is receiving a NULL value where a control name is expected. What gives? Am I missing a config step?
ReplyDeletehi,
DeleteI get the same problems Is this issue is solved?
This comment has been removed by the author.
ReplyDeleteHi MANJALY,
ReplyDeleteHow can I change it for more than two tier scenario like:
Category => Webinar
Subcategory => Industry
Topic => Health care
Year => 2014
Works fine. Thanks. Saved my time.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI had a Dependent Option set all correctly set up in CRM and it was working fine. It was between 2 fields and I had it set up just as it is in your example above. A few months ago I upgraded our CRM 2011 On-Premise system to CRM 2015 On-Premise - it was quite a hassle (total understatement!!!!) but eventually most problems have been worked out. The Dependent Option Set code still worked fine.
ReplyDeleteWe have now added several entities, multiple forms and numerous business rules. Once the business rules were added to our test system (CRM 2015, just as our Production site), the Dependent Option Set code no longer works. I have examined all of files (.xml, .js) and all appear to be "correct." During my research into why my js code might not be working, I found my references to the fact that if a field’s value is set by a Business Rule, it’s onChange event will not fire – meaning that if there is any code in that event, it will not work. So, I examined all of the Business Rules associated with that field and, upon finding any, I converted it to js code. After doing this, my Dependent Option Set code still does not work.
My next move is to see if I can programmatically fire onChange my Dependent Option Set code…although I am not quite sure where to locate that code within the form.
So, any ideas, suggestions, advice on either the cause of the problem and/or a possible resolution would be greatly appreciated.
Thanks, Michelle
Thanks Michelle B,it help me a lot
ReplyDeleteI have been having issues with this in CRM On-Prem 2016. We have 4 layers (3 are dependent). It seems to work fine until you reopen a saved record. When you reopen the record, the last 2 dependent fields are empty and when you close the record it saves NULL to the database in place of the values that were previously there. Anyone found a way to fix this?
ReplyDeleteI had same issue. i have customized JavaScript and added grand child
Deletemapping.dependent = SDK.Util.selectSingleNode(ParentField, "DependentField").getAttribute("id");
mapping.grandchild = SDK.Util.selectSingleNode(ParentField, "GrandChildField")? SDK.Util.selectSingleNode(ParentField, "GrandChildField").getAttribute("id"): null;
var GrandChildField = DependentOptionSet.grandchild ? Xrm.Page.data.entity.attributes.get(DependentOptionSet.grandchild):null;
var CurrentGrandChildFieldValue = GrandChildField ? GrandChildField.getValue() : "";
if(GrandChildField)
GrandChildField.setValue(CurrentGrandChildFieldValue);
This comment has been removed by the author.
DeleteHi Vivek, tried to edit the JavaScript but with no success. An help would be appreciated
DeletePlease use legacy form rendering. This setting can be found under Settings -> Administration -> System Settings -> General. Select “Yes” under “Use legacy form rendering” to enable this mode for all users.
ReplyDelete