Back to Blog Listing
Anyone that has used Business Rules to customise a form within Dynamics 365 (CRM) knows that there is a missing capability to show and hide Tabs based on field values. The result means the only way to implement this functionality is to resort to javascript development.
With this blog we will share a way to do this with some standard javascript functions and customisation. It is assumed that the reader of this post has experience in customising CRM forms but does not need to know javascript.
The finished product should allow you to set an optionset field to show or hide a tab on the form when a certain text value is selected, as shown below:
Quick Steps
Below are the steps to implement this quickly if you already know what you are doing. Further down the post you will find the full, step-by-step, details.
1. Create a new Script (JScript) Web Resource and paste in the javascript code provided below.
2. Add the new Web Resource as a Form Library to the relevant CRM entity form.
3. Add an OnChange event to the optionset field to target this library and call the function named ToggleTabOnValue. Tick the box for Pass execution context as first parameter and in the text box of parameters add the name of the tab and the text of the optionset that should show that tab, these should be enclosed in quotes and separated by a comma. An example: "CustomerDetails","Customer"; capitalisation matters here. Perform this step for as many fields and values you need this to apply to.
4. Add a new function for the Form OnLoad event targeting the same library but calling the function FireChangeEventsOnLoad. The text box of parameters should be a vertical bar (|) separated list of field names that you have added in step 3 above. If there is only one field then it would be “new_fieldname” otherwise multiple fields would be “new_fieldname1|new_field|name”. The entire list should be enclosed in quotes (“).
5. Publish All Customisations and you should now have a field showing/hiding a tab based on the value of the optionset(s).
The javascript code
Copy and paste this code into a new Web Resource.
function FireChangeEventsOnLoad(attributeNames){
// Validate the arguments passed to the function
// attributeNames expects string of format: "new_field|name|description"
if (typeof attributeNames !== 'string')
throw new Error('attributeNames must be a string of attribute names');
// Get array of attribute names to fire onchange event
var attributes = attributeNames.split('|');
// Create empty array to hold errors
var attributesNotOnForm = [];
// Loop through the attribute names and fire onchange event if available
for (var index = 0; index < attributes.length; index++) {
var attributeName = attributes[index];
var attribute = Xrm.Page.getAttribute(attributeName);
if (attribute === null) {
attributesNotOnForm.push(attributeName);
continue;
}
attribute.fireOnChange();
}
// If there are errors then display alert dialog
if (attributesNotOnForm.length > 0)
Xrm.Utility.alertDialog('Could not find the following attributes on the form: \n' + attributesNotOnForm.join(',\n'));
}
function ToggleTabOnValue(eCxt, tabName, optionValue) {
// Validate the arguments passed to the function
if (typeof eCxt !== 'object' || typeof eCxt.getEventSource !== 'function')
throw new Error('Event Context has not been passed');
if (eCxt.getEventSource().getAttributeType && eCxt.getEventSource().getAttributeType() !== 'optionset')
throw new Error('attributeType is not optionset. Event can only be registered on an optionset');
if (typeof tabName !== 'string')
throw new Error('tabName must be the name of a Tab');
if (typeof optionValue !== 'string')
throw new Error('optionValue must be the Text value of an OptionSet');
// Get Attribute that triggered event
var eventAttribute = eCxt.getEventSource();
// Get Tab to Show/Hide
var tab = Xrm.Page.ui.tabs.get(tabName);
if (tab === null)
throw new Error('The given tabName does not exist on the form. tabName == ', tabName);
// Show Tab if Text matches, otherwise hide it.
if (eventAttribute.getText() === optionValue)
tab.setVisible(true);
else
tab.setVisible(false);
}
Detailed Steps
Below is a detailed step-by-step guide with pictures. It is not exhaustive due to our assumption that you are a customiser of the system already.
1. Create a new Script (JScript) Web Resource with relevant name and details.
2. Use the Text Editor to copy the javascript code above and paste into the new Web Resource
3. Save and close the Web Resource window. Open the entity form you want to add this library to. For this example we are adding the change event to the standard Account Relationship Type optionset and have created a new Tab on the form called CustomerDetails as shown below.
4. Open the field properties for the relevant optionset (Relationship Type in this example) and add the new Web Resource as a Form Library.
5. Add a new Event Handler to call the ToggleTabOnValue function from the new library. Make sure to tick the box to Pass event context as first parameter and in the parameters text box the first parameter should be the name of the tab (“CustomerDetails” here) and the second parameter after the comma should be the text value of the optionset to trigger the visibility of the tab (“Customer” here). It is important to wrap the text in quotes and include the comma to separate the values.
6. Currently that will show or hide the tab whenever the optionset field value is changed, but we also want to do this when the page loads. For that there is another function that will trigger the OnChange event of all the named fields, which in turn will trigger the function events we have just defined above. To do this we need to add a new Form OnLoad event in the Form Properties.
7. Complete the fields for the new Form OnLoad event as below, DO NOT tick the pass event context as first parameter box and in the parameters text box add a list of field names that should have their OnChange event triggered; this should be separated by the vertical bar (|) character and the whole lot enclosed in quotes. A single field is shown below, multiple fields should look like: "customertypecode|name".
8. Save the changes to the form and Publish All Customisations (not just the entity or form).
The result of this guide should be that selecting Customer in the Relationship Type field should show the Customer Details tab and any other value should hide it.
Download
Below are links to download the Web Resource already created so that you do not need to perform that step. Simply import the relevant version of the solution below and follow the steps above to add to forms.
Contact Us today for more information on using JavaScript within Microsoft Dynamics 365 or visit the Video Tutorial page for further insight.