Setting Default Value in List's NewForm.aspx Using Javascript

I introduced how to get column data on each list items row in a Xslt List View WebPart in the previous blog post.

Today, I'd like to introduce how to create "links" by using column data and enable to copy the column data to textboxes. When the link is clicked and opened, another list's NewForm.aspx page will appear.


The scenario is like this :

• If you click the link on each list items

• "Title" value and "Categories" value of each list items are copied in another list's NewForm.aspx textboxes.   

In inside I created "Notice the Announce" link with URL's parameters which has "Title" value and "Categories" value.

http://sp2010/Lists/Notice/NewForm.aspx?title=Let's go to drink with us !!&category=invitation

And I copied URL's parameters to textboxes on NewForm.aspx using Javascript.



So, I'll show you steps ! Please check its !

• Open AllItems.aspx and enable "Advanced Mode" and display xslt view. (see previous post.) 
• Drag & Drop the ASP.NET HyperLink in a column.

• You can check if the code is added in code view and design view.

• Create a link in asp:HyperLink tag using NavigateURL property and change link name from "HyperLink" to "Notice the Announce".  (also see previous post.)

 http://sp2010/Lists/Notice/NewForm.aspx?title=&category=
Notice the Announce

• Open another list's NewForm.aspx of the link target and enable "Advanced Mode".
• Add Javascript code under the asp:content tag.

////////

The Javascript code details :
First, I added column data from URL's parameters to Array class instance.
Second, I made "copyColumnData" function and added column data from Array class instance to textboxes. "aspnetForm" means the name property in Form tag in html. "ctl00_m_g_f3ae55fa_9a6e_4277_b7b3_e011e50d2977_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" means the id property in its textbox's input tag in html. You can check it in NewForm.aspx html source.

Third, I added "copyColumnData" function as a listener in window.attachEvent method. "onload" means  window.attachEvent method is called after page load is finished.

• Steps are done ! Save aspx pages and check the motion !

I see bellow blog post by reference. It's very understandable.
Passing default values to a SharePoint list's NewForm.aspx page.

I usually go to cafe on a weekend. I can concentrate a few hours.

Using the SharePoint 2010 Modal Dialog in Custom Aspx Page

SharePoint 2010 provides a new dialog framework using Client OM (javascript).
You can see the following dialog when you click an item from the list.

Modal dialog is provided by SP.UI.ModalDialog class.
Today, I'd like to introduce how to create a link to show modal dialog in a custom aspx page.
The steps are here.

• Create Empty SharePoint Project.

• Add new Application page in the new project.

• Open new Application page, and add HyperLink tag in "PlaceHolderMain".

    HyperLink

• Open code view of new Application page, and Write the code bellow.

This code indicates : 

1. Get workflow task item's URL.
2. Register modal dialog's script by using ScriptManager class.
3. Bind javascript method for task url link.

StringBuilder taskUrl = new StringBuilder();

        protected void Page_Load(object sender, EventArgs e)
        {
            SPWeb web = SPContext.Current.Web;
            SPList list = web.Lists["Announcements"];

            foreach (SPListItem item in list.Items)
            {
                if (item.Workflows != null)
                {
                    foreach (SPWorkflow workflow in item.Workflows)
                    {
                        if (workflow.Tasks != null)
                        {
                            foreach (SPListItem task in workflow.Tasks)
                            {
                                //create task item url.
                                taskUrl.Append("http://sharepoint/_layouts/WrkTaskIP.aspx?List=");
                                taskUrl.Append(workflow.TaskListId);
                                taskUrl.Append("&ID=" + task.ID + "&IsDlg=1&Web=");
                                taskUrl.Append(web.ID);
                            }
                        }
                    }
                }
            }
            
            //make modal dialog script.
            string script =
                @"
    var modalDialog;
    function ShowDialogTest() {
        var options = {
            url: '" + taskUrl.ToString() + @"',
            tite: 'Workflow Task',
            allowMaximize: false,
            showClose: false,
            width: 800,
            height: 600 };
        modalDialog = SP.UI.ModalDialog.showModalDialog(options);
    }";
            //register the script.
            ScriptManager.RegisterStartupScript(this, this.GetType(), ClientID, script, true);
            //bind the script for hyperlink.
            HyperLink1.NavigateUrl = "javascript:ShowDialogTest()";
        }

The code is very simple. If there are more than two task items, the code doesn't work.

• Deploy and access the new application page.

If you create Application page in SharePoint Empty Project, the aspx page is deployed in "_layouts" and master page tag is attached automatically. This is very nice function !! 

Sample url is here. "ShowModalDialog" is the project name.

http://sharepoint/_layouts/ShowModalDialog/ApplicationPage1.aspx

• Click "HyperLink" link. Modal Dialog is displayed !!

Tips :

I also created an application page in ASP.NET Web Application project. But the code didn't work even after I added the script reference. 

I got "'Type' is undefined (sp.js)" error when I clicked hyperlink to display modal dialog. I can't understand why the error appears.
I'm trying to find out why it happens.

I found tremendously beautiful movie in Vimeo !!
The movie was recorded on a mountain in Spain.