Wednesday, May 26, 2010

Another SharePoint drag'n'drop framework sneak peek: Assigning task items

In this demo I'm pulling another one of my frameworks into the mix: SPDropBox. It makes for a general purpose hovering container, which can e.g. (as in the following demo) active site show users.

Combined with SPDrag, I can easily assign task list items to a user, simply by dragging it onto the user's entry in the SPDropBox view.

Check the demo:

Click the video above to watch it embedded (best in full screen), or Watch in new window

The code for this demo is nothing fancy, just a quick type-up to demonstrate how the current state of the SPDrag and SPDropBox libraries can be used.

In essence, I create a div container which lists users. Users are fetched from some server side code - in a prod solution, this should be lazy loaded and searchable. This user container is added to the dropbox, along with an icon.

In the latter part of the sample source, I use SPDrag to hook what I within SPDrag have defined as SPTask items, to the user entries of the user list. The drop handler gets a reference to the dropped task item, as well as the container it's dropped onto. List and item information are extracted, along with the id of the user from the drop targe. All of this then updates the list using the SharePoint 2010 client object model, and finally (asynchronously) refreshes the list.

var userContainer = $(document.createElement("div"));
var users = [<%= users %>];
for (var i = 0; i < users.length; ++i)
var user = users[i];
var userBox = $(document.createElement("div"));
.attr("grep:user", user.Id)
.html("<center><img width='50px' src='/_layouts/images/PERSON.GIF'/><br/>" + user.Name + "</center>");

grep.dropbox.addContainer("/_layouts/images/pplpkrgrp.png", "People", userContainer);

// Make SPDrag connectable
var l = grep.spdrag.lambda;
function (element, container)
var task = grep.spdrag.getData(element);
if (task)
clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();
list = web.get_lists().getById(task.ctx.listName);
listItem = list.getItemById(;
listItem.set_item('AssignedTo', container.attr("grep:user"));
function () {
_SubmitFormPost(_CorrectUrlForRefreshPageSubmitForm(), false, true); },
function (e, x) { /* Error condition */ });

Related post: SPDrag: A soon released javascript framework to make the SP2010 UI drag'n'droppable

No comments: