Show / Hide fields based on a dropdown selection using SPUtility.js

In this article, I’ll explain How to show and hide fields based on a Choice field selection in ‘New Form’, ‘Edit Form’ and ‘Display Form’ in SharePoint 2013 / 2016 via SPUtility.js?

Prerequisites:

  • Download SPUtility.js.
  • Upload the downloaded file (SPUtility.js) to an appropriate place in SharePoint Site like ‘Style Library’.
  • Create a Custom list.
    • Add a choice field displayed as ‘Drop-Down Menu‘.
    • Fill your choices as you need.
    • Add the fields that you need to show or hide based on the selected value of choice field.

Steps:

Show / Hide fields based on Choice field value in New Form via SPUtility.js.

  • Open your List.

Add new list item

  • From the above ribbon, > In ‘Customize List‘ Section > Click on ‘Form Web Parts‘ > Select ‘Default New Form‘.

Customize List - Form web Parts

  • The ‘New Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.

Add a web part in SharePoint Page

  • Inside Media and Content > Select Script Editor > Click on Add.

Script Editor Web Part

  • Click on ‘EDIT SNIPPET‘.

EDIT SNIPPET

  • Add the following code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/Style%20Library/sputility.js"></script>
<script>
 $(document).ready(function ()
{ // Get a the choice field
var choiceField = SPUtility.GetSPField('Job Title');
// Hide the target fields in form load
SPUtility.GetSPField('Other Title').Hide();
// create a function to show or hide a field based on the selected choice Field value
var ShowHideField = function() {
var selectedFieldValue = choiceField.GetValue();
// Hide the 'Other Title' field if the selected value is 'Other'
if(selectedFieldValue != 'Other') {
SPUtility.GetSPField('Other Title').Hide(); }
else { SPUtility.GetSPField('Other Title').Show(); } };
// attach the function to choice field
$( choiceField.Dropdown).on('change', ShowHideField); });
</script>


Replace ‘Job Title’ in the below code with your choice field name.

var choiceField = SPUtility.GetSPField('Job Title');

noteReplace ‘Other Title’ in the below code with the field that you need to show or hide.

if(selectedFieldValue != 'Other') {
 SPUtility.GetSPField('Other Title').Hide();
 }
else {
 SPUtility.GetSPField('Other Title').Show();
 }

hint-iconIn a case of you need to show or hide more than one column you just need to repeat the below codes with the other field name.

if(selectedFieldValue != 'Other') {
 SPUtility.GetSPField('Other Title').Hide();
 SPUtility.GetSPField('Field2').Hide();
 }
else {
 SPUtility.GetSPField('Other Title').Show();
 SPUtility.GetSPField('Field2').Show();
 }
  • In the above ribbon > Page Tab > Click on ‘Stop Editing‘.

Stop Editing

Try now to add a new item, you should note that.

  • Once the form is opened the ‘Other Title’ should be hidden.

Show Hide fields based on Choice field in New Form via SPUtility.png

  • When the ‘Other’ value is selected from a ‘Job Title’ drop down list, The field ‘Other Title’ will be shown.

Show Hide fields based on Choice field in New Form SPUtility

Show / Hide fields based on Choice field in Edit/Display Form via SPUtility.js.

noteIn Edit Form / Display Form there are a bit changes in the code as the following.

  • No need to hide ‘Other Title’ field at the From load, it should be shown or hidden automatically based on the stored value of ‘Job Title’ field.
  • To show or hide the ‘Other Title’ field automatically based on the stored value of ‘Job Title’ field, you should run the function called ‘ShowHideField’ at the form load.
// Call ShowHideField in Edit and Display form
ShowHideField();
  • You will need to reset the ‘Other Title’ if you select a value rather than ‘Other’from the ‘Job Title’ field.
SPUtility.GetSPField('Other Title').SetValue('');

Steps:

  • Open your List.

Add new list item

  • From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.

Customize List - Form web Parts

  • The ‘Edit Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.

Add a web part in SharePoint Page

  • Inside Media and Content > Select Script Editor > Click on Add.

Script Editor Web Part

  • Click on ‘EDIT SNIPPET‘.

EDIT SNIPPET

  • Add the following code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/Style%20Library/sputility.js"></script>

<script>
$(document).ready(function () {
// Get a the choice field
var choiceField = SPUtility.GetSPField('Job Title');

// create a function to show or hide a field based on the selected choice Field value
 var ShowHideField = function() {
 var selectedFieldValue = choiceField.GetValue();
// Hide the 'Other Title' field if the selected value is 'Other'
if(selectedFieldValue != 'Other') {
SPUtility.GetSPField('Other Title').Hide();
SPUtility.GetSPField('Other Title').SetValue('');
 }
 else {
 SPUtility.GetSPField('Other Title').Show();
 }
 };

 // Call ShowHideField in Edit and Display form
ShowHideField();
 // attach the function to choice field
 $( choiceField.Dropdown).on('change', ShowHideField);
});
</script>


Replace ‘Job Title’ in the below code with your choice field name.

var choiceField = SPUtility.GetSPField('Job Title');

noteReplace ‘Other Title’ in the below code with the field that you need to show or hide.

if(selectedFieldValue != 'Other') {
 SPUtility.GetSPField('Other Title').Hide();
 }
else {
 SPUtility.GetSPField('Other Title').Show();
 }

hint-iconIn a case of you need to show or hide more than one column you just need to repeat the below codes with the other field name.

if(selectedFieldValue != 'Other') {
 SPUtility.GetSPField('Other Title').Hide();
 SPUtility.GetSPField('Field2').Hide();
 }
else {
 SPUtility.GetSPField('Other Title').Show();
 SPUtility.GetSPField('Field2').Show();
 }
  • In the above ribbon > Page Tab > Click on ‘Stop Editing‘.

Stop Editing

  • Try now to Edit an existing item by clicking on more > Edit Item,

Edit Item in SharePoint List

You should note that,

  • Once the form is opened for Edit, the ‘Other Title’ should be shown or hidden based on the stored value of ‘Job title’ choice field.

Show Hide fields based on Choice field in New Form via SPUtility.png

  • When the ‘Other’ value is selected from a ‘Job Title’ drop down list, The field ‘Other Title’ will be shown.

Show Hide fields based on Choice field in New Form SPUtility

  • Again, From the above ribbon, > In Customize List Section > Click on ‘Form Web Parts‘ > Select ‘Default Display Form‘.and repeat the above steps with the same code in Display Form.

Customize List - Form web Parts

  • Try now to view an item.

View Item in SharePoint List

  • In a case of the ‘Job Title’ choice field is not ‘Other’, the ‘Other Title’ shouldn’t be shown.

Show Hide fields based on Choice field in Display Form SPUtilityEnjoy 🙂

Check also Show / Hide fields based on choice field selection in SharePoint using Jquery 

Advertisements

2 thoughts on “Show / Hide fields based on a dropdown selection using SPUtility.js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s