JavaScript is an important tool used in Microsoft Platforms to interact with entity forms and is executed for events that occur on the form. JavaScript form customizations is one of the best options needed to control business processes.

One of the benefits of JavaScript Form programming is that they are immediate and doesn’t need data to be submitted.

REQUIREMENT:

In this case, our requirement is to show and hide the “Consultations” Subgrid in the Contact form based on the condition that if the field “Account Name” is empty, then show Subgrid else hide Subgrid using JavaScript as shown in the figure below.

Fig 1.

Step 1: First of all, get the schema names of the field “Account Name” and “Consultations” Subgrid.

This can also be done by opening the form editor and then double clicking on the specific field and Subgrids as shown in the figures below.

Fig 2.
Fig 3.

Step 2: Write the JavaScript Code for Show and Hide Subgrids.

function ShowhideSubgrid(executionContext){

var formContext = executionContext.getFormContext();// get the form Context

var accountname = formContext.getAttribute(“parentcustomerid”).getValue();// get the value of accountname

if(accountname !== null)

{

               formContext.getControl(‘Subgrid_consultations’).setVisible(false);//Hide Subgrid

}

else

{    

formContext.getControl(‘Subgrid_consultations’).setVisible(true);//Show Subgrid

}

}

Step 3: Register “ShowhideSubgrid” function on form load.

For that, go to Form Editor >> Form Properties >> Add New Library in Form Libraries >>Click New. Enter the already uploaded JavaScript web content to the New Library in Form Libraries as shown in Figures below.

Fig 4.

As per the Fig.4, go to form properties in form editor to add new libraries.

Fig 5.

As noted in the Fig.5, Click ‘Add’ button in form libraries for adding new libraries.

Fig 6.

Here, in the Lookup records, search for the JavaScript code which was already uploaded in the web resources, using its schema name and click ‘Add’ to insert them into Form Libraries as shown in Fig.6.

Then, click on the JavaScript record to view the JavaScript code as shown in Fig.7.

Fig 7.
Fig 8.

Now, click on the ‘Add’ button in event handlers to add the function ‘ShowhideSubgrid’ on loading of form. Also, select the ‘control’ as Form and ‘Event’ as OnLoad as shown in Fig.8.

Fig 9.

Now, as shown in Fig.9, choose the respective JavaScript library and enter the ‘ShowhideSubgrid’ function. Also, check the ‘Pass execution context as first parameter’ box.

Step 4: Register “ShowhideSubgrid” function on Change of the Field “Account Name”.

Fig 10.
Fig 11.

As explained in the above figures, in order to register the function ‘ShowhideSubgrid’ on change of the field “Account Name”, double click on the field to reach to the events tab.

In the events tab, you can click on the ‘Add’ button by selecting the respective field “Account Name” in ‘Control’ and setting the ‘Event’ to ‘OnChange’.

Fig 12.

Similarly, in the Handler Properties, choose the respective JScript library and enter the ‘ShowhideSubgrid’ function. Also, check the ‘Pass execution context as first parameter’ box as shown in Fig.12.

Fig 13.

Now, before leaving the Form Editor, save and publish the customizations performed as shown in Fig.13.

OUTPUT:

  • When the Field “Account Name” is empty, then “Consultations” Subgrid is visible.
Fig 14.
  • When the Field “Account Name” is not empty, then “Consultations” Subgrid is not visible.
Fig 15.

Hope it helps !