Conditionally Show/Hide Fields In SharePoint Online List Forms

Problem

You have a SharePoint list with around 20-25 fields, you want some of the fields to be shown conditionally on the form. For example, you want to show approver field only when estimated expense are beyond certain number. How would you configure to hide the field? What options do we have?

With on-premises SharePoint sites, we were used to make use of JavaScripts or SharePoint designers to achieve such features but with SharePoint online we have limited ways.

Still, we do have multiple options like PowerApps form customization, third party application like Nintex forms or SPFx with custom application page? Wait a second. Can’t we have quick and simple solution?

Solution

Yes, we can easily achieve this with simple JSON formulas. Let’s check out how we can configure this and consider few scenarios and formulas.

Navigate to your SharePoint online site -> Select the list for which you want to configure conditions -> Click on New button to open up form window -> Click on Edit Form icon from right top corner -> Select Edit Column option as shown below

Here you will have a list of columns with an option to choose which one you want to show on this form. So if you want some of the fields to be removed from the form or not shown then you just have to uncheck them and save the settings.

If you want to set the condition then click more option icon in front of the column -> Select “Edit Conditional Formula” option -> It will open up the popup where you can add the condition

Now take an example where I want to show Approver 2 field only when Rent is more than 5000. So I will have the condition as below

=if([$Rent] > 5000, 'true', 'false')

Rent is the internal name of the column; you have to refer the column in this format [$ColumnName]

You can use all regular operators for less than, less than or equal to, greater than, also you can make use of functions like substring, indexOf, etc.

Once done with the formula click on Save on popup and another Save on Edit columns popup window.

That’s how you will be able to show or hide the fields conditionally. These conditions are applicable on all three forms i.e. New, Edit, and view form.

Below are some more examples of formulas for different types columns

  • Choice column. Show specific field only when Approval status is cancelled.

=if([$ApprovalStatus] == 'Cancelled', 'true', 'false')

  • Number column. If the Rent is less than 5000 then limit approval to first level otherwise include second level approver also.

=if([$Rent] > 5000, 'true', 'false')

  • Person or Group column. If Agent is a department Head, then no need of approval

=if([$Agent.email] == '[email protected]', 'true', 'false')

=if([$Agent.email] == @me, 'true', 'false')

  • Yes/No type column. If furniture needed, then add furniture budget

=if([$FurnitureNeeded] == true, 'true', 'false')

  • How to check null values or empty values in a field. If Approval status is empty, then do not show it.

=if([$ApprovalStatus] == '', 'false', 'true')

As you can see, we are able to manage and handle different conditions for different types of columns. You also make combine more conditions together with && or || operators. Having said that there are some column types which are not supported in these types of conditions like currency, location, calculated, managed metadata or choice with multiple selection, etc.

You can check above configurations in detail from this youtube video.

Summary

Using simple formulas, we can show and hide the fields on the form. There is absolutely no need to do heavy customization in any other way. It's very easy and fast to achieve.

Hope this helps. Thanks for reading.