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

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, 2012Just 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.

About these ads

, , , , ,

  1. #1 by Andy Barker on August 13, 2012 - 11:31 am

    Paul,
    Your solution here looks very promising and I am very keen to experiment with the upload plugin. However, I am not able to get the demo or js file working. No matter what I try, I am getting an error: SCRIPT5007: Unable to set value of the property ‘pickSPUser’: object is null or undefined. Any suggestions or additional examples of your solution would be greatly appreciated.

    Regards,

    Andy Barker

    • #2 by paultavares on August 13, 2012 - 12:18 pm

      Andy,
      Sounds like the JavaScript widget file is not loaded. I would check that 1) the .js files are being loaded, and 2) that you are calling the pick user widget after the file is loaded (best way is to use the jquery .ready event: $(document).ready(function(){….code here…}) )

      Let me know if you continue to have trouble.

      Paul.

    • #3 by paultavares on August 30, 2012 - 2:46 pm

      Andy,
      I just found out myself (in downloading the zip file and trying to use this plugin in a new project) that in fact there was a bug in the plugin that generates the error you reported. I have now fixed that and made available a new zip file (link was updated in the post).
      Sorry for the trouble.
      Paul.

  2. #4 by Rob on September 28, 2012 - 11:19 am

    Hi there Paul, just what I’ve been looking for and indeed attempting to do myself.

    Just struggling to get it working; I’m getting “‘jQuery.pt’ is null or not an object” with reference to the widgets js file and all I’m currently attempting is the bare minimum of supplying a list name. All the prerequisites are in place.

    • #5 by paultavares on September 28, 2012 - 8:21 pm

      Rob,
      Are you getting this error from the latest file I have available on this page (file name: SPWidgets.20120830.1432.zip)?
      Paul.

    • #6 by paultavares on September 28, 2012 - 11:27 pm

      Rob,
      Looks like I found the potential problem. I can’t believe I did not do the obvious thing the first time around. I just updated the download link with a new version (file name: SPWidgets.20120928.2315.zip). I’m hopping you get past the problem you reported and are able to experience the usefulness behind these widgets.
      Let me know if you find any other trouble.
      Paul

  3. #7 by randy on October 4, 2012 - 4:37 pm

    Hi Paul. Quick question, do I need to download the complete jQueryUI package or can I just download the ui core components? What’s the minimum I need to make the the people picker to work? Thank you very much :D

    • #8 by paultavares on October 4, 2012 - 6:12 pm

      Randy,
      The people picker widget uses autocomplete, so at a minimum you need core plus that plugin. Although I have never tried, it should work. Let me know if you encounter an issue.
      Paul.

  4. #9 by Melvin on January 2, 2013 - 2:01 pm

    Paul, have you figured out a hosting solution for this library?

  5. #11 by Aaron on April 12, 2013 - 5:01 pm

    Hello Paul,
    This is a great little plugin, but I have a few questions you may know.

    1. Is there anyway to grab the newly uploaded files ID?
    2. Is there a way to change the name of the file pre-upload?

    Right now I am pretty sure I could do an spservices call after the upload to get the id by doing something like “find file ID where name is like”, but it would be great if the upload page gave a response with the new file ID in it.
    Similarly I could rename the file after the fact, but I am trying to figure out how to manage files with the same name. If I can force a file name or file ‘title’ beforehand that would make life easier.

    Please let me know if there is an easy solution to my issues above.

    Thanks again,
    Aaron

    • #12 by Paul Tavares on April 12, 2013 - 6:33 pm

      Aaron,
      Glad you have found good use for this plugin…

      Re: 1) Is there anyway to grab the newly uploaded files ID?
      Not at the moment, but it is something that I have thought about it in the past. I’ll put it on my TODO list (maybe I’ll open a item on GitHub under this project) and will consider it next time I touch the plugin. I guess in my usage of the upload plugin, my Library required Check-In, so after initial upload, it was redirected to the EditForm.aspx page and I used to get the ID from there…
      If implemented, I will probably use Marc’s approach in the SPRedirectWithID utility – prior to upload, retrieve the ID of the last item the user created… after upload, retrieve the ID of the newly created item and ensure it is not the same as the last one.

      Re: 2) Is there a way to change the name of the file pre-upload?
      I don’t think so… Prior to the file being submitted to the server, I don’t have much control over what the file is… the browser, through the input file field, manages how the file is uploaded. If you have Check IN turned on on the library, then you do have the opportunity to rename it… If you define a function for the onPageChange input parameter, then that function is called along the way during the upload process. The event object that it is given as input contains information about where the state of the upload is. I use this today in production application to do just what you are looking to do – uniquely (and with a certain naming convention) rename the file the user uploaded.

      Hope this helps…

      Paul.

  6. #13 by Sharuk on July 9, 2013 - 7:31 am

    i want to get the url of an uploaded document to a particular SharePoint document library by using jquery. How would i do it ??? Just give me a clue

    • #14 by Paul Tavares on July 9, 2013 - 8:48 pm

      Sharuk,
      You can get the file’s URL by doing a GetListItems query and specifying ‘EncodedAbsUrl’ as one of the columns (fields) to be returned in the response for each row found.
      EncodedAbsUrl is a builtin column that SharePoint provides that contains the absolute URL to the file.

  7. #15 by akhileshgandhi on September 20, 2013 - 7:35 pm

    Hi Mark,
    This plugin looks very promising but I am stugelling to make it work for FileUpload
    it gives error in javascript
    SCRIPT438: Object doesn’t support property or method ‘on’
    jquery.SPWidgets.js, line 6234 character 13

    What I am trying is this
    var currentSiteUrl = “http://lr3twvshp001/nsr/liscc”;
    $(“#file_upload”).SPControlUpload({
    listName: ‘{1254DFF1-CD8F-44C2-9685-DC3FB2C9D282}’,
    folderPath: ”,
    uploadDonePage: ‘/undefined’,
    onPageChange: null,
    onUploadDone: null,
    uploadUrlOpt: ”,
    overwrite: false,
    uploadPage: ”,
    overlayClass: ”,
    overlayBgColor: ‘white’,
    overlayMessage: ‘Working on it’,
    selectFileMessage: “Click here to select file…”,
    uploadDoneMessage: “Upload Successful!”,
    fileNameErrorMessage: “A file name cannot contain any of the following characters: \ / : * ? \” < > | # { } % ~ &”,
    noFileErrorMessage: “No file selected!”,
    checkInFormHeight: ’25em’,
    webURL: currentSiteUrl
    });

  8. #16 by akhileshgandhi on September 20, 2013 - 7:38 pm

    If you can just tell me how are you getting Document Name after upload that would be very very helpful and life saver

    • #17 by Paul Tavares on September 21, 2013 - 9:36 am

      Hi Akhileshgandhi…
      I think the error you are getting is due to the version of jQuery… the widgets need at least v1.7 (that’s when .on() was introduced)… I really need to update the docs. to reflect this…

      Re: Getting the document name
      The newest version of the upload widget provides you that to the callback when the upload is done…

      If you are still having issues, post it to the github page, here: https://github.com/purtuga/SPWidgets/issues?state=open
      GitHub allows me to better manage the issues users of this library encounter…

  9. #18 by Gurpiar Singh on September 26, 2013 - 1:44 pm

    HiHi Paul
    I am struggling to get it working in my SP2010 Sandbox. I am able to see all other plugins working except the Upload one. It gives me list of libraries to chose from, and then “working…” message shows up, and then Upload button and yellow area next to it shows up. Below there I do see list of files already at the root of the selected library. Now, what I don’t see is how do I select a file to get uploaded? there’s no UI that allows a file to be selected. If I press Upload, it says no files are selected, that’s understandable ofcourse as I haven’t selected any files yet.

    Is it possible if you can do a quick reply as I am getting quite frustrated and want to find out whats going wrong here.

    Below are the version of software currently being used for this demo showcase.
    SPWidgets: 20130921024035
    jQuery: 1.10.2
    jQueryUI: 1.10.2
    jQueryUICss: loaded
    SPServices: 0.7.2
    Build: 20130921024035

  10. #20 by Yuri on October 30, 2013 - 4:51 pm

    Hi, I’m trying to use the SPControlUpload on my MOSS 2007 site, but am not able to get the EncodedAbsUrl of the file object during the onUploadDone() call.

    using:
    jquery.SPServices-2013.01.min.js
    jquery-1.10.2.min.js
    jquery-ui-1.10.3.custom.min.js

    Even when I use Demo.SPWidgets.aspx on my site, I am only getting ‘undefined’ back once the file has been successfully uploaded. I would need the file Url info in order to associate the newly uploaded file to my list item. Is there anything I am missing?
    Please assist?

    • #21 by Paul Tavares on October 30, 2013 - 5:15 pm

      Yuri,
      Sorry you are having problem…
      I just tried in MOSS 2007 using the latest and I’m also getting an error and am not able to get the file when upload is done… Can you open an item up on GitHub (here)? Its best that we work from there. I’ll try to see what is going on and fix it.

      Paul.

  1. SharePoint RSS Reader « .:paul.tavares:.
  2. My First GitHub Project – SPWidgets « .:paul.tavares:.
  3. Adding a people picker to client side code, on your custom application (aspx / html) page | Tech, Blogged

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: