Back in June, I wrote a blog about how you can make default SharePoint forms a bit more user friendly and aesthetically pleasing using “Configure Layout” feature. For me, this is one of those life hacks that became a regular activity in your day-to-day life. Every list I create gets a configured layout form and then I decide if it needs additional functionality, like conditional fields.
Conditional fields in this case are fields that we only show to the user when they’ve provided certain information already. For my example, I’m going to modify the Travel Request form I already formatted. I added a new column for “method of travel” and included two choices: driving and flying. If the user selects flying, then the flight information fields will become visible. If they select driving, then those flight information fields remain hidden. Let’s start.
Reconfiguring the Layout
First things first, I need to reorder the existing form with my new column and make any updates to my sections. I’m going to copy the code from the Body of my layout, put it in Notepad++, and make the following changes. I’m going to copy the Flight and Hotel block and make a second. Then I’ll rename the first to Hotel only and the second to Travel Details. I’ll add my column for Travel Method and then we will add the conditional formulas for the Airline and Estimated airfare columns.
|
Original |
Updated |
|
{ "displayname": "Flight and Hotel", "fields": [ "Airline", "Hotel", "Estimated airfare", "Estimated hotel cost" ] }, |
{ "displayname": "Hotel", "fields": [ "Hotel", "Estimated hotel cost" ] }, |
|
{ "displayname": "Flight and Hotel", "fields": [ "Airline", "Hotel", "Estimated airfare", "Estimated hotel cost" ] }, |
{ "displayname": "Travel Details", "fields": [ "Travel Method", "Airline", "Estimated airfare" ] }, |
This is what our columns look like when we’re finished:
Adding the Conditional Formulas
Now, I’m going to hover over the “Airline” column and on the “…” menu, select “Edit conditional formula.”
From here, I’m going to start with the following formula:
=if([$Travel_x0020_Method] == 'Flying', 'true', 'false')
So, if the value for Travel Method is Flying, this field should be visible. If not, hide it. I’ll paste the same formula in the conditional formatting for the Estimated airfare column, then save my changes.
Right away, I can see that my form has hidden those two columns, but as soon as I change the “Travel Method” to flying, they appear.
Voila! Now you can go off and polish those forms!