SharePoint 2010 – set fields read only or hidden

An updated version of this article can be found here: alex75.it/sharepoint/set-field-read-only.

Goal

1) Set some fields “read only” in “Edit” modal windows of a list item.
2) Hide some fields in “New”, “Display” and “Edit” modal windows.

Prerequisites

SharePoint 2010 site
base of javascript
SharePoint Designer that can access to site

Content

The example is based on a custom list (“Protocol”). I start with an example that use “inline” javascript, and then some words on better approach with external javascript inclusion.
Start the work. Open with SharePoint Designer the “EditForm.aspx” of the list and in advanced mode. You MUST use “Edit in advanced mode” by right click menu to be enabled to changing everything in the .aspx).
Search the “PlaceHolderAdditionalPageHead” id tag in the page:

javascript place in SharePoint 2010

Insert this excerpt of code after the row with “<SharePoint:CssRegistration Name=”forms.css” runat=”server”/>”:

<!-- customization 1 -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
var $headers;   //collection of field labels
function getFieldRow(displayName) {
   if (!$headers)
       $headers = $('h3.ms-standardheader');

   var $header = $headers.find(':contains("'+displayName+'")'); // parent of <nobr>
   if($header)
       return $header.parents('tr')[0]; // first ancestor 'tr'
   else
       return null;  // not found

   // example of header with mandatory symbol
   // <nobr>Title<span class="ms-formvalidation" title="This is a required field."> *</span></nobr>  
}

function setReadOnly(displayName) {
   var row = getFieldRow(displayName);
   if (!row)
       alert("Field \"" + displayName + "\" not found.");

   var $input = $(row).find('input[type="text"]');   // find the text box

   var text = $input.val();
   $input.hide()                     // remove also field description
   $( $input.parents('td')[0] ).text(text);   
}

function hideField(displayName) {
   var row = getFieldRow(displayName);
   if (!row)
       alert("Field \"" + displayName + "\" not found.");

   $(row).hide();
}

//call to “hide” and “set read-only” functions
$(function () {       // short-hand for $(document).ready()
   hideField("Field 1");
   hideField("Field 2");
   setReadOnly("Field 3");
   setReadOnly("Field 4");
});
</script>

The first operation is for including an external jQuery file.

I’ve used the Microsoft CDN but you can use the local (“LAYOUT” folder) file or another CDN ( ref: docs.jquery.com/Downloading_jQuery).

The second part is the definition af the function that search the row (TR) where field is rendered (“getFieldRow”). It search the field by its “display name”, so you have to check out for language pack or different localization.

The function return null if field is not found. Is your work to check for this.

The other functions (“setReadOnly” and “hideField”) are self explanatory. This simple version of “setReadOnly” works only on “text” type imput controls.

The last part is final call of functions on page fields. Calls are made after DOM is full loaded (jQuery “ready()” on “document”), so all controls exists in the document.

It hide “Field 1” and “Field 2” (in the example “”) (in the example “Year” and “Counter”)

My form in “New” visualization is this:

and in original “Edit” mode:

This is the result of customization:

Note that the field description (in “Counter” field) is removed too.

The above example use a “inline scripts” approach. Of course a better way is to register the function in a external javascript file that can be used all the time we need, and obviously make code more simple to change, and page more light. Also for this purpose I’ve separate the code in more than a unique function, to make code more reusable.
When the javascript is in a external file we can use only this code to make all the work (note the inclusion of “my_project.js”):

<!-- customization 4 -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/_layouts/My_Customer/JS/my_project.js"></script>   
<script type="text/javascript">
    $(function () {
        hideField("Accounts");
        hideField("Category");
        setReadOnly("All Day Event");
        setReadOnly("Workspace");
    });
</script>

End.

Advertisements

5 thoughts on “SharePoint 2010 – set fields read only or hidden

  1. Not sure what is that wrong I am doing. When I put the inline query in the Content Editor it works but when I copy it into an external file it does not. Can You help?

    1. I suppose you are using SP 2010 on IE.
      First thing to do is check if .js> is loaded. Use F12 (developer tools) and search if there are any errors (another good way is add an alert([a number here]) and see if it is called).
      A common cause is a wrong path for the included file. How are you adding the script (external file)?

    1. Hi Shrikant,

      I’m sorry to say you that at the moment I’m not more “engaged” with SharePoint,
      If I can help you I’ll try but it is not clear to me what you mean with “all details get flush”.
      If you explain this better I hope someone can help you.

      Alessandro

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s