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.

Now, let us check out the below SharePoint list form customization 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:

Expected: But the list form should look like below:

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

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

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

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

5. Click on the “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.

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.

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.

Below is how the EditForm looks like.

Below is what the DispForm looks like.

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

Read SharePoint News Web Part

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

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

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.

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

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.

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.

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.

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

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

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

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="http://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 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.

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

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://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.

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:

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

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>

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.

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

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.

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="http://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:

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:

• SharePoint Online mega menu and Site Customizations
• Customize SharePoint Online site header and footer using SPFx Application Customizer
• Customize Header, Footer, and Navigation in SharePoint Online Communication Site
• SPFx Application Customizer Example
• PowerApps multi-select dropdown