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!

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

Add yours

  1. Thanks for this handy solution – I hit a snag with fill-in choice being enabled. Dev tools are not showing me anything useful so far. I read through many older comments referring to this field type (and issues) but I believe I have your latest code from Git. I am doing a hidewithallowance for two fields on edit and display forms – one field (yes/no) works perfectly, the other field is choice (15 choices defined but not multi-select just drop-down) works/disables fine until I allow fill-in choices, then the field is gone and only the label remains on the display or edit forms. As mentioned earlier, dev tools don’t catch anything – I tried a few different break points where I thought it might reveal something but I am a relative js noob. Thanks in advance!

    Like

    1. I mis-wrote above hidewithallowance – should have been disablewithallowance. hidewithallowance works as intended. Sorry for any confusion.

      Like

      1. Not sure what’s going on there, it probably just needs to be updated. SP changes the page objects (DOM) significantly between field options. I’ll aim to check it out in the next day or two

        Liked by 1 person

  2. Hi David,
    First, thanks for you scripts.
    I am new in SP but managet in half a day :) to hide and disable some fields in Task Edit form.
    In my situation (Custome Workflow) at the Task Edit form I also have a field – DropDownList “Content Type” with 2 possible values – “Task” or “Workflow Task (SharePoint 2013)”. I e-mail to you screenshot.

    I tried to hide and disable this field but with no success.
    May you suggest the reason and how to fix it?
    Regards, Alexander

    Like

    1. Right, it’s specifically looking for how SharePoint does it. If you have a custom form you can replicate this within your code set probably easier. The goal here was to provide capabilities to out of the box forms.

      Like

  3. David,
    There is one thing I want you to help me.
    I have a form have multiple headings
    – Employee info
    – Supervisor Remarks

    I have hidden all the fields of “Supervisor Remarks” from Employee but the heading “Supervisor Remarks” is shown to Employee.

    I want to hide the heading “Supervisor Remarks” as well from the employee. script for heading creation.

    $(function () {
    //set section text and field name

    AddSectionBeforeField(“Employee Information”,”Employee Code”);
    AddSectionBeforeField(“Supervisor Remarks”,”Supervisor Recomendation”);

    });
    function AddSectionBeforeField(sectionText,fieldName){
    var $fieldTR=$(“.ms-standardheader nobr:contains(‘”+fieldName+”‘)”).closest(“tr”);
    $fieldTR.before(“”+sectionText+””);

    }

    is it applicable using your script “Hidewithallowance()”

    Like

    1. I use this function as well, but found that it does not work on a displayForm. In addition, adding ID to display I found very useful but I had to change the above code to Add a section before the ID.

      Like

      1. David i cant copy/paste here,
        Please share your email id or let me explain again

        i have field Address
        when i apply your script to hide Address field from certain sharepoint group.

        Address : abcAddressOfPerson

        it hides “abcAddressOfPerson” but the label “Address : ” remain shown on form.
        i am using sp online

        Like

        1. It might be your syntax. Here I’m using the his library. var admingroup = “BSM Request Admins”;
          Lozzi.Fields.disableWithAllowance(“Request Phase”,[admingroup]);

          Like

  4. Hi ,
    i am getting one issue while using your script.
    script only hides the textbox but not the label of the textbox.
    please reply..
    e.g Name : TextBoxField(Input)
    it hides Textbox and remain show the label

    Like

    1. What’s your SharePoint? What type of list? What type of field(s)? Which browser and version? What’s your syntax? Which jQuery are you including? Any errors being thrown (look at console).

      Liked by 1 person

  5. Hi Lozzi,
    I am getting strange results scripts works for me but only hides the text box not the Label of TextBox.
    can you comment on this ?

    Like

  6. Looks like you do not support the fieldtype=SPFieldUserMuti. I updated my version of your code to support this option and called the diesalePeoplepicker method. Works fine for a single name in this fieldtype and works fine for multiple names with the exception of leaving the x’s there to allow the user to delete a name.

    Lastly, I still can’t seem to call your functions from IE 10. It has Lozzi undefined. Thanks

    Like

      1. I can, but I really didn’t do anything except add the new option for SPFieldUserMuti which is exactly the same code you were using for SPFieldUser. I didn’t have the time to figure out how to remove the “x” when there were multiple names. That seems like the only change that is needed from that of SPFieldUser.

        Like

  7. A couple of enhancements I might suggest.
    1. Defaults for some fields are very changeling and require code. Defaulting a people-picker to the current user is a common default
    2. Comparison formulas – is field x == Y. You could start out simple and not include other operators as > or <

    Just some thoughts. Thank you for developing these.

    Liked by 1 person

    1. I like these ideas. I explored setting a default user, and frankly, that was really difficult, as the name you see if a lot more than just a name.

      I like the comparison formulas idea, mind throwing that up on git as a feature request in the issues list? We’ll see what I can do ;)

      Like

  8. Hello. Thanks for this. I am having a problem getting this to work in IE. In chrome it works a dream but in IE I get an error that lozzie is undefined….

    Like

    1. I just implemented this in Chrome and found it was working great. After seeing your post, I too have issues in IE. Did you get a fix?

      Like

  9. Greetings David,

    Thank you for your work.

    I hesitate posting after reviewing this page going back to 2015. But I’m having a similar error with the hideWithAllowance and disableWithAllowance. I’m getting a JS error:

    fields.spContext.load(fields.currentUser);
    fields.spContext.load(fields.currentUser.get_groups());
    fields.spContext.executeQueryAsync(() => {
    fields.getGroupsAndShow(fieldName, groups);
    }, asyncFailed); <———————————————————-RED ERROR BALL
    },

    ***Lozzi.Fields.js:277 Uncaught ReferenceError: asyncFailed is not defined at Object.hideWithAllowance (Lozzi.Fields.js:277) ***

    We are using 2013 on prem SP. Error occurs in IE and Chrome.

    Basically, the hide works regardless of membership in the group; the hide always hides. The disable doesn't work at all.

    My code within a html file.
    //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
    /sites/InfoSecHome/IAM_MRBA/SiteAssets/Lozzi.Fields.js

    $(document).ready(function(){
    ExecuteOrDelayUntilScriptLoaded(function(){

    Lozzi.Fields.hideWithAllowance(“TestHide_Field”, [“MRBA Waiver Owners”]);
    Lozzi.Fields.disableWithAllowance(“ReadOnly_Field”, [“MRBA Waiver Owners”]);

    },”sp.js”);
    });

    I appreciate any feedback you can give.

    Thank you in advance,
    Donovan Quesenberry

    Like

      1. I have the latest and greatest and testing in Chrome (v 77 64 bit) and IE (v11). The functions seem to be working as before. Not a thorough test, but probably 60% coverage. The new features (Multi-user and IE) specifically are working in both Chrome and IE. Having this library available really makes the UA more user-friendly and keeps it much tighter to prevent mishaps.

        Liked by 1 person

  10. Hi David, just a thought,
    what do you think of a function to color the line?
    it might be useful to separate the sections of the form.
    regards

    Renis

    Like

    1. I like it. could add a form break, provide color code and height, along with a title field, which would highlight a field providing a code… sounds easy enough! I’ll see what I can do

      Like

  11. Hi Davide, congratulation for your script, and many thanks for sharing.
    It’s very useful.
    I have a question for you regarding multiple choice checkbox.
    If I disable it for modification I cannot understand which option are selected.
    for example:
    if checkbox disabled:
    Variante
    on
    Alzatina posteriore
    Attacchi acqua anteriori
    Attacchi acqua posteriori
    Barra antirollio
    Carico Acqua automatico
    Controllo picchi
    Corrimano
    Foro miscelatore

    Variante
    (checked) Alzatina posteriore
    (checked) Attacchi acqua anteriori
    Attacchi acqua posteriori
    (checked) Barra antirollio
    Carico Acqua automatico
    (checked) Controllo picchi
    Corrimano
    Foro miscelatore

    Am i wrong?
    many thanks again

    Renis

    Like

      1. Hi, thanks a lot for your quick answer!
        Seems not working now, here the console log.

        jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot read property ‘indexOf’ of null
        at Object.disable (Lozzi.Fields.js:28)
        at Modifica.aspx?ID=283&xxxxxMareno.aspx:552
        at ExecuteOrDelayUntilEventNotified (init.js:1)
        at ExecuteOrDelayUntilScriptLoaded (init.js:1)
        at HTMLDocument. (Modifica.aspx?ID=283&Source=httpsxxxxMareno.aspx:551)
        at l (jquery-3.3.1.min.js:
        at c (jquery-3.3.1.min.js:2)

        if I restore previous version is ok.
        thanks

        Renis

        Like

            1. Hmmm… I see you’re using jQuery 3.31, so I updated my version accordingly and it still works as expected.

              What version of SP are you running on?

              Can you Inspect your field in dev toolbar (right click on the field and select inspect) and expand the HTML out and send me a screen shot of the field? Email me at david.lozzi at slalom.com. It looks like your SP might be missing some expected content.

              Like

            2. Ah, it’s prbably a language issue, I’m looking for a comment with the workds FieldName in it, which it looks like your SP wouldn’t have. So, I’ve applied a fix, give the latest a try.

              Like

Leave a Reply to David Lozzi Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: