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. David, thank you very much for this script. I am working with SharePoint for some time but just recently found this and it really made my life much easier :-)

    What i think it would be great feature is if you could make some fields visible or hidden for everyone except item creator (person in “created by” field).

    Again, thank you very much for sharing this wonderful script.

    Like

  2. David Give an Help, Your Script works very Well but i have an Problem with Disable and disableWithAllowance :
    – Comboboxes with values that are in another list he shows the ID of the list not the Value Example If I have a list of names it shows one value: 3 or 4 or 5
    – Comboboxes with Values defined in this list it shoes for example: ctl00 and not the name
    – People picker it shoes for example: 70;#Sam,#Sam,#,#,#Sam,#,#,# When the choice selected is “Sam”

    Can i get arround of this? I understand that he is showing me the Ids of the selections of combobox but i need the value in people picker it appear to show the id+value but i not understand the rest..

    Thank you very much

    Like

    1. Sorry for the delay, but I finally got around to looking into this. I can’t seem to recreate your issues on my end. If you’d like, email me, david.lozzi at slalom.com and we can continue to look further.

      Like

  3. Hi David,

    Thanks a lot for this ! I’ve been searching high and low for ages now to find a solution to hide form fields, tried your one and it worked first time !

    I just had one question, do you know if it would be possible to hide certain fields depending on the value of another through the use of your script ?

    I have a work type column with different choices and would like to hide certain fields depending on what work type was selected. Any ideas if I could achieve this with your script ?

    Thanks again,

    Ryan

    Like

  4. Hi David,

    Just wanted to confirm a constraint to make sure it’s not a user error on my part. When using the allowance option, am I correct in that it can’t recognize AD groups within a SharePoint group? Tried and it only seems to work when each person is added directly to the SharePoint group.

    Great script by the way. Been looking for something like this for sometime :)

    Thanks,
    Kevin

    Like

  5. Hi David, DisableWithAllowance and HideWithAllowance is not working for me. I set up a group called test members. The code should show the permission field for users in the test members group. Instead it hides the field from everyone.

    $(document).ready(function(){
    ExecuteOrDelayUntilScriptLoaded(function(){
    Lozzi.Fields.hideWithAllowance(“permission”, [“test members”]);
    },”sp.js”);
    });

    Like

  6. Hi there,
    Great script! Thanks for sharing.
    I’m having issues hiding the Title field on the display form. Does your script support this/
    thanks

    Like

  7. Hey David!
    You did an awesome Job putting this together!
    I stumbled over one thing though: When i downloaded the latest version of your library i recognized that the return value ‘show’ was missing. Is this on purpose, since unhiding fields would be impossible that way.
    greetings,
    Alex

    Like

      1. The Lozzi.Fields function, in the return section (Line 241 – …) return {
        disable: disable,
        disableWithAllowance: disableWithAllowance,
        hide: hide,
        show: show,
        hideWithAllowance: hideWithAllowance,
        setDefaultValue: setDefaultValue
        }
        The show argument was missing

        Like

  8. Thank you for this tool. I am disabling a lookup field and while the field is being disabled, it is displaying the ID and not the Title field of the lookup. Is it possible to display the Title field and not the ID?

    Like

  9. Hello. Tried this, but /SiteAssets/Lozzi.Fields.js is “Not Found”. Has this changed or is this now defunct? Thanks.

    Like

  10. Hi
    I am having an error with the disableLookupField.
    Disable works for all my other fields, but as soon as I add the disable to a field with a drop down list, it stops working for all of them.

    jquery-3.1.1.min.js:2 jQuery.Deferred exception: theControls is not defined ReferenceError: theControls is not defined
    at disableLookupField (/Scripts/Lozzi.Fields.js:75:21)

    Do you know what could be causing this?
    Thank you

    Like

    1. I have now created a custom Edit form as we also needed to change to of the field name text colours. I now have the following issues:

      1) The lookup field is now disabled, but it only shows the ID, not the line of text.

      2) The people picker field now displays this way:
      21;#Name
      Enter users separated with semicolons.
      It worked on the default EditForm.aspx

      Are you able to assist with this?

      As an aside, is there a way that I could incorporate the colour change into this script instead of creating a new edit form?
      The columns I have are Task status (drop down list) and Comments (multiple line text field) I’d like on the form itself that the words “Task Status” and “Comments” be displayed in red.

      Thank you

      Like

  11. Hi David,

    Thanx for your outstanding work,

    Like Patrick, I wonder how to be able to still see the time when disabling the date/time field.

    Like

  12. This isn’t working for my site. I put the following into a Script Editor web part on the EditForm.aspx page:

    //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

    /SiteAssets/Lozzi.Fields.js

    $(document).ready(function(){
    ExecuteOrDelayUntilScriptLoaded(function(){
    Lozzi.Fields.disable(“Title”);
    },”sp.js”);
    });

    The script is running. There are no errors in the console. I am using SharePoint 365. The title field still shows up. I am using Chrome as my browser. Am I missing something?

    Like

  13. Hello David,

    Thank you for your amazing work with your lozzi.fields.
    I experienced a little issue when disabling a Date/Time field.
    I use a Date/Time field with Date and Time. If I disable this field, it only shows the date but not the time.
    For Example:
    08/15/2016 12:00 AM is shown as 08/15/2106 if I disable this Date/Time field with Lozzi.Fields.disable(“Date/Time field”)
    Any idea how to solve this problem?

    Thank you!

    Like

  14. Hi David,
    Thank you for the great tool it was very useful to me.
    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

    Like

    1. I see the issue, and am working a fix now, however I don’t see ctl100 in my example. How many choice options do you have? Can you email me a screen shot? david.lozzi at slalom.com

      Like

  15. Hi David,

    I love how this made my life easier :)

    Is this possible in disabling the hyperlink field and just showing Click here? I tried the disable but It’s still showing the entire link. I was hoping I can change that to a link instead. (EditForm.aspx)

    Thanks again!

    Like

  16. Hello David,

    Thank you for the great tool it was very useful to me.
    I read that some ppl got “undefined context” error as well as me, just surround the code with “ExecuteOrDelayUntilScriptLoaded” function and the issue will be gone.

    I also did many tests and found that allowance is not working against “System” account! but work with any other account even it has the same permissions on the site/list.

    Thank you

    Like

  17. Hi Dave, Thanks for a great tool. Also have a issue with disabling a lookup field (drop down) cause of thext is replacing by the lookup ID. Can you provide us an update recording to this issue?
    Regards

    Like

Leave a 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

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: