 |
November 10, 2010 Update: I’ve posted the sequel to this post: Autopopulate a SharePoint Form from URL (with SPUtility.js). I’ll leave the original intact just in case someone wants it, but I would highly recommend checking out the new and improved way using SPUtility.js! |
|
August 20, 2010 Update: The code below has moved to be part of a bigger library… check out SPUtility.js on CodePlex! |
After looking at a couple of examples online, most of them require the use of SharePoint Designer to make a field read only (or to hide it). Here is a method to make a field readonly using only Prototype (javascript library) and a Content Editor Web Part
- Edit the EditForm.aspx page
If the Edit Page option is missing from the Site Actions menu, use the ToolPaneView=2 URL parameter.
Ex: /EditForm.aspx?ToolPaneView=2 - Add a Content Editor Web Part
- Add the following code (in this example, “Question” is the name of my field):
<script type="text/javascript" src="[YOURPATHTOPROTOTYPE]/prototype.js"></script>
<script type="text/javascript">
function SetReadOnly()
{
var inputs = $$('input[title="Question"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>
<script type="text/javascript">
function SetReadOnly()
{
var inputs = $$('input[title="Question"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>
References:
Update after Patrick’s comment (below). Here is an updated version of the code if you want to use it for multiple fields. You can simply call SetTextFieldReadOnly for each text field you want to hide.
<script type="text/javascript" src="[YOURPATHTOPROTOTYPE]/prototype.js"></script>
<script type="text/javascript">
function SetTextFieldReadOnly(name)
{
var inputs = $$('input[title="' + name + '"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
function SetReadOnly()
{
SetTextFieldReadOnly('Title');
SetTextFieldReadOnly('Question');
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>
<script type="text/javascript">
function SetTextFieldReadOnly(name)
{
var inputs = $$('input[title="' + name + '"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
function SetReadOnly()
{
SetTextFieldReadOnly('Title');
SetTextFieldReadOnly('Question');
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>
This works great. Thank you so much!
It even works for multiple fields by duplicating the block within SetReadOnly() and renaming inputs to input1, input2 etc.
Patrick
Patrick,
I updated my post so you won’t have to duplicate the entire block. You can just call the SetTextFieldReadOnly function over and over.
Thanks!
Pingback: Kit Menke's Blog » Blog Archive » Autopopulate a SharePoint Form from URL
Where do I get the prototype.js file?
You can download prototype.js from http://www.prototypejs.org/.
Hi Kit,
Is it possible to apply this script to fields other than text like “choice” or “person or group”?
Thank you in advance.
Peter
Peter,
This script won’t work with Choice or People fields. However, I am working on a library that should hopefully be able to handle both types of fields. I’ll keep you posted.
Thanks,
Kit
Thanks Kit
This one is good.
Actually my question is how we can use SPUtility in Custom List Forms?
In Custom List forms we are not have SPField Value. Can you please suggest
me on this?
A custom list form created using SharePoint Designer? SPUtility.js doesn’t (yet) work on those forms because of the way it looks up the fields (depends on the rigid form structure). The library needs modifications to be able to work with those forms.
I put it on my SPUtility.js todo list. If you’re feeling adventurous, you could take a look at the code too.
Hi peter,
Just for information… If you want to do it for Textarea, Choice Fields ..
then change the code a bit ..
For Textarea:
var inputs = $$(‘input[title="' + name + '"]‘);
to
var inputs = $$(‘textarea[title="' + name + '"]‘);
For ChoiceField:
var inputs = $$(‘input[title="' + name + '"]‘);
to
var inputs = $$(‘select[title="' + name + '"]‘);
But we don’t have any clue for person and group. But we can access this person and group class and make it as readonly. But it will effect in all the persona and group fields which are there in the form.
But if you are planning to go for Normal form instead of Custom List form then Kit given an excellent libarary to us (SPUtility.js). It works like charm !…
Kit we are very much thankful to you….
Thanks,
Rao…
Hi Kit,
“A custom list form created using SharePoint Designer?”
- Yes.
Actually I did all my work with normal forms (and SPUtility). If in case my work is not going to satisfy with normal forms then I need to go for Custom List forms. That is why I’m trying SPUtility with Custom List.
Anyway I used your above concept for labeling the fields. I will use this concept ..
Thanks for quick response !….
-
Rao
I want to add one more point to my last but one comment.
For the textarea – It should be plain text. If it is Rich rext or enhanced Rich text
then it is not going to convert it into label / read-only.
Thanks,
Rao.
Pingback: How to make a field Read Only… Here you go! « r.senthil's space
Can this work for number field? Thanks.
Rui,
Take a look at http://sputility.codeplex.com/. It is my updated library that supports Number fields as well.
Thanks,
Kit
two questions:
1. How do you reverse this?
2. When I did it the data field disappeared…I need the user to still be able to see the information just not be able to edit it?
Carala,
1) You can reverse this by deleting the JavaScript from your Content Editor Web Part or even delete the whole web part.
2) Yep, the code is a little bit of trickery… it hides the field and adds a new label with the value of the field. I would highly recommend taking a look at SPUtility.js if you are having problems since it supports more fields. http://kitmenke.com/blog/2010/11/10/autopopulate-a-sharepoint-form-from-url-with-sputility-js/
Thanks,
Kit