SharePoint Script: Hide, Disable and Format your fields

last updated 10/7/2019

This one has been on my list for a while. I’ve used a collection of JavaScript methods to help streamline customizing forms in lists. I have created and compiled this little collection starting probably 5-6 years ago, and over time I’m constantly updating, tweaking, enhancing it, especially more so as of late working with Office 365.

This script works on SharePoint 2013, 2016 and Online. I heard it works on 2010 as well, though I haven’t had much experience with it there. Let me know!

I have a lightweight JavaScript file which allows you to hide or disable (set to read-only) fields in a new or edit form. It’s pretty basic but is a big value add. Also, you can set a field to read-only for only certain groups, meanwhile allowing other groups to edit the field. You can also hide a field completely, as well as hide a field and only show it for certain groups. Pretty sweet right?

This script now includes some basic formatting options! Check out more detail here.

The script is here: download from GitHub.

How to use it

Include the script along with jQuery on your page. Ideally, throw this nugget into your master page and you can use it anywhere in your site.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="path/to/file/Lozzi.Fields.js"></script>

Once that’s in, get using it! It’s really simple, I threw this on my new form for my task list:


 $(document).ready(function(){
 ExecuteOrDelayUntilScriptLoaded(function(){
 Lozzi.Fields.disableWithAllowance("Start Date", ["Project Managers"]);
 Lozzi.Fields.disable("Task Status");
 Lozzi.Fields.hide("% Complete");
 },"sp.js");
 });

This will change our New form for a typical task, from:

New SharePoint Task Form

to

New Task Form with Hidden Disabled Fields

See the difference? It’s subtle, but when working with end users, it can provide a huge benefit to help streamlining your business flow.

From here, you could have the edit form disable or hide a lot of the fields for normal users, only allowing your Project Managers, or if this is a support request list, your Support Team access to modify fields as needed. The options are endless.

More details

Lozzi.Fields.disable(fieldname)

Simply disables the field, for all users. It hides all controls in the field and displays the value instead.

Lozzi.Fields.disableWithAllowance(fieldname, groups)

Disables the field, but enables it for the users in the groups specified. Also, Site Collection Administrators are included automatically, so they can always edit the field. You can send the groups in an array, like [“Group One”, “Group Two”].

Lozzi.Fields.hide(fieldname)

Simply hides the field, for all users.

Lozzi.Fields.hideWithAllowance(fieldname, groups)

Hides the field, but shows it for the users in the groups specified. Also, Site Collection Administrators are included automatically, so they can always edit the field. You can send the groups in an array, like [“Group One”, “Group Two”].

Some other important notes

  • Currently, this script does not work on list views, meaning a user could edit the data in datasheet/quick edit view.
  • This script should work just as well on SharePoint 2010 if you so desire.

Download this script here: download from GitHub.

Til next time, Happy SharePointing!

212 thoughts on “SharePoint Script: Hide, Disable and Format your fields

Add yours

  1. Hi David,

    I would like to know is this script works fine for any jquery version, or do I have to download the exactly same version that you are using?

    Sorry,

    I am new working with Jquery, this is my first time

      1. Hi David. Thanks for your information. This solution works for SharePoint cloud? Using Office 365?

  2. Hi David,
    I tried the script and it’s working fine. But Lozzi.Fields.disableWithAllowance(fieldname, groups) is not working for “People Picker” and “Date” field.
    Can you pl look into it.

      1. I am having issues with People Picker and the drop down fields as well. But the link you provided doesn’t seem to exist. Would you be able to send? I know I am late to the party. Will appreciate the help.

      2. BTW, I was able to fix the PeoplePicker issue. I had to go to the Loozi.js and change ms-inputBox to ms-inputuserfield. That did the trick. Now if only drop down field can be fixed. Ah!

        1. Thanks for the comments. I’m not sure what the issue is exactly :P. I just updated the script for a fix for People Picker and Metadata fields. Can you try this most recent version, also noting the update above to my sample script which includes waiting for sp.js.

    1. the same, Lozzi.Fields.disableWithAllowance(fieldname, groups) is not working for dropdown fields

      1. Can you confirm the type of field you’re using? Is it a lookup? How many items are in the pick list? Dropdowns are working fine from my end. Feel free to email me david.lozzi at slalom.com

  3. I have also got the same issue that Lozzi.Fields.disableWithAllowance is not working properly. The field gets disabled for everyone. I noticed that few users had the same issue and they have found the solution; I would request those users to write details that how it had resolved.

  4. nice one, I have an issue in office 365 sharepoint online people picker, It is not displaying just user name, It is displaying all details as shown blow. any way we can display only name in office 365?

    10;#sandesh m m,#i:0#.f|membership|sandeshmm@xchanging100.onmicrosoft.com,#sandeshmm@xchanging100.onmicrosoft.com,#sandeshmm@xchanging100.onmicrosoft.com,#sandesh m m,#https://xchanging100-my.sharepoint.com:443/User%20Photos/Profile%20Pictures/sandeshmm_xchanging100_onmicrosoft_com_

  5. nvm, after searching and researching I found out that I have to use escape characters for that like this
    Lozzi.Fields.hide(“field //(test)// name”);

    worked like a charm. Thanks again for the wonder script!

  6. This is awesome. Thanks, David. I am going to especially like the the disable feature.

    One issue I ran into when testing this and can’t solve this is- when I have a column with parentheses it does’t seem to take any action on the field. Say I have “field (test) name” as my column name I have tried:
    1) Lozzi.Fields.hide(“field (test) name”);
    2) Lozzi.Fields.hide(“field_x0020__x0028_test_x0029__x0020_name”);

    What am I missing?
    Thanks

  7. David, I am also trying out this script and I am having problems with the disableWithAllowance and hideWithAllowance functions.

  8. I’m having trouble with DisablewithAllowance part. The following script error appears:
    “Unable to get property ‘get_current’ of undefined or null reference”

    Any ideas on what might cause this?
    If I could get this working om my Office 365 Site, that would be great!

    1. The undefined error has been solved(see code below), but now I’m facing the problem that the disableWithAllowance and hideWithAllowance are not working. There are no erros visible when debugging. Anyone who got these two working in Office 365?

      the normal hide and disable funtion works fine.

      $(document).ready(function(){
      SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, sharePointReady);
      });
      function sharePointReady() {
      Lozzi.Fields.disableWithAllowance(“field1”, [“TESTGROUP”]);
      Lozzi.Fields.hideWithAllowance(“field2”, [“TESTGROUP”]);
      Lozzi.Fields.disable(“field3”);
      }

      1. Hi Remy,

        I got this to work on two of my o365 sites, however I’m noticing a trend. Any chance we could connect via Skype/Hangout and I could take a look at your screen and troubleshoot? Let me know via email, david.lozzi at slalom.com

        Thanks!
        David

  9. So, this sounds really interesting but I’m new to this level of customization and don’t really know where to put this on the page. I can’t stick it in the middle of the XSL in SPD (tried that) so I added a script editor web part on the new editform.aspx page and downloaded the .js file to the root site (also copied the js URL and pasted that into the snippet). Any other helpful links or tips to get me going? Thanks!

      1. I did add both snippets into one script editor web part. Looks like this:

        $(document).ready(function(){
        Lozzi.Fields.disableWithAllowance("Task Name", ["Project Owners"]);
        Lozzi.Fields.disable("Start Date");
        Lozzi.Fields.disable("Due Date");
        });

          1. Still no joy, but I think I’m missing something fundamental that is shorthand for the pros. I went to my new form (progressEditForm.aspx) in SPD13, added a web part, and then went to the form in IE and edited the page. Created the script editor, added the snippets, tweaked the fields and URL, downloaded the js file from codeplex, uploaded it to root collection site assets, pasted the js URL into the snippet, verified jquery 1.9.1 is running in our environment. Am I missing anything?

  10. Great post and perfect solution for my need but Weirdly it doesn’t work for me. SP 2013 Onpremise. Included the Jquery locan and Lozzi JS along with the small code in CEWP on all three forms but it doesnt work. Not even hiding or disabling. Any idea of the mistake i’m doing? I can send you the code if you wanna have a look.

  11. Hi David,

    I have downloaded and used your script from codeplex. Its great and it works perfectly ok for the simple “hide” and “disable” commands but fails when i try to use the “disableWithAllowance” and “hideWithAllowance”.

    I’ve performed the following steps with no luck.

    1. Created a simple named SP group called “DummyTEST” and added the test account to it.
    2. Added the code to a custom list form (edit form type)
    Code:
    Lozzi.Fields.disableWithAllowance(“Start Date”, [“DummyTEST”]);
    3. The “disableWithAllowance” and “hideWithAllowance” doesn’t work and it either disables or hides for everyone. Problem is similar to what was described by Sonia last month. I’m using “jquery-1.11.1.min.js” version of the jQuery file.

    I’ve also checked the error logs using the browser developer tools and it only throws warning message related to some body tags. Nothing that I could see related to this code.

    Any idea if i’m doing wrong?

    Thanks
    Sid

    1. Hi Sid,

      A couple of others have reported issues with the Allowance functions. I’ve retested and unfortunately continues to work fine here. If you’d like, we can connect remotely and I can see it in action on your computer. Email me, david.lozzi at slalom.com and we can coordinate.
      Thanks!
      David

  12. Hi David,
    I have downloaded your script. But doesnot work with the lookup column.

    It hides the label but the drop down is still visible.

    Any idea on this one? How to hide the lookup column.

    Thanks & regards,
    Manish

  13. Hi David, disableWithAllowance and hideWithAllowance doesnt work for me. i set up a group called developers on my site and have this code Lozzi.Fields.disableWithAllowance(“Assigned To”, [“Developers”]); however the field is disabled for everyone including me and i am in the developer group. any idea what im doing wrong?

      1. Hi David, I checked and there are no issues – i copied a sample of my script – maybe you will be able to see what’s wrong from this code

        removed code to save space on blog, please email it to david.lozzi at slalom.com

        1. I’m not sure this is the right code, I see more SharePoint code than my utils in here. Can you email me the code at david.lozzi at slalom.com? Thanks!

      2. It worked :) thank you for this amazing script and for your time helping me to troubeshoot my jquery issues

      3. Hi, I have been having the exact same issue that sonia had with the disableWithAllowance function, the field is disabled for everyone include site collection admins. I tried adding extra alerts into the code and they are not being triggered in either the getGroupsAndEnable or asyncFailed functions, that makes me think it is something to do with the spContext not being set.

        If you have any ideas if would be great, this code looks very useful.

        Thanks
        Henry

      1. Hi David, I am also having the same issue mentioned by Sonia & Henry…The field is disabled for every group even I mentioned to allow for “Managers” group. Please help

    1. Hi Sonia, how are you?

      I’m having the same problem as you wirh disablewithallowance. Can you tell me, how did you solve this problem?

  14. Hi David. I try to use your library and a have a strange problem (I am not familiar with jQuery and Javascript): In EditForm.aspx of a list i have used a script editor in which I have used the exact code:

    $(document).ready(function(){
    Lozzi.Fields.hide(“MyField”);
    });

    With the help of development tools of my browser i see that my page ‘views’ your library but it never runs the above script code. When though i run on debug console the whole script or just the command Lozzi.Fields.hide(“MyField”);… it works! Can you understand which is the problem?
    Thanks in advance!

    1. it worked! Don’ t be bother to deal with it. I dont know what was wrong! Thanks for your time! Please delete my post…

  15. Update: In addition to this not working, it removed the links at the top of the page for editing that page – the tabs for “Items” and “List”.

    1. Did you see my previous reply? Do you have jQuery? Are you seeing any script errors?

      Those tabs sound like tabs for a list view, and this script should be on a form for a list item, so those tabs shouldn’t exist at all.

      1. I. I followed your instructions and it seems that I have Jquery installed. I am getting erros though – SCRIPT 70: Permission Denied. I will email you a screen shot.

  16. Hi, I am new to SP. We are running hosted Office 365. I saved the .js file in Site Assets and put the script into my page but it’s not making any difference. It didn’t work for me but that may be because I am a Site Collection Admin but I’ve also checked with a user who is a normal user. I’ve tried DisableWithAllowance and Disable. Any ideas?

  17. Hi David
    Love the script, really useful. Having a small problem though.
    I am using o365 and when I try to disable a ‘Multi Line Text’ field it, disables it and then just shows text, but then directly below it shows the text box.

    Any Idea what is going on here?

    Gary

    1. Hi David
      Further 2 my query above, this only happens for ‘Multiple line of text’ fields when they are ‘Rich text’ or ‘Enhanced rich text’ it does not happen for types of ‘Plain text’
      Thanks
      Gary

Leave a Reply to David LozziCancel reply

Up ↑

Discover more from David Lozzi

Subscribe now to keep reading and get access to the full archive.

Continue reading