How to customize a SharePoint List form – 5 Examples

In this SharePoint tutorial, we will see how to customize a SharePoint list form. We will see a few customizations on SharePoint new form, edit form, and disp form.

This will work in classic SharePoint sites (lists) in SharePoint Online, SharePoint 2013/2016, and SharePoint 2019 also.

If you want to customize modern SharePoint list forms, then check out the below articles:

Now, let us check out the below SharePoint list form customizations examples.

  • How to change column order in sharepoint list
  • Change column ordering in SharePoint list forms
  • How to Add Heading in SharePoint list form
  • Hide column in sharepoint list form
  • How to hide sharepoint list columns based on user permissions
  • How to use PreSaveAction() in newform.aspx in SharePoint
  • document ready function not working – how to fix
  • sharepoint read only column

Change column order in sharepoint list

Let us see, how to change column order in list forms (new/edit/display form) in SharePoint 2013/2016/2019 and SharePoint Online without using any code. I have a list created a year ago with more than 20,000 records in it.

Now the user wants to add a new field “Loan Status” in the list and it should be the 5 fields in all newForm.aspx, editForm.aspx and DispForm.aspx.

Note: Without recreating the list nor adding any custom code.

Existed: The existing SharePoint list new form looks like below:

change column order in sharepoint list
change column order in sharepoint list

Expected: But the list form should look like below:

change column order for new item form in sharepoint list
sharepoint 2013 change field order in a form

When we add a new field in a list by default it will get added as the last field in all forms newForm.aspx, editForm.aspx and DispForm.aspx.

Now we should change the order of the list without recreating the list nor adding any custom code.

Change Column Order in List Forms (new/edit/display) in SharePoint

Follow the below steps to achieve this without any code.

1. Open the SharePoint Online list and then click on List settings as part of the ribbon control

sharepoint 2013 change field order
sharepoint 2013 change field order

2. Click on “Advanced Settings” as part of list setting

sharepoint column ordering not working
sharepoint column ordering not working

3. Enable “Content Types” and click at the end of the page

sharepoint change column order new form
sharepoint change column order new form

4. You should be able to see the default content type at the list settings as part of list setting

change out of box fields order sharepoint forms
change out of box fields order sharepoint forms

5. Click on “Item” Content type and it will take all the various properties of that content type. At the end of the page, you should be able to see on option as “Column Order” click on that.

sharepoint 2016 change field order in form
sharepoint 2016 change field order in form

6. Once you click on that option it will show you the existing columns/fields order for all the OOB forms newForm.aspx, editForm.aspx and DispForm.aspx. Now change the position of “LoanStatus” to “5” and click on OK.

sharepoint 2016 change field order
sharepoint 2016 change field order

7. Once you change the position you can see the position of the field at 5 in all the OOB forms newForm.aspx, editForm.aspx and DispForm.aspx. The below is the NewForm.aspx.

sharepoint 2013 column ordering not working
sharepoint 2013 column ordering not working

Below is how the EditForm looks like.

change column order in sharepoint list new form
change column order in sharepoint list new form

Below is what the DispForm looks like.

sharepoint 2016 column ordering not available
change column order in sharepoint list

This is how to change column order in sharepoint list forms.

Change column ordering in SharePoint list forms

Here is another example, we will see on how to change column ordering in list forms in SharePoint Online.

Follow the below steps to change the column order in SharePoint. The below list is a SharePoint Online modern list.

Step 1: Log in to the SharePoint Online site -> Go the site content -> Open your custom list

change column ordering in sharepoint
change column ordering in sharepoint

Step 2: Click on the New Item to see the column order of the list in the new form.

change column order in sharepoint 2013
change column order in sharepoint 2013

Step 3: In the above list Ph_no and Age are showing in order. Suppose someone wants to change the order of the column, then go to the List Settings.

change column order in sharepoint form
change column order in sharepoint form

Step 3: Next click on column order as per the below screenshot.

change column order in sharepoint online
change column order in sharepoint online

Step 4: Next your list columns will appear on this page and you can change the order of the column based on your requirement. Next click on the OK button.

change column order in sharepoint list form
change column order in sharepoint list form

Step 5: In the above step, I have changed my column order for Ph_no and Age. Please look into my list screenshot after order change.

change column ordering in sharepoint
change column ordering in sharepoint

This is how to rearrange columns in SharePoint 2013 list or SharePoint online list. We learned, how to change the list column order in SharePoint Online or SharePoint 2013/2016/2019.

Add Heading in SharePoint list form

Let us see, how to customize newform using javascript and CSS in SharePoint Online and SharePoint 2013/2016/2019. Here we will see how we can add heading in the default newform.aspx in SharePoint list form using JavaScript and CSS.

In this demo, I will show how I have added a heading between two out-of-box columns in the SharePoint list form and I have changed the default button color using CSS.

Customize newform.aspx using JavaScript and CSS in SharePoint

Step 1: I have created a SharePoint list name as Student Details.

customize newform using javascript and css sharepoint
customize newform using javascript and css sharepoint

Step 2: When I clicked on + new Item, it will appear a newForm.aspx page with a simple form.

Modify NewForm.aspx Sharepoint Online
Modify NewForm.aspx Sharepoint Online

Step 3: In this step, I will write a code to create a heading between two columns in the SharePoint list. You can use the script editor web part in the newForm.aspx page to add the below code.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    //set section text and field name
    AddSectionBeforeField("Student Details","Title");
    AddSectionBeforeField("Parents Details","Father Name");
    AddSectionBeforeField("Education Details","Qualification");

});
function AddSectionBeforeField(sectionText,fieldName){
    var $fieldTR=$(".ms-standardheader nobr:contains('"+fieldName+"')").closest("tr");
    $fieldTR.before("<tr style='background-color:white'><td colspan='2' class='ms-formbody' style='padding:0; color: #96c03d;'><div style='font-size:22px;margin-top: 10px;margin-bottom: 10px;font-family: Oswald';'>"+sectionText+"</div></td></tr>");
}
</script>

Step 4: In this step, I will add the CSS to change the default button color.

<script type="text/javascript">
function changeButtonStyle()
{ 
    var inputs = document.getElementsByTagName("input");  

    for(i = 0; i<inputs.length; i++)  
    {   
       if(inputs[i].type == "button" && inputs[i].value == "Save")
	   {
          inputs[i].style.backgroundColor='#96C03D'; 
          inputs[i].style.color ='white';	
          inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }
        if(inputs[i].type == "button" && inputs[i].value == "Cancel")
	   {
          inputs[i].style.backgroundColor='#96C03D'; 
		  inputs[i].style.color ='white';	
		  inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }		   
      }  
}
_spBodyOnLoadFunctionNames.push("changeButtonStyle");
</script>		

Step 5: Next, go to the NewForm.aspx -> Edit page -> Add Web Part ->Add a script Editor Web part

customize newform using javascript and css sharepoint
customize newform using javascript and css sharepoint

Step 6: Next click on Insert and Stop editing the page. Next, the output will appear like in the below image.

Modify NewForm.aspx Sharepoint Online using css and javascript
Modify NewForm.aspx Sharepoint Online using css and javascript

We can also apply the same code for EditPage.aspx page to customize the edit form like the above newform in SharePoint Online/2013/2016/2019.

Hide column in sharepoint list form

Let us check out different ways to hide columns in sharepoint list form.

There are 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 that has a Country drop-down that 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:

hide fields in sharepoint list form page using jquery
hide fields in sharepoint list form page using jquery

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
hide fields in sharepoint list form page using jquery

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

hide fields in sharepoint list form page using jquery
hide column in sharepoint list form

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 that should not appear in some forms.

This you can achieve by using the 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();
}
}

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

This is how to show/hide fields from list form in SharePoint 2010/2013/2016/2019 etc. We can customize newform using javascript and CSS in SharePoint online or SharePoint.

We also saw, how to add heading in the default newForm.aspx in the SharePoint list using JavaScript and CSS.

Hide sharepoint list columns based on user permissions

Let us see, how to hide sharepoint list columns based on user permissions using JavaScript. As we know Microsoft provided a powerful feature in SharePoint called Permission and group, we can easily manage our SharePoint site by using Out of box Permission and groups.

As we know Microsoft didn’t provide any out-of-box permission feature for list columns, so we will write a small piece of JavaScript code that will hide SharePoint online list columns based on user permissions.

Hide SharePoint list columns based on user permissions

The below are the steps to set permission to List columns based on user groups.

In the below example, we will see how we can hide the Name list column from the form using JavaScript and SPServices code.

Step 1: Login to your SharePoint site and create a list as below image.

sharepoint list column permissions
sharepoint list column permissions

Step 2: The below is the code to hide your custom column for specific groups of user.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
 $().SPServices({
  operation: "GetGroupCollectionFromUser",
  userLoginName: $().SPServices.SPGetCurrentUser(),
  async: false,
  completefunc: function(xData, Status) {
  var xml = xData.responseXML.xml;
    if (xml.search('DHL Visitors') == -1)
     {                         
           $("select[title=Name]").parent().parent().parent().hide();          
       }  
    }
 });
});
</script>

Step 3: Next go to the NewForm.aspx and EditForm.aspx page -> Add a Script Editor WebPart in the both page. Next, add the below code inside it. When Visitors will login to the list they can’t see the specific Name field in both pages.

hide sharepoint list columns based on user permissions
hide sharepoint list columns based on user permissions

I hope, you got an idea of sharepoint list column permissions and how to hide sharepoint list columns based on user permissions.

SharePoint list make column read only

Let us see, how to make sharepoint read only column. You might encounter a situation where you need to make a column as read-only when the user trying to submit an item or edit an item in SharePoint 2013/2016/2019 or SharePoint Online.

There are different ways you can make a SharePoint list column as read-only.

Make SharePoint list field read-only using JavaScript

To use JavaScript code to make the SharePoint list field as read-only, just edit the page and then put the below code inside a Script editor webpart.

<script type="text/javascript">
function SetReadOnlycolumn()
{
var elements=document.getElementById(‘Your column name in the view source’);
elements.readOnly=true;
}
_spBodyOnLoadFunctionNames.push("SetReadOnlycolumn()");
</script>

Make SharePoint list field read-only using SPUtility.js

SPUtility.js is a JavaScript library that you can download from GitHub and use it in your SharePoint 2016/2013/2010 or MOSS 2007 site. This also works in SharePoint Online. By using this SharePoint library we can modify list forms like NewForm.aspx and EditForm.aspx.

Edit your page and put the below code inside a script editor web part. Make sure to give reference to sputility.min.js which we have downloaded from GitHub.

<script type="text/javascript">
function MakeFieldReadOnly()
{
SPUtility.GetSPField(‘Name of your List Field’).MakeReadOnly();

}
_spBodyOnLoadFunctionNames.push("MakeFieldReadOnly");
</script>

By using SharePoint Server Object Model

We can hide a SharePoint list column by using the Server-side object model code in SharePoint 2013/2016. Below is the code sample to make the SharePoint list field read-only.

SPList list = web.Lists["List Name"];
SPField myField = list.Fields["Name of your List Field"];
myField.ReadOnlyField = true;
myField.Update();

This is how to make sharepoint read only column or sharepoint list read only column.

How to use PreSaveAction() in newform.aspx in SharePoint

This JavaScript SharePoint, We will disucss, how to use PreSaveAction() method in SharePoint list form in SharePoint 2013/2016/2019 or SharePoint Online. We will see how to use PreSaveAction() in newform.aspx in SharePoint Online/2013/2016.

PreSaveAction() in SharePoint List

PreSaveAction() is a JavaScript function that helps us to do something before the item will be saved. Suppose in the list form you want to do some validation check when a user clicks on the submit button then PreSaveAction() will be very much helpful. This method is called before the form is submitted.

You can use PreSaveAction() in NewForm.aspx or EditForm.aspx in any SharePoint Online/2013/2016 list.

In this example, I have a SharePoint list that has a Title column which is a mandatory field. Now I am using PreSaveAction() JavaScript function to check whether the Title is blank or not.

If it is blank then it will display an alert message and it will not save the item. If the Title is not blank then it will Save the item

Here I have using jQuery to retrieve a Title column value, but you can use SPUtility.js to retrieve the field value as well.

I have edited the NewForm.aspx and put the below code inside a Script editor web part.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
function PreSaveAction() {
var txtTitle = j(":input[title='Title']").val();
alert(txtTitle);
if(txtTitle == "){
alert("Please enter a title");
return false;
}
else{
return true;
}
}
</script>

Save the page and try to add an item to the SharePoint list. If your title is blank and you click on the Save button then it will show the alert like below:

presaveaction sharepoint 2013

PreSaveItem() in SharePoint List Form

Let us see, how to use PreSaveItem() in SharePoint 2013 list forms like NewForm.aspx and EditForm.aspx. The same way we can use PreSaveItem() in SharePoint 2013/2016/Online list forms.

Here I am trying to do some validation checks, before submitting an item. In the NewForm.aspx or in the EditForm.aspx, you can put the below code inside a script editor webpart.

<script type="text/javascript">
var j = jQuery.noConflict();
function PreSaveItem() {
var txtTitle = j(":input[title='Title']").val();
alert(txtTitle);
if(txtTitle == "){
alert("Please enter a title");
return false;
}
else{
return true;
}
}
</script>

Here, we learned how to use PreSaveItem() in SharePoint 2013 NewForm.aspx form. Same way, we can use PreSaveItem() in SharePoint Online or SharePoint 2013/2016/2019 NewForm.aspx forms.

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

hide column from list form
hide column from list form

The following Script 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>
hide field in sharepoint list form
hide field in sharepoint list form

Show/Hide fields from tasklist forms in SharePoint 2013

Here we will discuss how to 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.

hide column in sharepoint list form
hide column in sharepoint list form

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

remove field from sharepoint list form
remove field from sharepoint list form

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.

sharepoint 2013 hide column in display form
sharepoint 2013 hide column in display form

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

show or hide columns in a list or library form
show or hide columns in a list or library form

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 a Reason field showing. Now I want to hide that column from the list form. See in fig.

hide column from sharepoint list new form
sharepoint list hide column from form

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

sharepoint online hide field on new form
sharepoint online hide a field on a new form

Select Advanced settings. See in fig

hide column from sharepoint list display form
How to hide column in sharepoint list form

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

hide column from sharepoint list form
remove field 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
hide column in sharepoint list 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
hide field in sharepoint list form

Select Hidden and click OK. See in fig

hide column from sharepoint 2010 list display form
hide column from list 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
hide column in sharepoint list form

This is how to remove fields from sharepoint list forms.

document ready function not working

This SharePoint 2013 tutorial explains, how to solve $(document).ready(function() not working SharePoint 2013 list form error which comes in SharePoint 2013/2016 list forms like the new form, edit form or display form.

Here user wants to hide a field in a new form without custom c#.net code in SharePoint 2013/2016. I have tried with jquery and was trying to hide the field row in newform.aspx. But document.ready() is firing in newform.aspx.

Code snippet I was trying to use is:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("input[title*='FirstName']").val("Krishna.Vandanapu");
var field = $("input[title*='FirstName']"); // The * in title is needed because SharePoint 2013 uses "Required Field" on required fields.
field.parent().parent().parent().hide();
});
</script>

In the above code block, I was trying to hide the row of FirstName field in the below screen with a default value as “Krishna.Vandanapu”. Since it is a mandatory field I set the default value.

document ready function not working
document ready function not working

The issue with the above code is I was missing the jquery reference library inclusion.

$(document).ready(function() not working SharePoint 2013 list form

We have to add the ajax library file http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js in the script to fire the $(document).ready function.

The final code will be as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Krishna");
$("input[title*=Title]").val( "Title Value-1" );
$("input[title*='FirstName']").val("Krishna.Vandanapu"); //The * in title is needed because SharePoint 2013 uses "Required Field" on required fields.
var field = $("input[title*='FirstName']");
field.parent().parent().parent().hide();
});
</script>

The output will be as follows:

document.ready not working
document.ready not working

This is how to fix $(document).ready(function() not working SharePoint 2013 list form.

In this SharePoint tutorial, we discuss how to customize a SharePoint List form. We check here the below examples:

  • Change column order in sharepoint list
  • Change column ordering in SharePoint list forms
  • Add Heading in SharePoint list form
  • Hide column in sharepoint list form
  • Hide SharePoint list columns based on user permissions
  • How to use PreSaveAction() in newform.aspx in SharePoint
  • document ready function not working
  • sharepoint read only column

Related Post:

>