Creating a To-do List with ECMAscript

February 24, 2011

In one of my previous post I created a task manager with ECMAscript. In this post I will go a step further and create a to-do list. This to-do list that enables you to add new items, delete items and mark them as completed.

To-do list final result

To-do list final result


Things you need

The only thing that you need for creating this to-do list is a standard SharePoint task list. So you can uses an existing one or create a new one.

The code can be added on a new page or inside of a "Content Editor" web part. The choice is yours.

HTML & CSS Markup

First of all we need some markup to work with.



Opening a modal dialog with custom HTML code

Opening a modal dialog in SharePoint is very easy. You can specify if you want to let it open a remote page or a specific HTML element.

I have already placed an anchor tag in the HTML markup that when clicked, calls the "openDialog" function. The "openDialog()" function would look like this:

I have chosen to create my own HTML object in this example, but you can also open the "New Form" page (~site/lists/<Task List>/NewForm.aspx) from the task list by specifying the "url" option.

The result of this function is:

Modal dialog with custom HTML

Modal dialog with custom HTML

Creating a to-do item from the modal dialog

In the previous section you have created a function that opens a modal dialog with a custom HTML form. Currently the nothing will happen when the "Submit" button is clicked, so we need to implement some functionality to it.

When the submit button gets clicked, the unimplemented "AddToDoItem" function is called. The function looks like this:

Items that are added to the task list will get the "In Progress" status. You can change this by whatever status you want it to be.

When the item is successfully added, the "onQuerySucceeded" function is called. This function will close the modal dialog and set the returned value to "To-do Item Created".

When the items insertion failed, the "onQueryFailed" function will be called. This will also close the modal dialog and returns the error message.

To handle the result messages we can uses the modal dialog "dialogReturnValueCallback" option. The code looks like this:

When the item is added, it will close the modal dialog and that will create a callback to the "DialogCallBack" function. The "returnedMessage" variable can be used to display a message in the notification box from SharePoint.

Notification message

Notification message

Fill the HTML lists

Currently you are only able to add new items to the to-do list, but still there aren't any items displayed in the HTML lists. We need to create a new function that will be utilized when the page is loaded.

First a call to the "ExecuteOrDelayUntilScriptLoaded" function needs to be created.

The JavaScript function "Initialize" inside the "ExecuteOrDelayUntilScriptLoaded" function is delayed until the SharePoint "sp.js" file is loaded.

The "Initialize" function looks like this:

Inside this function two query calls are created to the task list. One call to retrieve all the "In Progress" items and the other to retrieve the last five completed to-do items.

The "onListItemsLoadSuccess" will add the returned list items to the correct HTML lists. The looks like this:

The "onListItemsLoadFailed" function will show a message in the SharePoint notification box.

The result looks like this:

Result until now

Result until now

Mark the items as completed

The next function that needs to be created is the "MarkAsComplete" function. This function retrieves the item and updates its status to "Completed".

When the update succeeded the "onUpdateSucceeded" function is called. It will add a notification message and recall the "Initialize" function to update the HTML lists.

The "onUpdateFailed" function shows a notification message.

Delete an item from the list

The last function that needs to be created is the "DeleteItem" function. The delete item function retrieves the current item and deletes it from the task list. The delegate functions that are being used are the same as from the "MarkAsComplete" function.

Final result

Check the screencast to see the final result in action.