Hide and Show JavaScript for Dynamics 365

Following is a sample script to hide and show form elements using the new Client API object model for Dynamics 365 Version 9. In the example below, we are updating the visibility of various form elements (shown in the image below in red) based on the value of the ‘Relationship Type’ option set (shown in the image below in blue).

0 - Hide Show Requirement


var tdh = window.tdh || {};

(function () {
	
    this.hideShow = function (executionContext) {
        
		var formContext = executionContext.getFormContext();
	
		//Define 'Relationship Type' field		 
		var attrRelationshipType = formContext.getAttribute("customertypecode");
		
		if (attrRelationshipType != null) {
			
			//Get the value of 'Relationship Type' optionset
			var valRelationshipType = attrRelationshipType.getValue();
				
			//Define Fields to hide and show
			var ctrlBillingAccount = formContext.getControl("new_billingaccount");
			var ctrlAnnualRevenue = formContext.getControl("revenue");
			
			//Define Tabs to hide and show
			var ctrlTabCustomer = formContext.ui.tabs.get("tab_customer");
			var ctrlTabVendor = formContext.ui.tabs.get("tab_vendor");
				
			//Define Section to hide and show
			var ctrlTabSummary = formContext.ui.tabs.get("SUMMARY_TAB");
			if (ctrlTabSummary != null) {
				ctrlSecContacts = ctrlTabSummary.sections.get("Summary_section_6");
			}
				
			if (valRelationshipType != null && ctrlBillingAccount != null 
			&& ctrlAnnualRevenue != null && ctrlTabCustomer != null 
			&& ctrlTabVendor != null && ctrlSecContacts != null) {
					
				if (valRelationshipType == 3) {
					/* 3 = Customer 
						Show 'Billing Account' and 'Annual Revenue' field, 
						'Customer' tab and 'Contacts' section in the 'Summary' tab
						Hide 'Vendors' Tab
						
					*/
					ctrlBillingAccount.setVisible(true);
					ctrlAnnualRevenue.setVisible(true);
					ctrlTabCustomer.setVisible(true);
					ctrlTabVendor.setVisible(false);
					ctrlSecContacts.setVisible(true);
						
				} else if (valRelationshipType == 11) {
					/* 11 = Vendor 
						Hide 'Billing Account' and 'Annual Revenue' field, 
						'Customer' tab and 'Contacts' section in the 'Summary' tab
						Show 'Vendors' Tab
					*/
					ctrlBillingAccount.setVisible(false);
					ctrlAnnualRevenue.setVisible(false);
					ctrlTabCustomer.setVisible(false);
					ctrlTabVendor.setVisible(true);
					ctrlSecContacts.setVisible(false);						
				}
			} else {
				alert("Error in tdh.HideShow: The required components were not found on the form.");
			}		
		}
    }	
}).call(tdh);


If you have any questions or if this article needs corrections, please leave a comment below. Thanks for stopping by!

Can't find what you're looking for? Leave a comment below and I promise to add it for you!

%d bloggers like this:

Like what you read? Read more!

Don't miss the action - subscribe and receive notifications of new posts by email.

Subscribe!