Display subgrid after choice selection in a column

[CuriousMind]

Only after the choice "Fork Lift" under the column 'Monthly Item' is selected, must the subgrid from the table "Hyster" appear. This subgrid is placed in the tab "Inspection".

No matter what I do with the code, the subgrid is always visible.

The JS code used is:

function toggleHysterSubgridVisibility(executionContext) {
var formContext = executionContext.getFormContext();
var monthlyItemValue = formContext.getAttribute("Monthly Item").getValue();
var hysterSubgridControl = formContext.getControl("Hysters");

if (monthlyItemValue === 871760018 /* Replace with the appropriate value for "Hyster" choice */) {
hysterSubgridControl.setVisible(true);
} else {
hysterSubgridControl.setVisible(false);
}
}

// Trigger the function when the form is loaded or the "Monthly Item" field value changes
function registerHysterSubgridVisibility() {
var formContext = executionContext.getFormContext();
formContext.getAttribute("Monthly Item").addOnChange(toggleHysterSubgridVisibility);
toggleHysterSubgridVisibility(executionContext);
}

registerHysterSubgridVisibility();

[parvezghumra]

Hi @CuriousMind 

Are there any errors/warnings in the browser's developer tools/console? I would recommend you try to debug your script as it might be throwing an exception somewhere.

[CuriousMind]

Hi @parvezghumra ,

I have changed the code to the below and get the error as per snap shot.

function showHideSubgrid() {
var optionSet = Xrm.Page.getAttribute("neo_MonthlyItem").getValue();
if (optionSet == 871760018) {
Xrm.Page.ui.controls.get("Hysters").setVisible(true);
}
else {
Xrm.Page.ui.controls.get("Hysters").setVisible(false);
}
}

[parvezghumra]

Hi @CuriousMind 

I think you might be using the wrong attribute logical name to grab its value.

Definitely suggest debugging your script.

[CuriousMind]

I am tediously going through it. I am not a coder, so am trying things as I go. 

This is my latest code:
function showHideSubgrid() {
var optionSet = Xrm.Page.getAttribute("neo_monthlyitem").getValue();
if (optionSet == 871760018) {
Xrm.Page.ui.controls.get("hysters").setVisible(true);
}
else {
Xrm.Page.ui.controls.get("hysters").setVisible(false);
}
}

Error now is:

[parvezghumra]

@CuriousMind Sounds like progress! 😊

Now I think you're using the wrong control name for the subgrid. It's not "hysters". Check the unique name of the subgrid control in the form designer in it's properties and use that instead.

As an aside the Xrm.Page namespace has been deprecated. You need to pass in the execution context into your function as a parameter, get the formContext from that and then use the methods/functions available on that to execute the logic you need.

[LuisArellano]

@CuriousMind 

Like parvezghumra mentioned while Xrm.Page is still available for backward compatibility it is deprecated.

 (Important changes (deprecations) coming in Power Apps and Power Automate - Power Platform | Microsof...) 

Try this:

function showHideSubgrid(executionContext) {
  let formContext = executionContext.getFormContext();
  let optionSet = formContext.getAttribute("neo_monthlyitem").getValue();
  formContext.getControl("hysters").setVisible(optionSet == 871760018);
}

Just make sure you copy the name of your subgrid from here (select the subgrid in your form):

Copy the choice name from here (select the choice column in your form)

When you create your event, check the "Pass execution context as first parameter"

Publish your changes and make sure the code was pulled, somethimes it requires 2 or 3 browser refreshes.

[CuriousMind · Accepted solution]

Fantastic! You explained it well and I really appreciate your time and effort @LuisArellano ! Thank you. 

[LuisArellano · Accepted solution]

@CuriousMind no problem, if it helped and is not to much of a hassle, can you mark my comment as the solution?