I wanted to hide sections with JavaScript and I could not find many resources online, so I want to share my code with everyone here.
Hide All Sections in a Tab
The code sample below shows how to hide all sections in a tab. Note the executionContext parameter comes from the page load or other form events and the tabName variable, will need to be set, which is globally scoped, which you will see in later code samples.
Display sections in a Tab based on the Current Stage of the Business Proces Flow
The code below shows how to display sections dynamically as a user moves through a business process flow. This is a pattern or recipe I sometimes use to improve the usability of Dynamics CRM forms.
The code will display;
section 1 when Stage1 of the business process flow is active.
section 1 and 2 when Stage2 of the business process flow is active.
section 1, 2 and 3 when Stage3 of the business process flow is active.
section 1,2,3 and 4 when Stage4 of the business process flow is active.
A quick overview of the code.
this.formOnLoad
This is the entry point to the code and is configured on the form properties.
The formOnLoad method wires up the onstage changed event for the business process flow, then it calls the onStageChanged event handler, thus displaying the correct sections on form load.
The business process flow on stage change occurs when a user hits next on the current stage of a business process flow.
var onStageChanged = function(executionContext)
The onStageChanged method handles the business process flow on stage change event, which is triggered when a user clicks the next button on a business process flow.
The onStageChagned method firstly hides all sections, then shows sections based on the current active stage.
The sections to displayed are configured in the stageSections array. The index of the array is the stage and the items are the sections to display ie. stageSections[index/stage] = ['name of the section to display', name of the section to display'].
var hideAllSections = function(executionContext) {
The hide all sections method is self-explanatory and hides all sections in a tab.
Summary
This article demonstrates how to hide sections, hide all sections in a tab and hide sections based on the current active stage in a business process flow using JavaScript. Also, we don't discuss it but the JavaScript snippet demonstrates namespacing.
Namespacing is a best practice when writing JavaScript for Dynamics CE or Power Platform Model Applications. Namespacing ensures new JavaScript methods do not conflict with existing methods, this is achieved by adding new methods to the scope of a namespace instead of making the methods global.
My JavaScript skills are not as great as many other developers so if you can see any code improvements please add a comment. I am always interested in improving my craft.
