Sharepoint UI Widgets – Upload and PickUsers

Approximately two years ago, as part of my yearly “continued self improvement” review with my Director, I choose to learn more about SharePoint and customizing it to meet specific business needs. In my case, I developed (sorry: designed (I know how those .net folks can get offended 🙂 ) a Content Management System for storing “baselined” Application Guides and internal support documents (like Requirements, Design documents, etc).  A future set of Blog posts will capture my experiences there and the many challenges I faced for which I eventually found “client” side solutions for.

For this post, I will focus on a jQuery Plugin that I created (Download link below) that I call SPWidgets.  This plugin includes re-usable methods that make building custom User Interfaces easier. It includes:

• An Upload Plugin
• A User selection plugin

I have other separate utilities that I have not yet had time to roll into this plugin, so stay tuned.

The Pre-Requisites

• jQuery (http://jquery.com/) – v1.7 or higher
• jQuery UI (http://jqueryui.com/)
• SPServices (http://spservices.codeplex.com/)

The plugins

Upload Plugin

The upload plugin allows a user to upload a file via “ajax” without leaving the page that they are currently on. This plugin has only one required input parameter – the Document library to where the document should be uploaded. Other optional parameters are available to fine tune its usage. Here is a snippet of code that is provided in the zip file as part of the demo webpart:

$("#uploadDivContainer").SPControlUpload({
    listName:       "Shared Documents",
    onPageChange:   function(ev){

        // If we're done with the upload, then continue to show the
        // overlay, and fade out the area that contained the upload control.
        if (ev.state == 3 && ev.isUploadDone) {
            ev.hideOverlay = false;
            $('<div style="padding: 1em; width: 80%; margin: 3em auto;" class="ui-state-highlight">Upload Successful!!!</div>')
                .appendTo(uiUploadWidget.empty())
                .fadeOut(4000, function(){
                    $(this).remove();
                });

            // Reload files into viewing area.
            refreshFileList();

        // If file was uploaded, but we have required fields to fill out,
        // then adjust page to only show that...
        } else if (ev.state == 3) {

            ev.page.find("form")
                .children(":visible")
                    .css("display", "none")
                    .addClass("ptWasVisible")
                    .end()
                .find("input[title='Name']")
                    .closest("div[id^='WebPart']")
                        .appendTo(ev.page.find("form"));
        }

    }//end: onPageChange()
});

The plugin is built around the default SharePoint upload page and uses it in the background to actually upload the file. It is also able to accommodate Document Libraries where a ‘Check In’ is needed, by displaying the default Edit page. In the included demo I demonstrate how that page can be manipulated to show the user only a minimalist page (hides the page’s “chrome” and only shows the edit form).

Pick User Plugin

Given an input field, this method will display an interface that allows the users to select one or more users from SharePoint and store the selected user information into the input field in the format expected when making an update via webservices. The input field will be hidden in its current position and a UI will be displayed instead. As the user picks or removes users, the input field will be updated at the same time, thus it will always be ready to be submitted as part of an update to the server.

$("input[name='currentAuthor']").pickSPUser();

This plugins uses the jQuery UI Autocomplete widget to display the auto-suggested values to the user and the SPServices library to retrieve data from SharePoint.

Download

The zip file contains the plugin as well as a .webpart demo, which can be imported into an existing SharePoint site for interaction. The demo folder also contains a separate demo HTML file which can be uploaded to an existing site and a new CEWP created to point to it, case the ability to import webparts is not available.

I’m currently trying to find an appropriate home for these two plugins… I may end up hosting them my self (maybe on GIT, Sourceforge or codeplex…not sure). The main reason for trying finding a new home for them opposed to hosting a project myself is because I don’t do SharePoint work on a regular basis and thus don’t really have a demo/testing site available (I’m currently using Office365 (trial)). I would hate to start a project just to see it go stale 😦

The link below will download the zip file that contains:

• The plugin (/src folder)
• Demo Webpart (/demo)
• Source Documentation (/doc/src)

DOWNLOAD

Hope you all find this useful… Post back…

August 30, 2012 – Just found that the link above was actually pointing to an old version with bugs that caused the problems reported in the comments below.  That has now been fixed with an updated download file. Sorry about the trouble.

September 28, 2012 – Second bug found which still caused jQuery.pt to possibly (depending on browser) be reported as null or not an object.  The download link above has been updated to point to new version. I think it may be time to find a place for this project on hosting site (github? codeplex?)

October 5, 2012 – I have moved this project to github. It can now be found at: https://github.com/purtuga/SPWidgets . I have also updated the upload link above to point to v1.0 zip file hosted on github.