Javascript

Using javascript library to show or hide a tab based on optionset value

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:

Using Java Script 1

 

Using Java Script 2

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.

Using Java Script 3

2. Use the Text Editor to copy the javascript code above and paste into the new Web Resource

Using Java Script 4

Using Java Script 5

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.

Using Java Script 6

4. Open the field properties for the relevant optionset (Relationship Type in this example) and add the new Web Resource as a Form Library.

Using Java Script 7

Using Java Script 8

Using Java Script 9

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.

Using Java Script 10

Using Java Script 11

Using Java Script 12

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.

Using Java Script 13

Using Java Script 14

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".

Using Java Script 15

8. Save the changes to the form and Publish All Customisations (not just the entity or form).

Using Java Script 16

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.

Using Java Script 17

Using Java Script 18

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.

Version 8.0

Version 8.1

Version 8.2

Contact Us today for more information on using JavaScript within Microsoft Dynamics 365 or visit the Video Tutorial page for further insight.


10 Mar 2017

About the Author

James CTwo is our blogging alter ego for the Dynamics CRM and Web experts here at C2. We have a passion for anything CRM, Web Design or Social Media. We love writing about it! Find us on YouTube & Twitter.

comments powered by Disqus

Our White Papers

Discover the content that matters to you on business transformation. Explore how you can drive customer engagement, empower your team, optimise your businesses and revolutionise your products with the next digital revolution. For more information visit our white paper library.

Library

C2 Newsletter

Our newsletter is sent on a quarterly basis, offering detailed insights into all aspects of business transformation with Microsoft cloud technologies. We also promote upcoming events and special offers throughout the year. Sign up to get involved today.

Dynamics 365 Office 365 Power BI Silver Partner