How can JavaScript’ers create custom EditForm without understanding CAML and .NET !

English:
(This articles has already been posted in
www.msd2d.com. Now I post it again in my own blog.)

SharePoint 2003 has come with very easy user interface and many automated (template) form. You can leave traditional way of creating new table and corresponding form entry to SharePoint. Table, folder or files in traditional web application, are replaced by ‘cross-handling’ list in SharePoint as well as the corresponding template forms. For example creating new CustomEdit List will virtually add several template forms (AllItems.aspx, DipForm.aspx, EditForm.aspx, and NewForm.aspx) (Figure – 1)

image001

Figure – 1. New empty list with corresponding template form

Those forms are automatic, virtual and customized for any fields in our list. SharePoint has made our life ‘easier’ but it also mean lessen our control for any business process we might have.

image003

Figure – 2. Default EditForm.aspx

A very typical question is “How can we customize EditForm.aspx ?” (Figure -2). Following tips is JavaScript’ers tactical which will show basic idea for easy customization of template forms.

What does SDK say?
The SDK explains how to create new custom list definition. Of course, for anyone who understands the CAML (which construct SCHEMA.XML and ONET.XML) it won’t be a problem, but what about for those who doesn’t understand or new to CAML? The problem for the CAML is ” it is lack of information” and “still few samples”.

So what is the solution? Should we learn and understand CAML to customize the EditForm.aspx? No. My answer for that question is: Use JavaScript !

Why? Because SharePoint2003 is actually armored with JavaScript. And it is generally known by many web developers (at least the <SCRIPT language=”JavaScript”> tag is very common to see) .

How can JavaScript help us?
Remember that every JavaScript enabled browser will handle all HTML document in its document model. By doing some tricky method to this document, we can do almost everything as it is done by SharePoint !
Then how can we do it? Remember this 3 simple guidance:
1. Find the field you want modify and enclosed with the <DIV>. Don’t forget to give custom ID for the new DIV.
2. Grab any information you want to parse from the <DIV>.
3. Create new custom display for that field by modifying the .innerHTML property of the <DIV>.

Ok. I hope you remember those three things above for your weapons. Now let us try to modify EditForm.aspx for our CustomEdit list. We are going to make ReadOnly field become read-only.

Scenario:
Create a new “CustomEdit” list and modify the EditForm.aspx to make the “ReadOnly Name” read-only.
1. Create custom list and name it “CustomEdit.”
2. Add 2 fields, “ReadOnly Field” and “Editable Field.” Default EditForm.aspx should be like figure-2.
3. Open EditForm.aspx for “CustomEdit” list using FrontPage 2003
4. In the design pane, right click the form and choose “Customize Sharepoint List Form” (figure-3)

image005

Figure – 3. EditForm.aspx in FrontPage. Click Customize Sharepoint List Form !

5. Enclose the “ReadOnly Field” edittext box with DIV

<DIV id="ReadOnly1">
[Original text box entries]
</DIV >

image007

Figure – 4. EditForm.aspx in FrontPage code view

6. On top of enclosing body </BODY> the create new <SCRIPT language=”Javascript”> processing tags, add scripts to modify the field. (Enclosed scripts is for this div)

<script language="javascript">
var myObj = document.getElementById("ReadOnly1");
s = myObj.innerHTML.indexOf("<INPUT");
e = myObj.innerHTML.indexOf(">",s+1);
var InputTag = myObj.innerHTML.substr(s,e-s+1);
s = InputTag .indexOf("value=");
e = InputTag.indexOf("\"",s+7);
var InputValue = InputTag.substr(s+7,e-s-7);

newDivContent = InputValue ;
newDivContent += "<Div style=\"display:none\">" + InputTag
newDivContent += "</DIV>";
myObj.innerHTML = newDivContent;
</script>


7. Save and try to open EditForm.aspx from default links. (Figure – 5);

image009

Figure – 5. Custom EditForm.aspx in browser

Now you have made a nice custom EditForm without making a new custom List. Of course this method is valid for any form in SharePoint. The techniques above can be easily applied into any implementation.

About

Riwut Libinuko, experienced Architect. Currently working with Credit Agricole CIB, responsible for SharePoint platform in Asia Pasific. . Certification: SharePoint 2013, SharePoint 2010, SharePoint 2007, ITiL v3

Posted in Microsoft Sharepoint
24 comments on “How can JavaScript’ers create custom EditForm without understanding CAML and .NET !
  1. oscar says:

    could not make it work in wss

  2. cakriwut says:

    Since it doesn’t use specialities of SPS, then it should work in wss too.

  3. Narendar Kumar says:

    Couldn’t be the right solution to make a cell(row) read only

  4. cakriwut says:

    To. Narendar Kumar:
    Can you elaborate more? ie. “to make a cell(row) read only”.
    What do you wish to do?

    The article only showing how to modify editform and newform aspx – so we can protect uneditable field. If you need to create readonly cell, then other technique applies. So, please elaborate your comment.

  5. At first when I copied the Javascript from this site it didn’t work either in my environment. But then I noticed the code was a different color and not valid.

    If you copy the code from the example above you will get the right double quotation marks and the left double quotation marks along with it.

    When I replaced them with regular quotation marks it all worked just fine.

    http://www.w3schools.com/tags/ref_entities.asp

  6. Cakriwut says:

    Thanks, Dennis, it seems like my desktop-blogger change the quotation marks. I’ll fix it.

  7. anisha says:

    How can i do this using sharepoint designer 2007

  8. Cakriwut says:

    Sharepoint Designer 2007 is the next version of frontpage 2003. Doing above tasks to edit WSS 2.0 – using SD2007 or FP2003 are basically same.

  9. Marc says:

    Very cumbersome!

    The code I came up with was two lines and didn’t require amending the existing page. Simply find the existing fieldpost, call .insertAdjacentHTML then (second line) hide the original post.

    You should also handle any changes to the original field, incase other JS code on the page wants to change that field for some reason.

  10. Cakriwut says:

    Marc.
    I am not arguing your comment – as it was my 2 days expossion to Sharepoint. The idea is, we can always combat the challenge using any ways.

    Better approach has been implemented in, https://cakriwut.wordpress.com/2006/08/19/autofilled-sharepoints-form/

    There you can see, that I already used what you might mean by two lines code.

  11. Adrian says:

    I have been trying your example many times but couldn’t make it work. I always get errors such as “One of the properties of the Web Part has an incorrect format. Windows SharePoint Services cannot deserialize the Web Part. Check the format of the properties and try again.” I am not sure where to put the and tags. Could you expand Figure 4?

  12. Soujanya says:

    Hi,
    Can I follow the method for SharePoint Server 2007 Beta edition to make a field in my list Readonly, or is there any other method like adding some JavaScript in my .CS file I mean in my front page.
    My task is almost same, here I explain the task, I have an SPListItem named “EmpName”, where this field will be automatically populated by the logged-in user name, when the user try to add a new Item to the List, now I need to make this EmpName field disabled from editing, as this field is automatically getting populated by the logged-in user name.
    Can I get any help how I can achieve this.
    Greatful if any one can help in this.
    awaiting for the help and solution.

  13. Cakriwut says:

    Soujanya:
    For any list item, there is mandatory field “Created By” and “Modified By”. For your case, I suggest to use “Created By” field. If you want to put it into other “EmpName” field, then; make a calculated field “EmpName” which copies text from “Created By”.

  14. Soujanya says:

    Thank you cakriwut,
    I am sorry I did not understand, why I need to deal with the “Created By” or “Modified By”, when I want to make one of my SPField ReadOnly, I got one of the solutions to be dealing with the EditFrom.aspx as you explained about, but is there any other way of achieving it.
    Can I do it by customizing the existing files like onet.xml or schema.xml or any other. And adding them to the Site Definition or List definition.
    Hope you got what I am trying to explain and I will be very glad if I can any help furthur. And please also let me know if I can achieve it using some Javascript.
    Thanks
    Soujanya

  15. Soujanya says:

    Cakriwut please make a note that I am working in SharePoint 2007 beta version.

  16. Guy says:

    There is cake way to make SharePoint fields read only. There’s already a tag that does it for you. Look at the tag above Modified Date and Created by Date. This tag already changes edit fields to read only. You simply move the tag up the list as far as you want.

  17. Adrian says:

    Thanks Guy thats just the trick and so easy, i placed a copys of the tag above and below the fileds i wanted readonly

    and

  18. Yuri says:

    Nice trick! Very useful!!!

    comment: for some reason, the “value=”blablalba”” attribute in the input field does not have quotes on my portal. So i modified the value-searching part of the script to:
    s = InputTag.indexOf(“value=”);
    e = InputTag.indexOf(“name=”,s+6)-1;
    var InputValue = InputTag.substr(s+6,e-s-6);

    now it works correctly.

  19. Arun says:

    Hi Soujanya:

    How did u get the reference to the logged in user name in ur spsfield item is it through =Me

    if then that gives u only the something like Domain\username

    how do u get the firstname and lastname of the logged in user

  20. Ferdi says:

    Hi,

    I cannot see my custom form in Sharepoint Designer 2007? – I just see a form with three fields “Column Name 1; Column Name 2 and Column Name 3”

    How do I view my custom form and its code?

  21. congr says:

    how to make field readonly in when Edit in Datasheet any idea?

  22. Hi,

    Since the function in FrontPage 2003 “Customize SharePoint List Form” not is valiable in SharePoint Designer 2007 (not that I’ve notice anyway) I need to know how to make a field read-only?!

    My list in SharePoint is a customized list with errends, and when att choose to create a new errend my field “Errendtype” needs to be read-only and with a defualt value.

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: