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:

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

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

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

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 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.

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

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.

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:

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.

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

Select Advanced settings. See in fig

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

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

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

Select Hidden and click OK. See in fig

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

You may like following SharePoint tutorials:

• Redirect to a different page after adding new list items in SharePoint
• SharePoint 2013 Redirect user to custom PageNotFoundError page
• How to hide or rename title column from SharePoint list or library
• SharePoint Online redirect to another page programmatically

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