Enabling Conditional Field Rendering In Sharepoint Forms With Client-Side Rendering

What is Conditional Rendering?

Conditional rendering refers to the ability to show or hide form fields, sections, and other elements dynamically based on specified conditions. It allows displaying form content conditionally to improve relevance, reduce clutter, and personalize forms for different users.

With conditional rendering, form fields and sections show or hide based on values in other fields, the current user’s group membership, and other rules. This creates a more customized experience.

Why Use Conditional Rendering?

Using conditional rendering gives several key benefits:

Improves form relevance by only showing applicable fields
Reduces clutter by hiding unused or irrelevant fields
Personalizes forms based on user attributes and context
Shows and hides fields and sections dynamically

By tailoring form content to each user, conditional rendering makes completing forms easier, less confusing, and more efficient.

Implementing Conditional Rendering

The main methods of implementing conditional rendering are:

Column formatting using JSON
Client-side rendering (CSR)
Writing conditional rendering formulas

Using Column Formatting JSON

Built-in column formatting rules can show/hide columns dynamically. This involves applying JSON-based formatting rules to columns.

Leveraging Client-Side Rendering

The client-side rendering framework in SharePoint lets developers insert JavaScript to control rendering. This provides greater flexibility for conditional visibility logic.

Writing Conditional Rendering Formulas

Show/hide rules can be created using the Formula framework. Formulas evaluate values in the form to trigger conditional visibility.

Step-by-Step Guide

These are the key steps to implement conditional rendering:

Prerequisites

A SharePoint list or library with customized forms
Edit permission on the list and its forms

Adding Conditional Rendering JSON

Edit the column formatting for desired fields
Apply show/hide rules using valid JSON
Refer to columns, values, and groups in formatting rules
Save column formatting

Testing Conditional Visibility

Go to list form using multiple accounts
Check field visibility changes based on rules
Refine rules if needed

Common Use Cases

Showing/Hiding Sections by Group

Sections show or hide for certain SharePoint groups using the “[Me]” filter and “IfContains” formula operator.

=IfContains([Me], "Managers")

Making Fields Conditionally Required

Set required field validations to turn on/off using formulas comparing column values.

=If([Type]="Major", Required, Optional)

Cascading Dropdown Menus

Filter child dropdowns based on parent selection using column reference formulas.

ParentColumn: Title
ChildColumn: =FilterRelated(Tasks, Title)

Troubleshooting Tips

Checking Formula Syntax

Use syntax guides to ensure formulas are valid. Check for unmatched parantheses, invalid operators, etc.

Enabling Debugging

Turn on debugging features like console logging to output formula evaluation details and errors.

Verifying Field References

Check formulas refer to actual column names, removing spaces, special characters, and checking casing.

Example Code Snippets

Basic Show/Hide Field

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "display": "=if([Category] == 'Research', 'block', 'none')"
  }
}

Cascading Selections

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2-column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "display": "=if(And([ cruiser ] != '' , or( [ cruiser ] == [ small-ship ]  , [ cruiser ] == [ large-ship ] )), 'block' , 'none' )"
  }  
}

Conditionally Required Fields

  =If([Category]="Major",Required, Optional)

Summary

Key Takeaways

Conditional rendering makes forms more relevant and personalized
Show/hide logic improves efficiency and reduces complexity
JSON formatting rules and CSR provide flexibility
Formulas evaluate conditions to trigger visibility rules

Additional Resources

See the following links for more details on leveraging conditional rendering in SharePoint: