Show or Hide a Subgrid Based on an Option Set in Model-Driven Apps – Two Classic Patterns
As Power Platform developers, we’ve all faced this requirement a hundred times:
“When the user selects Yes in the ‘Are there additional impacted items?’ field, show the subgrid that lets them add related records. Otherwise, hide it.”
It feels like a trivial conditional-visibility task… but when you open the Business Rule designer and realize subgrids are not in the list of controllable elements, the reflex kicks in:
“Fine. I’ll just write a tiny JavaScript web resource. It’s only 15 lines.”
That reflex is what I call Pattern 1.
Pattern 1 – The JavaScript Reflex (What 90% of us do first)
JavaScript
function toggleImpactedItemsSubgrid(executionContext) {
const formContext = executionContext.getFormContext();
const optionSet = formContext.getAttribute("cr100_arethereadditionalitems");
const value = optionSet.getValue();
const subgrid = formContext.getControl("impacted_items_subgrid");
if (subgrid) {
subgrid.setVisible(value === 100000000); // 100000000 = Yes
}
}
// Register on Form OnLoad and on the Option Set OnChangePros of Pattern 1
- Works instantly
- You control the subgrid directly
- Handles even the most complex logic later if needed
Cons of Pattern 1
- Custom JavaScript in the solution
- Harder to maintain for citizen developers
- Shows up as “custom code” in Solution Checker / ALM warnings
- The subgrid header and empty space sometimes still linger if it’s in a shared section
Most of us stop here, commit the script, and move on with life.
But there is a cleaner way when the layout allows it.
Pattern 2 – The Low-Code Section Trick (The one Microsoft actually wants you to use)
Prerequisite: The subgrid is the only control inside its own section.
Great catch! You do not need two separate Business Rules.
You can (and should) do it with exactly one Business Rule using the If…Else branch that Microsoft added to the Business Rule designer a few years ago.
Pattern 2 – Correct & Optimal Version (Single Business Rule)
- Create one Business Rule on the entity
- Scope = Entity (or Form)
- Condition: Are there additional items?is not blank (optional but recommended)
- Then add an If branch:
| Branch | Condition | Action |
|---|---|---|
| If | Are there additional items? equals Yes | Show section “Additional Impacted Items” |
| Else | (no condition needed) | Hide section “Additional Impacted Items” |
That’s literally it — one rule, two actions, zero JavaScript.
Why the “Else” works perfectly here
- When the option set is Yes → Show section
- When the option set is No or blank/null → Hide section
- The rule runs on form load and on change of the option set
When the section is hidden, the entire subgrid (data, header, New button, everything) disappears and the form collapses the space perfectly.
Pattern 1 vs Pattern 2 – Side-by-Side Comparison
| Criteria | Pattern 1 (JavaScript on subgrid) | Pattern 2 (Business Rule on section) |
|---|---|---|
| Requires JavaScript | Yes | No |
| Works when subgrid shares section | Yes | No (section would hide other fields too) |
| Completely removes header & space | Sometimes (empty section header may remain) | Yes – 100% clean collapse |
| Mobile / tablet experience | Good | Excellent |
| Citizen developer friendly | No | Yes |
| Appears in Solution Checker warnings | Yes (custom JS) | No |
| Future-proof (Microsoft direction) | Discouraged for simple scenarios | Strongly encouraged |
| Performance | Slightly more overhead | Optimal |
| Complexity to implement | 10–15 lines + event registration | 1 business rules |
Final Verdict – Which One Should You Pick?
- Use Pattern 1 (JavaScript) only when:
- The subgrid shares a section with other fields you must keep visible
- You need complex multi-field or security-role-based logic
- You’re already deep into custom JS on that form anyway
- Use Pattern 2 (Business Rule + dedicated section) everywhere else — especially on new forms.
Microsoft has repeatedly stated that hiding/showing sections is the supported, low-code way to control subgrid visibility. It’s faster, cleaner, and keeps your solution “healthy” in the eyes of ALM tools.
So next time you catch yourself reaching for a JavaScript web resource to toggle a subgrid… pause for five seconds and ask:
“Is this subgrid alone in its section?”
If the answer is yes → close the code editor and open the Business Rule designer instead.
You’ll thank yourself later.
