Whats New in v2.3 of SPWidgets – SharePoint Client Side Widgets

Tags

, , ,

Its been a long time since I tagged a new version of SPWidgets. Too Long. I really should not wait so long between versions, specially when I was making changes all along.  Most of the changes done were in response to issues opened on github as well as in support of a side project I have going called MyBoard. More on that project is forthcoming on a separate post.

This version does not introduce any new widgets, but rather builds upon those that currently make up the library.  If you are a current user of SPWidgets, I don’t foresee any issues with upgrading.  Version 2.3 can be downloaded here: https://github.com/purtuga/SPWidgets/archive/v2.3.zip

The library, both the regular and minified version, is located in the plugin directory.

Are you currently using SPWidgets? If so, drop a comment below to let me know which widget(s).

Enjoy!

Change Log

People Picker Widget:

  1. Support for defining a token that represent current user (ex. [ME]), which translates to caml value <UserID/>
  2. Introduce input option that allows user to control the container where the autocomplete results will be displayed.
  3. Allow user to override jQuery UI’s Autocomplete widget minLength option. See issue #20
  4. BUG: Picker does not handle un-resolved users. See issue #21
  5. Allow input options to be set globally for this widget
  6. BUG: getSeleted does not work. Switch statement does not have ‘getselected’ in lowercase, thus it never matches. See issue #15
  7. BUG: When input element already has a value set, init of widget fails. See issue #14
  8. Support for other types of accounts like groups. Possible values are: [None | User | DistributionList | SecurityGroup | SharePointGroup | All]
  9. BUG: When used on a element that has z-index set suggestions show behind the input element.

Filter Panel Widget

  1. Display columns of Type ‘Attachments’, as a YES/NO dropdown. Column is of type of Boolean.
  2. Remove the focus on the first element when a reset is done.
  3. Does not support a column of Type Choice with Multiple values. Internal type is ‘MultiChoice’
  4. BUG: Created and Modified columns do not display the time picker – only date.

Board Widget

  1. New method to return a list of available columns for the board. Such method will be useful when wanting to create custom UI’s for showing/hiding board Columns.
  2. BUG: if an item is changed by someone else so that it no longers appears in the board being displayed, the Board State column total number of items is not updated to reflect the number of item under it.
  3. Enhancement to include a new input option that will display the board with fixed height colummns. Similar to how Trello works today: All column bodies are fixed height and user is able to scroll through each column’s content independently.
  4. Make each Column Title be “attached” to the column content. In other words, remove the spacing between them. (Feedback provided by Stefan)
  5. Enhance the Headers so that the title of the Column is Left justified and the Number of items is Right justified. (Feedback provided by Stefan)
  6. Change code so that the Column picker button is NOT automatically displayed when calls include visible columns. Options should be driven by developer.
  7. SPShowBoard(“setVisible”) should support a keyword of ‘all’, allowing the developer to automatically make all columns visible. This could also be an empty array ([]).
  8. Consider removing the ui-widget-content class from the container that holds the board columns. Some styles of jQuery UI have a background that throws off the styles between headers and body of kanban
  9. When making all column equal height, use ‘min-height’ instead of height css attribute.
  10. Change the Column selector “all/none” button to use jquery UI icon ‘ui-icon-radio-off’ instead of the current checkbox.

Upload Widget

  1. BUG: Post upload page (if checking is needed) fails to display for SP sites in non-English locale. See issue #16
  2. BUG: Widgets does not work on SP2007. See issue #9.
  3. fillTemplate() utility seems to use a redundant regex [\{\{\}\}]. Reported by Alexey with Issue #10

Date and Time Widget

  1. Support an ‘inline’ option that allows you to display the widget on a page at all times. With inline, the use of an input field should be optional by the user.
  2. BUG: When Allow Multiples is set and field is setup to display only date (no time), removing selected dates does not work.

 

A New Professional Focus – Web GUI Developer

Tags

I’m moving on to a new role as a Web GUI Developer !

I have been a Program/Project manager on large scale provisioning software systems for close to 10 years. I ran the Software Release Management cycle and also played an integral role in process definition and productivity improvements initiatives. During that time, I would always insert myself into projects that needed some web development done (but no one to do it) because of my passion for it. That’s how I picked up SharePoint client side customization knowledge – I use it as the back-end services to the web apps I create. I enjoyed the work I did as a Program/Project manger, mainly because the position in most cases allowed me work very close to the development teams where I was given the room to address problems together – rather than to just track that a problem existed and assign it to someone else.

I have been working with HTML since version 3 (circa 1997) but have never really held a position whose sole responsibility was development. Always wanted to, but the right opportunity never came up – until about two months ago. The company I work for is now advocating the creation of front end applications using HTML5, CSS3 and JavaScript – a big shift from the Java based development that has been in use for decades. When a position opened up on a new cutting edge application (in the cloud computing space) that required these exact skills, I was quick to put my name in the running and thrilled when I was offered the position.

I started on the new project in May and I’m now working with the technologies that I enjoy and building my competency in areas that I have wanted to explore but had not had dedicated time to do it. Items like CSS3 animations and transitions, charting and graphics using the SVG standard, testing frameworks such as Mocha and Chai, and the use of Node and the Express framework.

This is a great new phase of my career and one that I will certainly enjoy. Not many get to do what they love and get paid for it, so I feel fortunate.

Creating (Eclipse) Aptana JavaScript Content Assist Files (sdocml)

Tags

, , , , ,

I have a been a long time user of Aptana (I use the Eclipse plugin; there is also a self-contained Aptana IDE which wraps eclipse), and find it to be a very good (free) IDE for web development (JavaScript, CSS, HTML). JavaScript editors today don’t seem to be as good or advanced as other languages like Java, C# or just about any strongly-typed language and thus good content assist is hard to get.  Content assist for me is a big feature specially when working with a large code bases or many libraries or frameworks. Yes, you can have a second page open with the API documentation visible, but having as you type your code is a big productivity tool.

Aptana, for the most part, seems to do (IMO) a good job at it by picking up methods and variables available in the scope/context as well as suggestion for browser globals and the JavaScript language. One the more powerful features, however, is the ability to drop in documentation files that can help with content assist if the source is not available. Kind of an extension point, so that we are not limited to only having suggestion come from source files.  A good example is jQuery which Aptana provides support out of the box. The files, written in XML using ScriptDoc 2.0 Specification, allow library writers to provide these along with their work and thus automatically enable content assist in this popular editor. Here is a sample file:

<?xml version="1.0"?>
<javascript>
    <class type="Widget">
        <description>Widget base class. Provides a foundation for other more specific widgets.</description>
        <constructors>
            <constructor scope="instance">
                <parameters></parameters>
                <return-types>
                    <return-type type="Widget"/>
                </return-types>
            </constructor>
        </constructors>
        <methods>
            <method name="init" scope="instance">
                <description>Initializes the widget.</description>
                <parameters>
                    <parameter name="options" type="Object" usage="optional"></parameter>
                </parameters>
            </method>
            <method name="onReady" scope="instance">
                <description>Callback function called when widget is ready.</description>
                <parameters></parameters>
            </method>
            <method name="extend" scope="instance">
                <description>Extends this class and returns a new class constructor</description>
                <parameters></parameters>
                <return-types>
                    <return-type type="Widget"/>
                </return-types>
            </method>
        </methods>
    </class>
</javascript>

For a long time I have been generating these SDOCML files and they work just fine for global and static members, but I was not able to trigger content assist for class instances. With the increasingly popular use of classes and modules using the AMD patterns in JavaScript projects, having this work as expected in these cases would be a huge plus.
The need to make these work became even more important to me professionally in the last month or so as a took on a new role as a GUI Web Developer and started working with a large internal framework.  If I am going to make a different quickly in this project, I needed my tools (editor) to cooperate.

So what is the problem? Here is a code sample

var wdg;

/** @type {Widget} */
wdg = new Widget();

Typing wdg. should suggest the three methods you see above in the SDOCML file (init, onReady and extend).  Instead I get the following:

aptana-no-content-assist

In the last few days I got a break through after interacting with a developer named Jocki on github (thread here). He has a patched version of Aptana that adds a few improvements to jQuery’s content assist. In that discussion, he was kind enough to suggested that I add the <type-maps> declaration to my file and map the Class Names to the internal way Aptana handles the looks ups (which they are looking to fix, according to this – I think).

With that tip, I changed my SDOCML file to this:


<?xml version="1.0"?>
<javascript>
    <class type="Widget">
        <description>Widget base class. Provides a foundation for other more specific widgets.</description>
        <constructors>
            <constructor scope="instance">
                <parameters></parameters>
                <return-types>
                    <return-type type="Widget"/>
                </return-types>
            </constructor>
        </constructors>
        <methods>
            <method name="init" scope="instance">
                <description>Initializes the widget.</description>
                <parameters>
                    <parameter name="options" type="Object" usage="optional"></parameter>
                </parameters>
            </method>
            <method name="onReady" scope="instance">
                <description>Callback function called when widget is ready.</description>
                <parameters></parameters>
            </method>
            <method name="extend" scope="instance">
                <description>Extends this class and returns a new class constructor</description>
                <parameters></parameters>
                <return-types>
                    <return-type type="Widget"/>
                </return-types>
            </method>
        </methods>
    </class>
    <type-maps>
          <type-map source-type="Widget" destination-type="Function&lt;Widget&gt;"/>
    </type-maps>
</javascript>

And voila! Content assist in the editor.

aptana-content-assist

I found that the type-maps needed to be added to the end of the file or after the class definitions. Placing it at the top of the file did not seem to work for me.

In my use of the @type declaration I have found only 1 issue: if you use it together on the same line as the ‘var’ declaration, content assist does not seem to display. Example:


var /** @type {Widget} */ wdg = new Widget();

Aside from that, which is a small tweak to how you code, the use of these help files along with @type declarations work pretty well, including placing these next to Function input parameters:


function doSomething ( /** @type {Widget} */ wdg) {

}

aptana-content-assist-function-param

 

Generating SDOCML files

These files can be created manually but for large projects, that’s just not feasible. The ideal would be to run a tool against the code and generate such file. I have always annotated my code with jsdoc tags, which makes it a fairly easy task to now just generate the content assist file by using template. And that’s what I created: a jsdoc3 template that outputs a SDOCML file from source files annotated with jsdoc tags. I’ll save this topic and the introduction/availability of that template for a subsequent post.

 

 

How To Get Information About a SharePoint List Item Using its URL

Tags

, , , , ,

I recently had the need to get information about an Document Library item based on that item’s URL. Particularly I was looking to know the item’s ID and the List Name/ID that it belong to so that could the use the GetListItems operation of the Lists web services (using SOAP interface). All I had was the URL, and thus my first inclination was to parse it and get the information. Here is a sample of what my URL looked like:

https://mysite/sites/PT/Shared Documents/TestFolder/sub1/sub2

I could remove the site’s Web URL from the it, and then work with the remainder of the URL string and the output of the GetListCollection operation of the Site Data web service to match it up to a list. The logic could get complicated with the amount of parsing that is needed with this approach and the fact that SharePoint allows you to have URL name components that are different from the List name (in my URL above, ‘Shared Documents’ actually maps to a Document Library named ‘Documents’).

There had to be a better way!

I have worked with allot of API’s, both in consumption and even in managing software releases of (proprietary) products where new API’s where being introduced, which gave me insite into the design of such beasts. I have to say, that SharePoint’s API is one of the most complete and robust that I have seen. Certainly they had already covered this use-case and should have an API for it – Right?

My first stop was over at the excellent SPServices library created by Marc Anderson (@sympmarc). Looking at the documentation, I did not find anything, but remembered that it there is at least one web service operation able to return a Site/Web root URL based on “deeper” URL. Marc uses it in his $().SPServices.SPGetCurrentSite utility. Marc does a tremendous job in wrapping as many API methods as possible, but I don’t think he claims to have full coverage – there are just too many! I have seen him add additional ones over the years that I have been following him and SPServices, specially as folks in lively SPServices forums point out what’s missing. So I kept digging.

In looking at the Microsoft documentation for the Site Data web service, there is in fact an operation in that API that will do exactly what I need – SiteData.GetURLSegments. You give it a URL string to an item, and it returns the List and the Item IDs. I used this method with an Document Library item URL and it worked perfectly (O365, SP2010 and SP2013 front-ends) and SP2007.

I found the operation to work with the following types of items:

  • a List Item
  • a Document Library item
  • and a Document Library Folder

It does not work with List Item’s attachment URLs, nor does it work with a Document Library root url (ex. /yousite/Shared Documents/). I have also found that Document Library URL’s that use the Forms do not work. It needs to be a URL directly to an item in the List.

I went ahead and posted my finding on the SPServices forum, along with the use case, and crated my own utility to use this method. The code below, which is available via this Gist) uses jQuery to make the request and return to the caller a Promise which when resolved will provide not only the XML response but also a javascript object with the parsed output.

Utility to Browse SharePoint Out-of-Box Images for use in Customizations

Tags

, ,

If you do SharePoint front-end UI/UX customizations using HTML and CSS you have probably run across this need: to re-use some of the images already available in the farm in your custom markup or styles sheets. But knowing what is available is not a strait forward process and for a while there I resorted to looking around the out-of-the-box forms see what they displayed and grab the code…

SharePoint has many images (thousands) available. These images are stored in a variety of locations, including /_layouts/images/, /_layouts/1033/images/, /_layouts/15/1033/images/ but does not have any built in way to display what is hosted in these locations.  This is probably not an issue for those that have server level access, since you can browse the physical directories, but I don’t (I do client side customizations using HTML, JavaScript and CSS and often don’t have IT involved) and thus the need for a utility.

I few years ago I had found a page at Bits Of SharePoint Consulting (by Peter Allen – @peterhallen) which did the trick, but a few weeks ago it was not available which caused me some frustration. My most recent need was to find two icons for use in a custom SharePoint Ribbon to represent Next and Previous (data paging) actions.

ribbon-buttons

I had been wanting to create my own reference list of images so that I could remove the dependency on the site referenced above. My goal was to be able to display these images on a customized ASPX page and use it to quickly grab the url path of the desired image. Creating this single ASPX page allows me to drop it into a Document Library of the site I’m customizing and quickly see what’s available.

With a little help from Google and from Marc Andersen (@sympmarc), I collected a list of images and created the reference page. The page allows filtering of images by size – small, medium large – and when an image is clicked, the image’s information is displayed on a static footer area (#1 in screen capture below). In addition, I often find more than one image I like as I browse through the list, so I wanted a way to “remember” an image (#2 in screen capture below) so that I can reference those later (#3 in screen capture below) when I’m done browsing them.

spimage-screencapture

The think that you will realize quickly, when browsing the many images available, is how much duplication there is. I’m going to guess that Microsoft® development teams probably don’t have this type of tool in-house, and thus just keep dumping new images into the folders not realizing the image they ware looking to use may already exist.

I thought about releasing this utility as a one-time GIST, but decide to create a project on github instead to manage this little utility – https://github.com/purtuga/SPImages/. The single aspx page can be downloaded from the ‘utility‘ directory.

Future improvements

As it stands, this utility is serving up the initial needs very well – I have used it now several times and am very happy with version “1.0″. However, there is always room for improvement.

  • I may still be missing some images, specially for SharePoint 2013 – I have found some that are hosted from /_layouts/15/1033/images/, but have not been able to get a list of everything under that directory.
  • I will also be enhancing this utility to provide a way to hover over the sprite images and get the markup for the image of interest – I have a few ideas of how to get that done in a generic way so that it does not have to be done manually for individual images.
  • I may also add a few more filters to the drop-down, like ‘Animated’ since there are not that many images that seem to be animated and perhaps ‘File Types’ icons since SharePoint seems to have a common way to name those (IC<file extension>)
  • It would also be extremely useful to have the ability to search for keywords.  Perhaps I can find a way to have the community help “tag” images, so that a search feature can also be introduced. Tags could be submitted to the project via pull requests to the project’s home on GitHub.

In looking at this list of additional enhancements it does sound ambitious and time consuming, but at the same time it would provide for quite a comprehensive utility… That just goes to show how I always think about building a complete and full feature system – for good or for bad :)  Maybe I’ll just wait to see if it gains interest for others.

JavaScript How To : Deferred Code Execution with jQuery Deferreds

Tags

, , , ,

When building web applications I often need to execute pieces of code only after a certain condition has been met. If you use jQuery, then you are probably aware of the Deferred functionally it provides when working with Ajax calls or animations. But what if your want to use it to check some other condition – like the existence (or disappearance) of a DOM element; or a change to a JavaScript global variable? For this you would need to revert to something else – like the old setInterval – but you loose the chaining ability of the jQuery Deferred class which I love to use.

Take the following use case:

You have a modular application that loads javascript files (modules) asynchronous as it is needed. Those modules, once they are loaded and *ready*, set a variable indicating “done” – for simplicity, lets say it is window.appReady. “Ready” could mean making more asynchronous calls to the server (ie retrieve data to initialize the UI).

What I need is a utility that checks the variable periodically and once it indicates “done”, a code block is executed. The call to this utility looks like this:


$.doWhen({
    when: function(){
        return window.appReady === "ready";
    }
})
.done(function(){ alert("App is ready!!"); })
.fail(function(){ alert("App is not yet ready :("});

The above code keeps checking the window.appReady variable until its value is “ready”, at which point, it will execute the given callback function. The utility has several other input options that can be used to control how often to check the condition and for how long. See below.

I initially came across the need for this utility when I developed a widget plugin that needed to adjust (normalize) element height on that widget. The problem was that the widget could be initialized on hidden (display: none) elements making it impossible to determine the height of the elements. With that, I created this utility to check for when the widget became visible. This utility leverages the jQuery Deferred class so that we can chain multiple code execution blocks and take advantage of the different states.

The code for the utility can found in this gist:

Setup an Eclipse Run External Tool Configuration for Grunt

Tags

, , , ,

I use Eclipse along with the Aptana plugin to develop web applications and have been for a long time. I started using Eclipse because I loved the fact that it provides a full feature Integrated Development Environment (IDE) framework that, through the use of plugins, supports multiple programing languages. At the time I started using it I wanted to learn one IDE that would fulfill developing in multiple languages. To that extent, Eclipse has lived up to it. I have used it to develop Java, Perl, Javascript, CSS, HTML, BrightScript (for my Roku) and will, very soon, use it to develop with Rails. I have tried other editors, like Sublime Text and Brackets, but keep coming back to Eclipse, mostly for the convenience that it already “has it all” and the fact that I’m comfortable using it.

In a web project that I started a few months ago, I wanted to learn how to use Grunt, since it seems like it is now the standard javascript build tool. I have been using Ant for my web builds (copy, search replace, concatenate, minify, deploy, etc), and did so by creating run configurations in Eclipse so that running the build was just a click away. Setting a Run configuration for Grunt was a little more challenging, since Eclipse does not have native support for it.  The instructions below assume that Node and Grunt are already installed and were performed with Eclipse v4.2.2 on a Windows 7 machine.

Setup a Run External Tool Configuration for Grunt

  1. From the Eclipse IDE, click on Run > External Tools > External Tools Configuration… The External Tools Configuration dialog will be displayed.External Tools Configurations Dialog
  2. Under Location, enter the path to the Window cmd.exe file: c:\Windows\System32\cmd.exe
  3. Under Working Directory, enter the location for the root of the project.
    In my case, I wanted to use the configuration on multiple projects, and thus opted to use the Eclipse environment variable ${project_loc} which points to the current project of the file that is in focus within the editor.  So if I switch over to another project in eclipse and run this same taks, it will run that project’s Gruntfile.js.
  4. Under Arguments, enter: /c grunt –no-color ${string_prompt:Enter Grunt Target (build, deploy, watch):build} & exit
    Let’s break down that this argument does:

    • /c – tells the cmd.exe program to run a command and then exit (source)
    • grunt –no-color  - will run grunt with no colors on the output. I found that the Eclipse Console does not recognize color and thus using –no-color will suppress the weird characters that are emitted
    • ${string_prompt:Enter Grunt Target (build, deploy, watch):build} - will prompt the user for the Grunt target(s) to run. Default, in my example, is build
    • & exit - will ensure we exit the command program
  5. Click on the Environment tab and define a new environment variable called Path that contains at least 3 locations (folder): a) nodejs root folder, b) nodejs NPM folder and c) the Windows System32 folder. These values are delimetered by a semicolon and should looks like the following:External Tools Configurations - Env
    • Name: Path
    • Value: DRIVE_AND_PATH_TO\nodejs\;DRIVE_AND_PATH_TO\nodejs\node_modules\npm;C:\Windows\System32;%Path%Ensure you replace the ‘DRIVE_AND_PATH_TO’ with the actual value on your system
  6. Give your new configuration a name and save it.

That’s it. You now have a Run configuration in eclipse that will run the current project’s Gruntfile.js prompting you for the Grunt target.

How to Check if jQuery Selection is Attached to DOM

Tags

, ,

I was looking for a quick way to check if a existing jQuery selection object remained attached to DOM. I had this need because while working with jQuery UI’s datepicker widget, I noticed that when you click the ‘next’/’prev’ button on the calendar, they are actually removed from DOM and new ones are created. This caused a problem for me because in a project I was working on, where the datepicker is displayed inline in a custom popup dialog, I had a click event bound to the page’s body which closed the popup that contained the datepicker if the click was outside the popup’s boundary. Because the datepicker emitted the click event on a DOM element (<a>) that was no longer attached to DOM, I was closing my popup prematurely.

A quick search found this jQuery forum post an the solution entered by users ‘n3ds4‘ and ‘ajpiano‘, which work great. I prefer the one that utilizes jQuery’s sizzle, which is:

$.contains(document.documentElement, $this[0]); // true|false

The $.contains() expects as input the Parent DOM element (I’m using the DocumentElement which is the entire HTML document) and the Node that should be checked (not a jQuery selection object – notice I gave it as input $this[0]). Assuming $this was defined as a jQuery selection object (ex. ($this = $(“div.mycontainer”)), the above would report if that selection is still in the DOM tree or not.

Here is an example:

// Tested with jQuery 1.10.2
var $this = $( $.parseHTML("<div/>") ).appendTo("body");
alert( $.contains(document.documentElement, $this[0]) ); // true

$this.remove();
alert( $.contains(document.documentElement, $this[0]) ); // false

I figure I would write a quick post about this so that I don’t forget it for the future. Hope it helps others.

Link

Black Magic Solutions for White Hat SharePoint now available in hard cover

Tags

, ,

Black Magic Solutions for White Hat SharePoint now available in hard cover

Mark Miller today posted the official anouncement of our book’s release as a hard cover. The hard cover version of our new book is now available on Amazon, right next to the Kindle edition.

This is again a great milestone in our self-publishing model road. I’m very proud have been part of this project and of the finished product. The reader’s feedback has been very positive and it has been exciting to hear the success stories of how they used the solutions found in this book in their own companies.

The topics in the book are:

  • “If a Brit stumples in a jQuery forest, does anyone hear his cries?” by Dave Coleman
  • “Build Solid Script Libraries for your Enterprise” by Marc Anderson
  • “Build a Content Slider Web Part: Dynamic Display of Pictures and Text” by Wendy Neal
  • “Build an HTML5 Video Galleary” by Ben Tedder
  • “Modify Your SharePoint 2013 Navigation Menu with a jQuery Plugin” by Eric Overfield
  • “Create a Mobile Friendly SharePoint Blog with jQuery Mobile” by Josh McCarty
  • “Create a Team Site Solution for Running Agile Projects” by Paul Tavares

I think its good to emphasize that the solutions covered are also provided for download.  The packages give the reader all of the source files described through out the book which were used to create the functional prototypes – prototypes that our early set of reviewers were able to use in their review process.  This, in my opinion, is a great resource for anyone learning how to customize SharePoint through the browser and gives them the ability to quickly expand upon what was done for the book.

If you have already gotten your copy – remember to post a review on Amazon with your thoughts.

SPWidgets v2.2 – What’s New?

Tags

,

Had some time to roll out some more changes to SPWidgets, including a new Widget.  Here is what’s new with Version 2.2:

(New) Date Widget – SPDateField

This new widget is rather simple and for the most part, it is a wrapper around jQuery UI Datepicker. The widget binds on to an HTML input field and displays a Datepicker. The benefit of using this widget instead of jQuery UI Datepicker directly is:

  1. Input field stores selected date(s) in the format expected by SharePoint API (ISO 8601, YYYY-MM-DD)
  2. User visible date is displayed using readable format (ex. mm/dd/yyyy)
  3. Support for selecting multiple dates
  4. Support for also defining Time (something jQuery UI does not provide)
  5. Like other widgets, it is localizable and and configurable

spwidgets.date

To use it, simply call SPDateField() on an input field and the widget is inserted into the place where the input is located on the page.

$("input").SPDateField();

The actual input used when this widget is called is hidden and replaced with the UI displayed above, which uses the Datepicker and optionally the Timepicker. The dates selected will be stored using the format expected by SharePoint API (ie WebServices) – ISO 8601 (ex. 2013-09-02T17:05).

For more on its usage, checkout the documentation or the Demo Single Page Application (SPA) which has been updated to showcase this widget.  The SPFilterPanel widget was also enhanced to display the Date and Time fields using this new widget.

Upload Widget – Refactored

The Upload widget has also been refactored and is now supported on SharePoint 2013. The look and feel of the widget was improved to fall inline with some of the more recent widgets, Additional input options were also added to make it easier for developers to integrate it in applications.

The widget remains compatible with SharePoint 2007 and 2010 and currently works only on Document Libraries, including those that may have Check In turned on.

Here is a short video of this plugin in action on the Demo Application page:

(New) ISO 8601 Date Parsing – parseDateString

In working with the new Date widgets it quickly became apparent that I needed a common method to parse ISO 8601 dates.  SPWidgets already has a utility that can generate ISO 8601 date string.  This utility takes as input a String representing the ISO 8601 date and return a Date object.

For more on this utility, see the document page.

Enhancements to the Filter Panel Widget

The filter panel widget, one of the most used widgets by me, has received the following enhancements:

  1. Date and Time fields now leverage the new Date widget
  2. Each column now has an option to match ALL or ANY of the values entered (use of logical AND or OR)
  3. Lookup fields now leverage the new picker from the SPWidget Lookup field

Head over to github to download the latest – purtuga.github.io/SPWidgets

Follow

Get every new post delivered to your Inbox.