Easily Hide Columns on a SharePoint Form with jQuery
This is a really simple little thing. I end up writing little functions like this all the time, and never think much about them. But they are darn useful.
This little function will hide a list column’s row in the form. You might want to do this on a NewForm but not the EditForm, for instance, so setting the column to be hidden may not be a good answer. With this little function, you can hide the column’s row conditionally or on page load – whatever suits your fancy.
Here’s the function. All you need to pass it is the DisplayName of the column.
// Function to hide a column's row in the form
function hideColumn(c) {
$(".ms-formlabel h3 nobr").filter(function() {
var thisText = $.trim($(this).clone().children().remove().end().text());
// alert("::" + thisText + "::");
return thisText.indexOf(c) === 0 && thisText.length === c.length;
}).closest("tr").hide();
}
Then you might call the function like this:
$(document).ready(function() {
hideColumn("Priority");
});
This will simply hide the column, but any value in it will still be submitted.
For instance, I just added a column to a list called “User Agent String”, set like so:
$("textarea[title='User Agent String']").val(navigator.userAgent);
and then hid it:
hideColumn("User Agent String");
Put it together and what have you got? (Bonus points to anyone who knows the next line in the song.)
$(document).ready(function() {
// Set the User Agent String
$("textarea[title='User Agent String']").val(navigator.userAgent);
// Hide the columns which aren't relevant to the user
hideColumn("User Agent String");
});
// Function to hide a column's row in the form
function hideColumn(c) {
$(".ms-formlabel h3 nobr").filter(function() {
var thisText = $.trim($(this).clone().children().remove().end().text());
// alert("::" + thisText + "::");
return thisText.indexOf(c) === 0 && thisText.length === c.length;
}).closest("tr").hide();
}
I meant to ask, where and how would you insert this code. I am using office 365/SharePoint 2013. I have a site with document set, on the new form i want to hide a few fields and on edit form I want to be able to display them for edit. I hope to find some help. thanks for your time.
lakman:
Each Document Set Content Type has a “home page” called docsethomepage.aspx. It’s a Web Part Page, so you can add Web Parts to it. Using the Content Editor Web Part, you can add things like script or custom CSS. You should use the Content Link to point to a file containing your customizations for better maintainability.
M.
What if I want to hide a row instead of a column? I have been trying to figure it out but not going anywhere…
Magdalena:
Magda:
If you mean hiding a list column, that’s what this post is about. List columns are shown in rows on forms.
M.
Duh! you are right I am sorry.
Thank you for your instant response
No problem!
I greatly follow many of your posts and has been very helpful. I would like to hide a column in a list that comes up with calculated value=[Me] basically the user id but as I have enforced unique value on the column and would not like user to know that upfront however would like to display such validation message saying duplicate entry etc. Any thoughts on how to achieve this. Would greatly appreciate any insight. Thank you!
NK1:
It sounds like you are trying to do several things here. Take a look at SPRequireUnique in SPServices as an example.
M.
I’m unable to get this to work with hiding a column for a Choice Field. I’m actually trying to just hide the section of the userform. I’ve tried the following and none of them work. I’m able to get Yes/No Checkboxes to hide without any problem using this syntax, but not choice fields. Anyhelp would be appreciated.
$(“input[title$=’MyField’]”).closest(‘td’).hide();
i want to hide document library view based on group in sharepoint 2013 using rest api
@Shan:
That’s a pretty broad request. There’s not a simple answer.
M.
for SharePoint 2013, I’ve changed $(“.ms-formlabel h3 nobr”) to $(“.ms-formlabel h3”)
Thank you.
How can I put this into the SharePoint 2013 “Quick Edit” list view to show and hide columns? And how can I do this for a number of columns and to be accessed on the same web part or wiki page by clicking a link or another element? I need to instantly show or hide columns in a list based on use choice.
Always love your articles. Typical case of I’m not a developer (designer myself) so always love it when developers help non-developers (and developers helping developers).
Any chance you could add an example in of extending this to hide some columns depending on value selected in another? e.g. hide “user agent string” if a choice column called “profile” contained the value of user.
And if anyone has examples with JSlink that would be great.
@C M J:
There’s no “formula” for this sort of thing. I could give you another specific example, but you’d probably need to tweak it. My suggestion would be to get familiar with CSS-style selectors (which is basically what jQuery uses) so that you can meet your specific needs.
M.
Hi Marc! Thank You much, works great! :)
p.s.: for SP Online 2013 (Calendar Edit/New form) – selector in my case was:
jQuery(“.ms-formlabel span nobr”).filter(function()
istead of
jQuery(“.ms-formlabel h3 nobr”) for on-premise
Best regards,
Gennady
Can you disable or hide a required field on the EditForm? I populate a required field via workflow, however I don’t want anyone to be able to edit it. I’d like to do in JavaScript if possible. Thanks.
@KDub:
If the column is required and you hide it, you’ll need to fill in a value in the form or the user won’t be able to submit it – and they won’t be able to tell why. If you’re not displaying it, you could make it optional though, right?
M.