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. Thank you for developing such a great tool.
    I’ve noticed one slight issue. When disabling a lookup field (drop down) the text is replaced by the lookup ID rather than the text. Is there any easy fix for this?

  2. Hi David,
    I just stumbled across your plug-in. Thanks for the script. I am having problems with the disableWithAllowance setting. I am a site collection admin and part of the specified group and still cannot access the field. I have verified that Jquery is loading. For the others that were having similar issues, what was the fix?

    Thank you!

      1. Hi David,

        First of all thanks a lot for your awesome work you put into the community. Im having the same problem as few others, where Lozzi.Fields.disableWithAllowance does not work and disables the field for everyone.

        What i have tried:
        * Developer toolbar – no errors
        * Created new group – no effect
        * Tested on latest Chrome, IE, Edge – no effect

        System Spec:
        * Win 10 Pro PL
        * SharePoint Online Business Premium
        * SharePoint Online E3

        A beacon of hope or an element which could shed a bit of light into this mistery is that Lozzi.Fields.hideWithAllowance works as expected.

        Thanks in advance.

  3. Hi David,
    Thank you for your code.
    I dowloaded the last version of Codeplex and also the last version of jQuery. I am using SharePont 2013. The disableWithAllowance option is working properly for the first column and rest of the column which i applied is not working on the same form, Can you help please?
    Thank you
    Sajesh

  4. I see functions for show and enable, but I get a “not supported” when I try to call these. Are the function available? I would like to conditionally enable/disable fields based on form field selections.

      1. Thanks for the reply. Yes the libraries are referenced and the disable() and hide() methods function as expected. But I cannot get show() and enable() working. I am referencing jquery-2.1.4.min.js and using this in a SP2013 EditForm.aspx. Any suggestions?

        1. show() and enable() are private functions, aren’t available from outside of itself. You can make them public by adding them to the return statement at the bottom of the script, like
          return {
          disable: disable,
          disableWithAllowance: disableWithAllowance,
          hide: hide,
          hideWithAllowance: hideWithAllowance,
          show: show,
          enable: enable
          }

          1. Thanks David, I’ll try that. I am surprised no one ever had a need to show or enable a field after hiding it. Seems simple enough. thank you!

  5. Hy David , Can You Please Help Me , Where I Must Put This Script , Because I am Try Put In Master Page , Not Working Please Detail me , Sorry I am Newbie in Sharepoint

    1. You have a couple of options. Putting it in your master page will let the code be available everywhere, but you’ll still need to put specific code on pages where you want to implement it. I usually use a Content Editor Web Part, linking to an HTML file which contains the code. Hmm.. not sure how much that helps. I’ll write up another blog post explaining how best to embed this code stuff, give me a couple of days ;)

  6. Hi David!

    I was trying out SharePoint 2013 and needed to use your script. I was able to use your script on a sample list. After editing the form using InfoPath in changing the layout of the fields, the script no longer apply to the fields. I tried inserting your script in the “newifs.aspx” & “editifs.aspx” but it still doesn’t work. I used the Console to execute the script but it returned “Undefined”.

    Any idea on applying the script on a list modified in InfoPath?

    TIA,
    Roy

    1. Unfortunately this won’t work with InfoPath forms. Sadly we can’t do much with JavaScript and InfoPath forms. I created this script so we wouldn’t have to use InfoPath. Since you are, you can hide fields as you need and change the form layout with ease.

  7. Hi David!

    I’m trying out SharePoint and needed to use your script. I was able to make it work on a sample list on O365. After editing the form using InfoPath, the script no longer apply to the fields. I even tried inserting the script in the “newifs.aspx” & “editifs.aspx” but doesn’t do anything. I tried running Lozzi.Fields.disableWithAllowance(“Status”, [“Group1”]); using Console and it returned Undefined.

    Any idea on how to enable the script in an InfoPath modified form?

    TIA
    roy

  8. Hi David:

    Thank you for the script. Like other people mentioned hide and disable seem to be working great but disableWithAllowance and hideWithAllowance are throwing the following error (using this in a script editor web part at the top of EditForm):

    //group names in an array of strings, i.e. [“Group One”,”Group Two”]
    var disableWithAllowance = function (fieldName, groups) {
    disable(fieldName);

    spContext = new SP.ClientContext.get_current();

    Error = “Unable to get property ‘get_current’ of undefined or null reference”

    currentUser = spContext.get_web().get_currentUser();

    spContext.load(currentUser);
    spContext.load(currentUser.get_groups());

    I am running in a stock SP 2013 onprem environment, seattle masterpage, and referencing/using jQuery 1.10.2 (also working with 1.11.3):

    My redacted script/source is the following if it helps (known good/working calling hide and disable)

    http://servername/AI/jQuery/jquery-1.10.2.js
    http://servername/AI/jQuery/Lozzi.Fields.js

    $(document).ready(function(){
    Lozzi.Fields.disableWithAllowance(“field nema”, “SharePoint Group Name”);
    });

    Thank you for your help

      1. Hi David: I was also able to reproduce the issue on an Office 365 environment (no customization/stock team site, master page, etc. AFAIK) re: disable and hide WithAllowance.

        Thanks again in advance for your help.

        1. Thanks for the comments. I updated the example script above, including a wait for the sp.js file. Shame on me :). Please try again with this change and let me know. I also updated the Lozzi.Fields script to fix People Picker and Metadata fields, grab the latest if you can!

  9. Hi David,
    Thanks for the great script as with an O365 environment I was unable to modify the field behavior without using VS code.
    I did face some issues with integrating the script into my code.

    ISSUE 1: disableWithAllowance() and hideWithAllowance() were not working as expected. Some troubleshooting helped me determine that it was occurring due to SP.js not loading as expected. Comments here later validated my issue and it is now RESOLVED. Many thanks.

    ISSUE 2: A wait image is shown on the person or group field after disabling it using disableWithAllowance(). It works fine with using just disable().

    I can’t attach a screenshot here but will try and find your email and send them to you.
    Thanks for your help.

    1. Hi cjojucool,

      Could you please let me know how could you make disableWithAllowance() and hideWithAllowance() work on people picker fields. The script is disabling for everybody even if you are a site collection admin. let me know if you can shed some light on this issue.

      Thanks
      Suhas

    2. Thanks for the feedback. For ISSUE 1 I updated my sample code to wait for sp.js, is this the same method you used?
      For ISSUE 2, updated the code. Please grab latest and let me know!

  10. Hello David, Thank you for an awesome script and the continued support with it. I have an issue that nobody has submitted yet. I’m using the script to hide with allowance for 8 columns. I’ve added it to the View, Edit, and New item pages. In IE, it works perfectly for all 3 pages. In Chrome and Firefox, it works for Edit and New, but only hides the first column (in the script) on the View pages. Any ideas?

    1. Update: Using the console, I’m seeing the error, “TypeError: SP.ClientContext is undefined” Line 118 of Lozzi.Fields.Js.

      That ONLY happens on the View Item page.

      I’ll keep digging and let you know if I can get past it.

  11. Nice code.
    I have a checkbox. Once it is checked, it should be disabled in editform.
    Something like IF checkbox=true Lozzi.Fields.disable(“checkbox”)
    Is this easy to do? Can you help me with sample code?

  12. Hi David,
    Thank you for your code.
    I dowloaded the last version of Codeplex and also the last version of jQuery. I am using SharePont 2013. The hide and disable arre working properly, however the disableWithAllowance is disabeling for everybody. Can you help please?
    Thank you

  13. I have a custom list that contains a date time field. The client requested we trim the time portion of the field to only show two available appointment times of 8:30 am and 1:30 pm. In order to do this I added the following javascript code to the New and Edit forms of the list. The problem I am having is when the users open the edit form it does not maintain the previously selected time value. It shows the first available value of 8:30 AM, so if the users open the edit form and change some other field than the time field they inadvertently change the originally selected time field to 8:30 am even if the originally selected time was 1:30PM. How can I get the code to default to the originally selected time value from the New form within Edit form?

    $(document).ready(function () {

    var str=[‘8 AM’,’1 PM’];

    $(“select[id$=’_DateTimeField_DateTimeFieldDateHours’]”).each(function(i){

    $(this).html(“”);

    for(var i=0;str[i]!=null;i++){

    $(this).append(”+str[i]+”);

    }

    });

    });

    $(document).ready(function () {

    var str=[’30’];

    $(“select[id$=’_DateTimeField_DateTimeFieldDateMinutes’]”).each(function(i){

    $(this).html(“”);

    for(var i=0;str[i]!=null;i++){

    $(this).append(”+str[i]+”);

    }

    });

    });

  14. Hi David,
    I’m trying to disable the choice field(radio button) but it’s not working properly. it will disable the field but will add extra text of “ctl100” before the Options. Please tell me how to deal with this.
    I have also got the same issue that Lozzi.Fields.disableWithAllowance is not working properly. The field gets disabled for everyone. I’m using latest Lozzifield.js

      1. David,

        I have your most recent code and am using it in a New Item page on office 365 version of sharepoint. But inspite of me being a site collection admin, still the people pickers are disabled for me on the form. Could you please help me on this.

        Thanks
        Suhas

  15. Hello David … It’s Works fine now… Finnaly I got :0

    But as another users said, I am also having problems witht Lozzi.Fields.disableWithAllowance is not working properly. The field gets disabled for everyone.

    Do you have any idea ou new update for this?

    Thanks again for your support.

    1. Obs: I’v already downloaded the new version of script (Lozzi Field No Site Col), and stil got the same issue… I’m site collection admin, and the field still disable for me.

      David, can you help me on this?

  16. look at the error I got

    Failed to load resource: the server responded with a status of 404 (NOT FOUND)
    New%20form%20v2.aspx:512 Uncaught ReferenceError: Lozzi is not defined
    $
    jquery.min.js:2 function (a,b){return new o.fn.init(a,b)}

  17. Thanks Again for your answer David =)

    I have another doubt… I already add the Jquery to Seattle master page… is this correct?

    And which section of my script do I have to insert the lozzy script? Sorry… I am new in this cenario… before I used to work with WebServices in Infopath.. to disable field… which is very simple..

    I appreciate your help :)

Leave a Reply

Powered by WordPress.com.

Up ↑

%d bloggers like this: