(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)
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.
Figure – 2. Default EditForm.aspx
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”.
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.
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)
Figure – 3. EditForm.aspx in FrontPage. Click Customize Sharepoint List Form !
5. Enclose the “ReadOnly Field” edittext box with DIV
[Original text box entries]
Figure – 4. EditForm.aspx in FrontPage code view
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;
7. Save and try to open EditForm.aspx from default links. (Figure – 5);
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.