Different ways to show/hide SharePoint List form fields

This SharePoint customization tutorial, we will discuss different ways to show/hide SharePoint list form fields using SPUtility.js, SharePoint server object model and SharePoint client object model.

Here, we will see the below examples:

  • Show/Hide List form fields based on condition using SPUtility in SharePoint
  • Show/Hide List form fields using SharePoint Server Object Model
  • Show/hide fields based on permission in SharePoint list form using Client Object Model
  • Show/Hide fields from tasklist forms in SharePoint 2013
  • Hide a column from List Form (new/edit/display) in SharePoint

Show/Hide List form fields based on condition using SPUtility in SharePoint

Let us see how to show hide list form fields based on a condition in SharePoint 2013 using SPUtility.js. SPUtility.js is a powerful js file to work with list or library forms.

In this case, I have a SharePoint list form which has a Country drop-down which has values like:

  • India
  • Pakistan
  • Srilanka
  • Others

Here my requirement is whenever a user selects Others from this Country drop-down then one free textbox should appear to enter some values. Else it should always be hidden.

Open the list where you want to implement the logic and put the below code inside a script editor web part in the NewForm.aspx (Edit the page -> Add web part and then select a script editor web part.).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://SiteURL/SiteAssets/Bijay/sputility_min.js"></script>

<script>
$(document).ready(function(){
var country = SPUtility.GetSPField('Country');
var HideOrShowOthersField=function(){
var countryValue = country.GetValue();
if(countryValue=='Others')
{
SPUtility.GetSPField('Others').Show();
}
else
{
SPUtility.GetSPField('Others').Hide();
}
};
HideOrShowOthersField();
$(country.Dropdown).on('change',HideOrShowOthersField);

});
</script>

Now when you the page it will appear like below:

Show/Hide List form fields based on condition using SPUtility

If you select ‘Others’ in the Country dropdown then it will appear like below:

Show/Hide sharepoint List form fields based on condition using SPUtility

If you will select any other country other than ‘Others’ then it will appear like below:

Show/Hide List form fields based on condition using SPUtility in SharePoint 2013

Show/Hide List form fields using SharePoint Server Object Model

Now, we will see, how to show/hide fields or columns in the SharePoint list forms such a NewForm, EditForm or DispForm using the SharePoint server object model code.

Suppose you have a SharePoint 2010/2013 list that contains some fields and you want some fields should not appear in some forms.

This you can achieve by using SharePoint object model or also you can do this by using SharePoint Manager Tool. This we will discuss in a separate post.

Below is the SharePoint 2010 server object model code to hide fields or columns in SharePoint 2010 list forms. We can do this by using the SPField class.

using (SPSite site = new SPSite("http://SiteURL"))
{
using (SPWeb web = site.OpenWeb())
{
SPList list = web.Lists["Employees"];
SPField field = list.Fields["Salary"];
field.ShowInNewForm = false;
field.ShowInEditForm = false;
field.ShowInDisplayForm = false;
field.Update();
}
}

Here after executing this code the Salary field of Employees list will not appear in any of the forms in SharePoint list.

This is how we can show/hide fields from list form in SharePoint 2010/2013/2016 etc.

Show/hide fields based on permission in SharePoint list form using Client Object Model

In SharePoint, we have If condition “If this user is member of this share point group”. We can use this condition to check any user belongs to a particular group or not. Check user belongs to a SharePoint Group and Hide some controls in New/Edit Forms on SharePoint Custom List

Show hide fields based on permission in SharePoint list form
Client Object Model to Check user belongs to a Group and Hide controls in New or Edit Forms in SharePoint

The following Script which will help you in checking if the current logged in SharePoint user belongs to a SharePoint user group and based on it hide some controls in New/Edit forms on Custom List.

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select Site Actions | Edit Page:

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the Script Editor Web Part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

<script src="/sites/JohnHancock/JS/jquery-1.4.2.min.js"></script><script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(disableControls, "sp.js");
var clientContext = null;
var web = null;
var users ;
var oList;
var oListNew;
function disableControls()
{
clientContext = new SP.ClientContext();
var groupCollection = clientContext.get_web().get_siteGroups();
var group = groupCollection.getById(4);//the SharePoint usergroup
users = group.get_users();
clientContext.load(group);
clientContext.load(users);
currentUser = clientContext.get_web().get_currentUser();
clientContext.load(currentUser);
clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
RefreshCommandUI();
}

function onQuerySucceeded()
{
if(this.users.get_count() >0)
{
var UserExistInGroup = false;
for(var i=0; i < users.get_count(); i++)
{
//alert(users.itemAt(i).get_loginName());
//alert(this.currentUser.get_loginName());
if(users.itemAt(i).get_loginName() == this.currentUser.get_loginName())
{
UserExistInGroup = true;
break;
}
}
}
if (UserExistInGroup)
{
$('nobr:contains("Approver")').closest('tr').show();
}
else
{
$('nobr:contains("Approver")').closest('tr').hide();
}
}
function onQueryFailed(sender, args)
{
}
</script>
Show hide fields based on permission in SharePoint list form
Client Object Model to Check user belongs to a Group and Hide controls in New or Edit Forms in SharePoint 2016

Show/Hide fields from tasklist forms in SharePoint 2013

Here we will discuss how we can hide fields from tasklist forms in SharePoint 2013. Suppose I have a task list and when I try to add a new task to the task list, I do not want to see % complete, Predecessors fields in the form.

We can hide the fields by hiding the fields in the Content Type. For this Go to the list Settings and then Advanced Setting. There select Allow management of content types? to “Yes” as shown in the fig below.

Show/Hide fields from tasklist forms in SharePoint

Then from the List Settings page, Go to the Content Types section click on the Task Content Type as shown in the fig below:

Show/Hide fields from tasklist forms in SharePoint 2013

This will show all the columns belongs to the content type as shown in the fig below. Click on the Column which you want to hide.

Show/Hide fields from tasklist forms in SharePoint 2016

This will open the Change Content Type page, there go to the Column Settings section and choose Hidden radio button as shown in the fig below:

Show/Hide fields from tasklist forms in SharePoint Online

Now you go and Add a new task, the field will not appear in the input form.

Hide a column from List Form (new/edit/display) in SharePoint

Now, we will see how to hide a column from List Form (new/edit/display) in SharePoint 2010.

First, see there is Reason field showing. Now I want to hide that column from list form. See in fig.

hide column from sharepoint list new form

Open the list and go to List Settings. See in fig

hide column from sharepoint list edit form

Select Advanced settings. See in fig

hide column from sharepoint list display form

Click Yes for “Allow management of content types” and then click OK. See in fig

hide column from sharepoint list form

From the list of content types, select the content type the column appears in, e.g. “Item”. See in fig

hide column from sharepoint 2010 list new form

From the list of columns for the selected content type, select the column (e.g. Reason). See in fig

hide column from sharepoint 2010 list edit form

Select Hidden and click OK. See in fig

hide column from sharepoint 2010 list display form

Now you see the hidden field Reason is not showing in your list form. See in fig

hide column from sharepoint 2010 list form

You may like following SharePoint tutorials:

This tutorial we learned how to Show/Hide List form fields based on condition using SPUtility in SharePoint 2013.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • thank you for amazing post. However, regarding Show/hide fields based on permission in SharePoint list form using Client Object Model , i want to implement this script in Display form and show it for the approver as button ( approve ) -( Reject ) who has the permission in the site. How can i achieve it.

    Thanks

  • >