Continue reading »]]> There are so many times when software is designed to do “smart” things for you. In many cases, those things aren’t as smart as they seem in actual practice.

Here’s an example of something that really gets in my way. Microsoft Office loves to convert “straight quotes” to “smart quotes”. If you’ve ever wondered why your single or double quote characters seem to curl up after you type the closing one, this is what is going on. It’s probably great if all you ever type is prose, but almost everything I type into Microsoft Word or PowerPoint has at least some code in it. When the straight quotes are converted into smart quotes, the characters are no longer valid code in almost every programming language.

Here’s how you can turn off this “smart” behavior in Microsoft PowerPoint 2013. (Sadly, with every new release of Office, this type of little setting seems to move to a new “undisclosed location”.)

Uncheck the “Straight quote” with “smart quotes” box.

Continue reading »]]> Next Thursday, May 23rd, 2013, I’ll be teaching a class for SharePoint-Videos.com called “JavaScript and jQuery for SharePoint 2013″. It’s an online class that is available to everyone, but it’s filling up fast.

This will be my first class fully focused on jQuery with SharePoint 2013, and I’ve had a lot of fun putting it together. SharePoint 2013 is more geared for great client-side programming opportunities than prior versions. Adding these development techniques to your toolkit can really help solve business requirements and improve the SharePoint user experience.

Here’s the registration link if you’d like to join us, and the class outline is below.

Class Outline

A jQuery Primer for SharePoint

• Learn the important functionality of jQuery in SharePoint context
• Find the parts of the page you need to work with using selectors
• Traverse the Document Object Model (DOM) to act upon related elements
• Manipulate elements to change their behavior, look, or structure
• Bind to DOM events to add behavior and functionality
• Use jQuery effects to add pizazz
• Interact with the SharePoint server or other external services using AJAX
• Improve the user experience and process by using deferred objects

SharePoint Client-Side Programming

• Discuss the different client-side options: CSOM, REST, and SPServices (SOAP) and how to use each approach
• Review examples of equivalent functionality using all three methods
• Discover when each approach is best
• Overview of the new App model
• Find out when client-side programming makes sense and when it doesn’t

Richer UIs Using jQueryUI and Other Script-Based Plugins

• Configurable dialogs
• Improved calendaring
• Drag and Drop
• Autocomplete
• Image Rotators

Continue reading »]]> I’m doing some work in SharePoint 2013 and we want to take advantage of as many out of the box capabilities as possible. We’re replacing an existing Intranet that has grown up in SharePoint from 2007 to 2010, and we’d like to rebuild with as little custom code as possible, since SharePoint 2013 now contains features that had to be custom built in the past.

The Intranet is build using a Publishing Portal and we want to use the Content Search Web Part (CSWP) to surface content in places like a home page rotator (the latest stories of certain Content Types within relative date ranges), in several “archive pages” (a list of the historical content, sorted by descending publishing date), and using search with the Search Results Web Part (SRWP) and the Refinement Web Part (RWP) in a page. The user stories and use cases here are not really all that complex: let’s show people the latest content of predetermined types regardless where it was created in the Publishing Portal.

The new Continuous Crawl capability in SharePoint 20103 sounds like it will fit the bill for us. We want the content that users see to be as fresh as possible. In fact, the TechNet article I link to below says that with Continuous Crawl “[t]he search results are very fresh, because the SharePoint content is crawled frequently to keep the search index up to date.” Sounds perfect, but we need to understand more about it.

We haven’t done much at all with the Search Service Application. We’ve got one Content Source, which is “Local SharePoint Sites”. In other words, it couldn’t be much simpler. Since search will underlie so much of the functionality, we need to understand exactly how the crawls are going to work and what sort of lag time we can expect users to have before they see content that is published. We can’t figure out exactly how Continuous Crawl works under the hood, so today I tried to do some experiments.

I set things to have no schedules to start out just to make things as fresh as possible, and just in case, I did a Full Crawl.

When the Full Crawl was done, the Content Source showed this status:

Next I clicked the Enable Continuous Crawls radio button. Note that when I did this, the Incremental Crawl schedule was automatically set to every 4 hours. This can be changed, but the incremental schedule cannot be set to “None” while the Enable Continuous Crawls radio button is selected.

The Content Source status changed to this:

In the log, it looks like an Incremental Crawl fired off when I saved that change at 11:34.

I waited for the Incremental Crawl to complete and published a new News Item at 11:37. The new content showed up in the CSWPs and the search results around 11:55. For some reason, a new Incremental Crawl started at 11:55 (21 minutes after the previous crawl).

I added some more new content at 11:58. That content showed up in the CSWP by 12:09. (I’m not sure exactly how many minutes it took to get there, but it was less than 12.) There’s nothing in the logs to indicate that a crawl occurred:

At 12:30, There was still nothing new in the logs:

All in all, this is still confusing to me. Continuous Crawl seems to be working, but at some underlying schedule which isn’t visible. There have been some suggestions that the Continuous Crawl schedule is set to every 15 minutes by default, and the evidence above seems to support that since the second piece of content showed up in 12 minutes, about 15 minutes after the last crawl that was visible in the logs.

There is some PowerShell you can use to get at properties of the Continuous Crawl, but it’s not totally clear what impact they have on the schedule.

$ssa = Get-SPEnterpriseSearchServiceApplication

$ssa.SetProperty(“ContinuousCrawlInterval”,1)

Another thing that’s not clear is how many Continuous crawl threads might stack up if things get backed up. One person has suggested an unlitimited number and someone else told me there’s a maximum of 8 threads. Obviously, there’s not a clear understanding of this, either.

In researching things, there articles/posts seem useful:

• https://www.nothingbutsharepoint.com/sites/itpro/Pages/What-is-Continuous-Crawl-in-SharePoint-2013.aspx
• http://blog.octavie.nl/index.php/2012/11/23/sharepoint-2013-search-continuous-crawling/
• http://social.msdn.microsoft.com/Forums/en-US/sharepointsearch/thread/c5bb9c5f-1957-4691-9ae4-fefff880349c

This TechNet article is way too vague and only focuses on what buttons to push to turn Continuous Crawl on or off:

• http://technet.microsoft.com/en-us/library/jj219802.aspx

In my opinion, we need some much clearer documentation from Microsoft to explain how all of this holds together and I’m trying to track down the right people to see if I can help to make that happen. If you know who those people are an could give me an introduction, I’d appreciate it.

Continue reading »]]> Tonight I’ve released SPServices 2013.012. If you are using an earlier version of SPServices, I strongly suggest that you upgrade to this version, as you will see some performance improvements and there is some nice new functionality. Thanks to everyone who downloaded the beta and provided feedback.

jQuery Promises

By far the most exciting thing in this release is jQuery promises, or deferred objects. I’ve written about this several times already here, here and here. I won’t belabor the point too much, but if you’re interested in increasing the efficiency of your code and getting ready for the way you are likely to work with the REST Web Services in SharePoint 2013, you should get familiar with using promises.

Other Release Notes

There are other goodies in this release, and you can see the full list of enhancements and improvements on the download page. Note the link to the Issue Tracker items for this release. I’ve gotten a bit lazy with the release notes, so for this release the items in the Issue Tracker contain all of the details.

Continue reading »]]> Today I was working on some script for the home page of a SharePoint 2013 site which added the jQueryUI accordion behaviour to all of the Web Parts within a Web Part Zone. When I went into edit mode, it was pretty frustrating to have the accorsdions kick in, so I looked around for a way to check to see if a publishing page is in editing mode with script. I’m pretty syure I’ve done this before, but it’s been a while and I couldn’t find anything in my kit.

Somewhat to my surprise, there were a lot of questions about how to do this out there, but not a lot of good answers. Most of them came down to looking for some element that would only be in the page in edit mode and sounded a little kludgy.

However, I found one over at SharePoint Stack Exchange from Andrey Markeev in a thread called How do I know if the page is in Edit Mode from JavaScript? that looks pretty solid to me.

I’m taking the liberty of including the code here, since this is the first place I look for answers!

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (inDesignMode == "1")
{
    // page is in edit mode
}
else
{
    // page is in browse mode
}

This will refer to value of the following html input control, which is rendering on the page when it is in edit mode:

For wiki pages, you will need the _wikiPageMode parameter:

var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;

if (wikiInEditMode == "Edit")
{
    // wiki page is in edit mode
}
else
{
    // wiki page is not in edit mode
}

Continue reading »]]> SPServices 2013.01 is almost ready for release and I’m hoping that when you see the coolness here that you’ll want to get your hands on the beta to do a little testing with it.

I’ve put together a pretty simple demo page to show how great it can be to use jQuery .Deferred objects (aka promises) to retrieve data with SPServices versus the asynchronous way we’ve tended to use until now. The demo page is running on my old WSS 3.0 site hosted at FPWeb. Unfortunately, I don’t have a public-facing SharePoint 2013 instance anywhere yet.

The idea here is pretty simple. I wanted to keep the complexity of the code pretty low and also to use as much common code as possible between the two methods so that the real apples to oranges comparison is the async method versus the promises method.

I’ve set up three Announcements lists in a single site: Corporate Announcements, Finance Announcements, and HR Announcements. Each list has three announcements in it. I even got to use Bacon Ipsum to fill in some dummy content.

The demo page has two buttons on it: one for async and one for promises. When you push one of the buttons, the script loops through the array containing information about the three lists, retrieves the three items from each of the lists using the chosen method, and displays them on the page. There’s a slightly different version of the code in each of the functions (getRecentAnnouncementsAsync and getRecentAnnouncementsPromises) that run in each case.

The getRecentAnnouncementsAsync function runs the way we’re all used to using SPServices. The async option is set to true and processing of the returned data happens inside the completefunc.

In the promises version, the async option isn’t set, so it has the default of false (we don’t wait for the returned data, but continue processing). The promise returned from each call to GetListItems is put into an array, and the line $.when.apply($, announcementsPromises).done(...) is where the check for all three promises to be complete happens. When that occurs, the data for the three calls is processed.

Here’s the code:

// Show the most recent Announcements from three lists in the current site
var announcementsPerList = 3;
var lists = [
    {name: "Corporate Announcements"},
    {name: "HR Announcements"},
    {name: "Finance Announcements"}
  ];
var camlQuery = "<Query><OrderBy><FieldRef Name='Created' Ascending='FALSE'/></OrderBy></Query>";
var camlViewFields = "<ViewFields>" +
    "<FieldRef Name='ID' />" +
    "<FieldRef Name='Title' />" +
    "<FieldRef Name='Body' />" +
    "<FieldRef Name='Author' />" +
    "<FieldRef Name='Created' />" +
    "<FieldRef Name='FileDirRef' />" +
  "</ViewFields>";
var out;

$(document).ready(function() {

//$("#ctl00_site_share_button").hide();
  $("input[value='async']").click(function() {

    getRecentAnnouncementsAsync();

  });

  $("input[value='promises']").click(function() {

    getRecentAnnouncementsPromises();

  });

});

//++++++++++++++++++++++++++++++++++++

function getRecentAnnouncementsAsync() {

  var recentAnnouncementsContainer = $("#demo-recent-announcements");
  recentAnnouncementsContainer.empty();
  recentAnnouncementsContainer.addClass("demo-loading");

  out = "<table>";
  announcementHeader();

  for(var i=0; i < lists.length; i++) {

    $().SPServices({
      operation: "GetListItems",
      async: true,
      listName: lists[i].name,
      CAMLQuery: camlQuery,
      CAMLViewFields: camlViewFields,
      CAMLRowLimit: announcementsPerList,
      completefunc: function(xData) {

        // List header
        out += "<tr><td class='demo-section-header' colspan='99'>" + lists[i].name + "</td></tr>";

        $(xData.responseXML).SPFilterNode("z:row").each(function(itemNum) {

          processAnnouncement(i, $(this));

        });

      }
    });

  }

  out += "</table>";
  $("#demo-recent-announcements").removeClass("demo-loading");
  recentAnnouncementsContainer.html(out);

}
function getRecentAnnouncementsPromises() {

  var recentAnnouncementsContainer = $("#demo-recent-announcements");
  recentAnnouncementsContainer.empty();
  var announcementsPromises = [];
  recentAnnouncementsContainer.addClass("demo-loading");

  out = "<table>";
  announcementHeader();

  for(var i=0; i < lists.length; i++) {

    announcementsPromises[i] = $().SPServices({
      operation: "GetListItems",
      listName: lists[i].name,
      CAMLQuery: camlQuery,
      CAMLViewFields: camlViewFields,
      CAMLRowLimit: announcementsPerList
    });

  }

  // When all of the promises are fulfilled...
  $.when.apply($, announcementsPromises).done(function() {
    for(var i=0; i < lists.length; i++) {

      // List header
      out += "<tr><td class='demo-section-header' colspan='99'>" + lists[i].name + "</td></tr>";

      $(announcementsPromises[i].responseXML).SPFilterNode("z:row").each(function(itemNum) {

        processAnnouncement(i, $(this));

      });

    }

    out += "</table>";
    $("#demo-recent-announcements").removeClass("demo-loading");
    recentAnnouncementsContainer.html(out);

  });

}

function getNow() {

  return new Date();

}

function announcementHeader() {

  out += "<tr class='ms-WPHeader'><td colspan='99'><h3 class='ms-standardheader ms-WPTitle'>Recent Announcements as of " + getNow() + "</h3></td></tr>";
  out += "<tr>" +
      "<th class='ms-vh2'>Title</th>" +
      "<th class='ms-vh2'>Body</th>" +
      "<th class='ms-vh2'>Created By</th>" +
      "<th class='ms-vh2'>Created</th>" +
    "</tr>";

}

function processAnnouncement(i, item) {

  out += "<tr>";

  // Title as a link to the announcement
  var thisLink = item.attr("ows_FileDirRef").split(";#");
  out += "<td class='ms-vb demo-note-details' style='width:40%;'>" +
      "<a href='/" + thisLink[1] + "/DispForm.aspx?ID=" + thisLink[0] + "&Source=" + location.href + "' data-announcement-id='" + item.attr("ows_ID") +
        "' data-list='" + lists[i].name + "' >" +
        item.attr("ows_Title") +
      "</a>" +
    "</td>";

  // Body
  var thisBody = item.attr("ows_Body");
  out += "<td class='ms-vb'>" + ((typeof thisBody !== "undefined") ? thisBody : "NA") + "</td>";

  // Author as a link to the User Profile
  var thisAuthor = item.attr("ows_Author").split(";#");
  out += "<td class='ms-vb' style='width:15%;'>" +
      "<a href='/_layouts/userdisp.aspx?ID=" + thisAuthor[0] + "' onclick='GoToLink(this);return false;'>" + thisAuthor[1] + "</a>" +
    "</td>";

  // Created date/time
  out += "<td class='ms-vb' style='width:15%;'>" + item.attr("ows_Created") + "</td>";

  out += "</tr>";

}

Note that I’m using the same version of SPServices here. SPServices 2013.01 can be used as you’re used to using it and everything will work as you are used to. If you are making multiple calls and the promises method would make more sense (mainly in terms of efficiency), then you can take advantage of it.

There are two big benefits of using the promises method:

• If there are multiple calls to the Web Services that can logically happen concurrently (there’s less benefit if there is only one call), the promises method allows that to happen.
• In the promises method, the browser doesn’t get locked up like it does with the async method. Setting async to true means that the browser is going to wait for the results to come back from the call before it will allow anything else to happen. With promises, the processing continues even when the results aren’t available. (This can take some getting used to, and I’ll undoubtedly do more posts about it.)

I’ve tested the code in SharePoint 2013 on Office365 and WSS 3.0 at FPWeb, which are about the most opposite ends of the spectrum that we can try these days. The code that I tested is *exactly* the same in the two environments. I simply copied and pasted the file from SharePoint 2013 where I started into the WSS 3.0 environment. How’s that for consistency, even on a downgrade? Oh, if Microsoft’s code only did that!

Using Firebug, I’ve captured information from the two methods on the Net tab for the XHR traffic.

Here are the results in SharePoint 2013:

Async

Promises

As you can see the total elapsed time decreased from about 503ms to 107ms. These results are fairly consistent. I haven’t tried to build any fancy instrumentation around it, but if I click the buttons repeatedly, I get consistent results in both cases.

Here are the results from WSS 3.0:

Asynch

Promises

Here, the total elapsed time decreased from about 409ms to 130ms.

In both versions of SharePoint, you can quite obviously see the difference. With the async method, the three calls happen in order, whereas with the promises method, they happen pretty much concurrently. (Even with promises, there’s a small lag due to the processing to set up the calls.)

But don’t take my word for it. go and grab your own copy of SPServices 2013.01 and try it yourself.

Continue reading »]]> Thanks to all who came to my session “Creating a Great User Experience in SharePoint” today at SharePoint Saturday Boston 2013. As promised, I’ve posted the slides to SlideShare. You can either view them on SlideShare or below.

As always, I learned a lot from the conversations and other sessions. It’s great to have the chance to talk to people about what they are doing with SharePoint and especially SPServices. (The new SPServices 2013.01 is ready for release! Just a little tidying up and some doc writing.)

A big THANK YOU goes out to Talbott Crowell (@talbott), Geoff Varosky (@gvaro), Chris Bortlik (@cbortlik), and especially Pradeepa “Peeps” Siva (@PipsTips) who puts up with them and the rest of us SharePoint freaks.

Continue reading »]]> The Problem

My Office365 tenant has become half-upgraded from SharePoint 2010 to SharePoint 2013. (If you want to read more of my whinging about this, checkout this thread on SPYam.)

This leaves me in the unenviable position of having to use SharePoint Designer 2013 (SPD2013) with my SharePoint 2010 Office 365 tenant. Unenviable because, as anyone who follows me even occasionally knows, the Design and Split Views are not available in SharePoint Designer 2013. That thread that I started on TechNet has over 28,000 views, so I don’t think that I’m the only one upset by this.

When I installed SPD2013 on my laptop, all went well. However, every time I tried to use the Open Site dialog, it would crash. SharePoint Designer 2010 (SPD2010) was still working fine when I accessed other 2010-based installations, but not SPD2013.

I found a fix that worked for me in the Technet forums. You may or may not want to trawl through the thread, as it is quite long. Instead, here’s the Cliff Notes version of what worked for me.

Sungmin Kim from Microsoft offered up this check.

You can repair your SPD 2010 to restore the regkey for SPD2010.

The issue might happen in case the ClientGUID of the Open Site dialog in SPD14 is the same as the one of the open site dialog in SPD 15 in a certain Side by Side environment.

(this repro’s only in a specific environment, but I couldn’t find the enviroment yet and when the GUIDs could be the same)

so I have couple of questions. Sorry to bother you, :(

1. Could you please check if ClientGUID value under HKEY_CURRENT_USER\Software\Microsoft\Office\14.0\Common\Open Find\Microsoft SharePoint Designer\Settings\Open Site is the same as the ClientGUID value under HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Common\Open Find\Microsoft SharePoint Designer\Settings\Open Site?

2. If the values are the same, could you please check if the crash still happens after removing both registry keys?

3. Have you ever installed any other version of SPD15 on your machine? (e.g. beta version) or any other version of SPD14?

4. if the issue still happens at #2, how about removing the registry key HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\ComDLg32\LastVisitedPidlMRU ?

Points 1 and 2 did the trick for me. Apparently both SPD2010 and SPD2013 had the same GUID for the ClientGUID value in the registry. I had not installed any betas of SPD2013 on my laptop because I was concerned about exactly this sort of incompatibility. (I’d limited my use of SPD2013 to launching it inside virtual machines.)

The Fix

If you have this problem and want to fix it, here are the steps.

Open the Registry Editor. You can do this by going to the Start menu (I’m still a Windows 7 stalwart, so I can’t vouch for how this might work on Windows 8), choosing “Run”, and typing “regedit” in the Open: box.

Look for the keys:

HKEY_CURRENT_USER\Software\Microsoft\Office\14.0\Common\Open Find\Microsoft SharePoint Designer\Settings\Open Site

and

HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Common\Open Find\Microsoft SharePoint Designer\Settings\Open Site

In my case, they were identical, as shown below.

SharePoint Designer 2010 (14.0)

SharePoint Designer 2013 (15.0)

Delete both of the ClientGUID keys. You can do this by highlighting the key and hitting the Delete key or right clicking and choosing Delete.

Once I had deleted these two registry keys, I was able to open sites in both versions of SharePoint Designer with no problems.

Unfortunately, the two versions of SharePoint Designer seem to use the same recent sites list, so I see the same Recent Sites in both versions. This is going to make it confusing when I am trying to figure out which site to open. Now I’m a three SharePoint Designer version guy, as I’m still using SPD2007 and SPD2010 for client work in addition to SPD2013. Yeesh.

Continue reading »]]> This entry is part 13 of 13 in the series SPServices Stories

Introduction

Rainer Wittman (@RainerAtSpirit) and I have been emailing back and forth for a few weeks now. He’s been trying out the new alpha of SPServices 2013.01 which includes jQuery promises aka Deferred objects capabilities (soon to be a real release, I promise!) with the Durandal JavaScript framework. Durandal is a framework for building SPAs, or Single Page Applications.

This is something that SharePoint 2013 does to some degree with the Minimal Download Strategy (MDS). If you’re interested in how MDS works, here are some posts that go into more detail about it:

• SharePoint 2013 – Introduction to the Minimal Download Strategy (MDS) from Wictor Wilén (@wictor)
• Minimal Download Strategy in SharePoint 2013 from Bjørn Furuknap (@furuknap)

Those of you who are purists will tell me that I’m comparing apples and oranges, and that’s sort of true. However, the goals are similar: send as little of the page transitions down the wire as possible to make those transitions as fluid and responsive as possible. We see this sort of approach more and more, especially in mobile interfaces.

I’ve done SPA-like things even with SharePoint 2007 using AJAX. By maintaining the overall chrome of the page (top nav, Quick Launch, footer) as a constant, we can do something as simple as AJAXing in a new copy of the same page, parsing out the main panel, and replacing it in the user’s current copy of the page in the DOM. You also see this in SharePoint 2010 with the asynchronous refresh capability available with some Web Parts (See: Asynchronous
Update in SharePoint 2010 from @wonderlaura).

If you haven’t heard of Durandal (I hadn’t), here’s some information swiped from the Durandal home page:

Comfortable

We didn’t try to re-invent the wheel. Durandal is built on libs you know and love like jQuery, Knockout and RequireJS. There’s little to learn and building apps feels comfortable and familiar. Dive in and enjoy.

Feature-rich

MVC? MVP? MVVM? Yes. Messaging, navigation, modals? Check. Durandal has the features you need to build whatever apps you can imagine; the apps of today and of tomorrow. Let your creativity soar.

Versatile

Building an Android phone app? An enterprise LOB targeted at Windows? A web gaming platform? No matter how large or small the app, it’s effortless with Durandal….and we give you the tools to develop on any platform, for any platform.

I expect we’ll hear more from Rainer about this cool way of building SharePoint interfaces. As you read through his post below, you’ll probably be very impressed to see that his approach works for SharePoint 2007, 2010, or 2013. If you’re still on 2007 and woulds like to make your installation fell a heck of a lot more “modern”, this is an approach that has legs going forward. You’ll also see some links in his post to live, working demo pages so that you can get a feel for what he is driving at.

This article was originally posted on Rainer’s blog at Durandal SP3: Developing SharePoint SPAs made easy.

Durandal SP3: Developing SharePoint SPAs Made Easy

Hi there,

In the last post I introduced you to Durandal a SPA Framework, which can be used to create SPAs on top of the SharePoint infrastructure. This time we’re going to leverage Marc Anderson’s SPServices as a data service for our SPA.

The obvious advantage is that web services are around for a long time, so one SPA (same code base) runs in SharePoint (2003), 2007, 2010 and 2013.

The obvious disadvantage is that web services are deprecated in 2013, so they might go away with the next major release. If you are already running on 2010/2013 and don’t have to support older browser versions you might want looking into using REST services with JayData or Breeze instead… but that’s worth another story.

Seeing is believing so here a couple of screen shots using IE versions that roughly matches the SP release time.

SharePoint 2013 | IE 10:

SharePoint 2010 | IE 8:

SharePoint 2007 | IE 7:

In SP2007 you’ll notice some issues with the CSS that is used in the SPA otherwise it’s fully functional. That is less an issue with IE7, but more with SP2007 that is running pages in Quirks mode. A quick workaround would be to apply a DOCTYPE to the pages that host your SPA.

SharePoint 2003 | IE 6:

Sorry, I’m out of historic SharePoint VMs. Please give me a shot if somebody has still access to a SP2003 environment. I’d love to add the missing screen shot.

Now, after hopefully getting you excited, here’s the bad news. The demo is using the alpha release 2013.01ALPHA5 of SPServices, so I won’t make the demo code available through Github as usual. I’ll update this post once the next official version of SPServices has been released and tested with Durandal SP3.

The good news is that there are two public available pages that allows you to go hands-on. Both are best viewed with your favorite console open.

1. development version:
2. optimized build:

Without going into the details let see what the Promises demo app is doing when you activate the list route (/#lists).

1. Retrieve information about the lists in the current site via SPServices GetListCollection method (with caching)
2. Retrieve detail information about the selected list via SPServices GetList method and build a mapping that can be used in SPServices SPXmlToJson method (with caching)
3. Retrieve item information via SPServices GetListItems (NO caching)

Update 2013/04/11: The life demo was updated based on some feedback I got. The list overview now produces a configurable row view of lists with meta information like ItemCount and Last Modified. Step 2 and 3 are performed once you select a list.

By opening up the optimized build and filtering the network tab for XHR you can see the three POST requests to lists.asmx nicely lined up. Once you start selecting other lists, you’ll noticed that the number of XHR requests decrease as more and more cached information becomes available.

The development version on the other side shows far more details via the console. That allows you to get familiar with Durandal’s application life cycle and to inspect the Json result of some spdata methods.

After reading so far and hopefully seen the Promises demo in action by yourself, I hope that you share my excitement of the upcoming promise support in SPServices. Once it’s part of an official release SPServices will become a perfect fit for Durandal’s life cycle methods.

Continue reading »]]> It’s supposed to be simple to set up an External Content Type with SharePoint Designer. You just create the connection, flick a few settings, and voila, you’ve got external data available in SharePoint. At least every time I’ve seen it demoed, it works really well. The blog posts out there also paint is as a “few clicks and you’re done” thing.

However, it’s not one of those things that’s always simple. In most situations, you have some authentication mumbo-jumbo that you want to work in between the External Content Type and the external data source (in this case it was SQL).

My colleague Roberto Cremonini and I have been working for a client together for a while now. I’ve known Roberto for years and years, since we worked together at Renaissance Solutions together in the mid-1990s. It’s great how relationships one builds earlier in one’s career can continue to bear fruit both professionally and personally over time.

Our goal for this little project was fairly simple. The client has a third-party software package which is used to manage the financial aspects of the business. The package uses SQL Server as its database and there is a table containing information about Partners and another which contains Projects. Think of the classic Client / Project combination you have in a consulting company, and you’ll understand the idea. We don’t want to maintain that data in SharePoint because it already exists in the software package “line of business” (LOB) system.

We need everyone in the organization to be able to read from the list of Partners and Projects because we want to use them in Site Columns which we can add to multiple Content Types. If you think about it, those two pieces of data are relevant for many different types of content; the majority of the work of the organization is done for or with a Partner in the context of a Project.

So off to Central Administration to set things up in the Secure Store Service. Suffice it to say that we set everything up (multiple times) the way we thought were supposed to. What ended up not being clear was what account(s) were required to make things work and how those accounts should be configured.

There are a number of good blog posts giving instructions about how to set this up, including a nice one on Fabian Williams’ (@fabianwilliams) blog How To: Create, Configure, Consume SharePoint 2010 Secure Store in Business Connectivity Services. However, they are all a bit too cookie-cutter and “techie” to be useful, in my opinion. None of them talk about what can go wrong and why, which always ends up sending you down rat holes.

Once you have the Secure Store Service set up (I’m not running through the steps here; see Fabian’s post and quite a few others), setting up the connection in SharePoint Designer is seemingly straightforward. You simply provide the Database Server, Database Name and which Secure Store Application ID (called the Target Application ID in Central Administration, natch) you want to use.

No matter how we set things up in the Secure Store Service, when we tried to connect to the SQL Server Database in SharePoint Designer, we got the error “Cannot logon with credentials obtained from Secure Store Provider.”

We found – in our environment, at least – that a domain account wouldn’t work. Instead, we created a SQL Account with SQL authentication and things worked right away. See this useful post SharePoint 2010 using BCS with SQL Server database by Arjan Fraaij.

Following this post, we created two external lists for Partners and Projects in our SharePoint site and we thought we were done. Instead, we realized that our admin account was the only user who could see the External List content. All other users would get an error that read more or less as “Access Denied by Business Data Connectivity. Correlation ID: …”. After some trial and error, we solved the problem by following a few additional steps:

• In Central Administration, go to Manage Service Applications and select Business Data Connectivity Service.
• From the drop down menu choose “Set Permissions”.
• Add All Authenticated Users and set permission to Execute
• In Central Administration, go to Manage Service Applications and select the Secure Store Service used to logon and from the drop down menu choose edit.
• Click next twice until you get to the page where you see Administrators on top and Members below.
• Add All Authenticated Users to Members.
• Voilà

These settings may be too open for your environment, but for this client we wanted everyone to be able to read from these lists. The majority of them have access to the LOB system in some way, and the Partner and Project information is known to everyone in the organization.

Continue reading »]]> SharePoint blogs are no one’s favorite. There is just enough functionality there to make them useful, but not enough functionality to make them useful enough. On top of that, blogs are sites, not lists. That seems counterintuitive on one level – isn’t it just a list of posts? – but it makes sense on other levels. There are actually three important lists in a blog site: Posts, Comments, and Categories. There are two other lists as well – Photos and Links – but I rarely see them used in blog sites.

Because there are multiple lists and the site itself has some unique functionality, it actually does make sense that it is a separate site that uses a unique Site Template.

One problem with this is that it is then difficult to display blog posts in other sites. Sure, you can use the Content Query Web Part (CQWP) to do it, but the display options out of the box are pretty abysmal. Other options are an RSS Web Part or even search.

However, if you want to display blog posts elsewhere with any sort of fidelity, you will probably want to use a Data View Web Part (DVWP).

In this post, I’ll show you the quick steps to make that work, without much beautification. I’ll assume you already have your blog site up and running. The basic idea is that we will created a DVWP in the blog site, make a few manual edits to it, and then copy it into a page in another site. One note: I’m a bit more of a hack, so I would shortcut past a few of these steps. I’m trying to make it very straightforward and involving as little manual coding as possible.

Step 1: Create the DVWP

Open the blog site with SharePoint Designer. The home page of the blog site is default.aspx, so make a copy of that page and edit it in Advanced Mode. You’ll want to use the Design View or Split View for this. Enjoy them now, as they are gone in SharePoint Designer 2013!

On the ribbon, choose Insert / Data View / Empty Data View. If you choose a list at this point, you’ll end up with an XLV Web Part instead, which won’t work for our purposes because they cannot pull information from other sites – only DVWPs are good for this. Click on the ‘Click here to select a data source’ link and choose the Posts list.

Add whatever columns you’d like to display in your DVWP as a Multiple Item View. For this example, I’ve chosen Title, Created, and Created By.

Right click on the Title column and choose Format item as / Hyperlink to / Display form. The link will have a hard-coded URL, which is bad, but remember we’re just doing the basics here. It’ll work to get you to the actual post for the other site.

Make whatever other changes you’d like in the DVWP (Paging, Item Limits, column formatting, etc.), save the page, and test it in the browser. You should see your DVWP where you inserted it in the page. Mine is right up top:

Step 2: Modify the DVWP’s DataSource

Once you have the DVWP showing what you’d like to see, we have a couple more things we need to do to the DVWP to make it work in the other site.

Somewhere in the code for the DVWP, you’ll see the DataSources section. It’ll look something like this, depending on how you’ve formatted the DVWP:

<DataSources>
  <SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="&lt;View&gt;&lt;/View&gt;" id="dataformwebpart1">
    <SelectParameters>
      <WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{AEC1CA2C-EFA6-4218-A742-5939F94E0DDE}"/>
      <asp:Parameter Name="StartRowIndex" DefaultValue="0"/>
      <asp:Parameter Name="nextpagedata" DefaultValue="0"/>
      <asp:Parameter Name="MaximumRows" DefaultValue="10"/>
    </SelectParameters>
    <DeleteParameters>
      <WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{AEC1CA2C-EFA6-4218-A742-5939F94E0DDE}"/>
    </DeleteParameters>
    <UpdateParameters>
      <WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{AEC1CA2C-EFA6-4218-A742-5939F94E0DDE}"/>
    </UpdateParameters>
    <InsertParameters>
      <WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{AEC1CA2C-EFA6-4218-A742-5939F94E0DDE}"/>
    </InsertParameters>
  </SharePoint:SPDataSource>
</DataSources>

We need to add the WebURL parameter, as I describe in my older post Using a DataSource in a Data View Web Part (DVWP) in a Different Site in SharePoint Designer 2010. You should use the relative path to the blog site as the value. In my case, it’s “/sites/demos/blog”.

The end result should be something like this:

<DataSources>
  <SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="&lt;View&gt;&lt;/View&gt;" id="dataformwebpart1">
    <SelectParameters>
      <WebPartPages:DataFormParameter Name="ListName" ParameterKey="ListName" PropertyName="ParameterValues" DefaultValue="Posts"/>
      <WebPartPages:DataFormParameter Name="WebURL" ParameterKey="WebURL" PropertyName="ParameterValues" DefaultValue="/sites/demos/blog/"/>
      <asp:Parameter Name="StartRowIndex" DefaultValue="0"/>
      <asp:Parameter Name="nextpagedata" DefaultValue="0"/>
      <asp:Parameter Name="MaximumRows" DefaultValue="10"/>
    </SelectParameters>
  </SharePoint:SPDataSource>
</DataSources>

Note that you can delete the DeleteParameters, UpdateParameters, and InsertParameters sections because we’re only displaying data in the DWP (SelectParameters are used for that).

You’ll also need to remove the listname attribute in the DVWP header, which will look something like this:

listname="{AEC1CA2C-EFA6-4218-A742-5939F94E0DDE}"

Save the page again and test it in the browser. Nothing should have changed and the DVWP should be working just fine.

Step 3: Export the DVWP

I usually just copy and paste the DVWP code from one SharePoint Designer window to the other, but here we’re going to use the Export / Import mechanisms instead.

You should already have the page open, so simply click in the upper right corner of the DVWP and choose Export.

In IE(, I get this prompt

and I just choose to save the Posts.webpart file somewhere I’ll be able to find it again.

Step 4: Import the DVWP into the Other Site

Now we’ll add the DVWP to the other site. Navigate to the page where you’d like to display the DVWP, and put the page into Edit Mode. Position the cursor where you’d like the DVWP and on the ribbon, choose Insert / Web Part.

I’m going to add mine right under the intro text on a Team Site. You’ll see that there’s an option to Upload a Web Part, which I’ve highlighted below. Click on that, browse the the Posts.webpart file you saved in Step 3, and then click upload.

You’ll have to reply to a prompt to save the page and then you’ll be right back at the page without your DVWP. What? Yeah, some bad UI here. But you should see a new Category called Imported Web Parts, and your Posts Web Part should be listed there. (I uploaded twice by accident in the screen grab below, but you get the idea.) You can insert the Posts DVWP wherever you’d like in the page.

As I mentioned, you can also copy and paste the DVWP code from one page to another, depending on your comfort level.

Next Steps

Now your users can read blog info wherever you’d like to display it, without going to the blog site itself. If you’d like to, you can format the posts anyway you’d like in the DVWP, of course. To keep things simple, I’m just displaying some basic info in a list-oriented view. You could mimic the display from the blog site or anything else that tickles your fancy.

Continue reading »]]> Here’s something really exciting. I’m one of nine authors for an upcoming SharePoint book we’re putting together with Mark Miller (@EUSP), good old Mr. EndUserSharePoint himself. It’s going to be all about using script with SharePoint in interesting and (we hope!) useful ways.

As with our SharePoint 2010 at Work: Tricks, Traps, and Bold Opinions book, we’re each going to write a chapter about something we think is a really cool thing to do in SharePoint using JavaScript and/or jQuery to make it sing.

We’re going a non-traditional route with this book. It’s going to come together very fast and we’re going to publish it ourselves. Thanks go to Mark for both the original idea and the willingness to do a lot of the legwork to get things rolling.

The nine authors who are contributing to the book are: Chris Beckett, Dave Coleman, Josh McCarty, Wendy Neal, Eric Overfield, Peter Serzo, Paul Tavares, Ben Tedder, et moi. I’m pleased as punch to be a member of this group; every single one of the others has impressed me over the years with their talents and passion for that thing we call SharePoint.

Here’s my chapter’s working abstract. Maybe all the lessons I’ve learned about writing script in SPServices can help people out.

To many traditional SharePoint developers, working with JavaScript feels like taking giant steps backward into the Wild West of coding. While it can take some getting used to, nothing could be farther from the truth. By applying good coding practices to your JavaScript and jQuery work, you can devise solid, reusable script libraries to run huge pieces of the SharePoint functionality across your enterprise.

Drawing on the lessons learned from building and maintaining SPServices over four years and across three SharePoint versions, I’ll give you some tips and tricks about how to build better code and to make your life easier in the meantime. Whether you are in an enterprise of one or 100,000, the same good practices can get you where you need to be.

We’re really excited about it and we have some ideas that we think you’ll truly be interested in. But guess what? You can get in on the fun! We’re looking for some reviewers from the community to help us validate the solutions we’re writing about and make the final product as good as it can possibly be. If you’re interested, head on over to the Eventbrite page and sign up.

If you don’t think you can help out by playing a reviewer role, then you can watch our progress on Twitter with #SPWhiteHats.

Here are some more details from the Eventbrite page to tickle your fancy:

How would you like to participate in the creation of a new book?

Nine experienced authors from NothingButSharePoint got together and decided we want to self-publish a unique SharePoint book without having to go through the formal process of a traditional publisher. We want to do a solutions based book where people can select projects of interest to them. We don’t want a bunch of geek speak; just real world solutions that people can use to enhance their SharePoint sites.

That’s where you come in.

Each author will be writing one chapter for the book. We want the book to be as compelling as possible, so we need reviewers from the community to act as proof-readers and copy editors for each of the chapters. You will work with a selected author to review their work, test their solutions, and give feedback for possible enhancements. Each of the solutions are described below.

Your obligation? Look at the chapter from a users perspective and let the author know:

• Does the solution work?
• Is it something you would consider using?
• Are there extensions to the solution that you would find interesting?
• Does the language flow, does it have correct syntax?

We are interested in people who want to participate in an author’s project, You may select multiple chapters to review, but priority is given to those who select one single chapter. If the chapter you would like to review is full, you will see a “Sold Out” or “N/A” sign next to the chapter.

The first draft of the chapters will be finished on April 30th. You will work with the author during the draft period and then help with testing the final code and demos during the first week of May.

What’s in it for you?

What you’ll get for your efforts is twofold. First, you will be listed in the credits of the book as a technical reviewer for the project. Second, you’ll have pre-release access to a chapter of the book.

The solutions will be built and demoed in a SharePoint 2010 environment, but most chapters will also talk about how to implement them in 2013, when appropriate.

How does that sound? If you’ve got the time and the inclination, check out the abstracts, select one chapter you’d like to review and let’s get started. If the chapter you’d like to select is marked with “Sold Out” or “N/A”, that means we have enough reviewers for that chapter.

Continue reading »]]> This git thing gets a lot of press these days and I figure it’s time to learn it. I selected git as the code repo on the SPServices Codeplex site quite a while ago but never used it. Now I’m trying to figure out what would be useful.

SPServices has been a single file, as most of you know. However, each release has been made up of two js files (one minified, one not) and a license.txt, all in a ZIP file.

I’d like to be able to use git to:

• Accept code from others and easily (relatively) merge it
• Track changes better than I have been just on my hard drive and in my WSS 3.0 development environment
• Provide offline documentation – This is a tricky one because I’ve used the Documentation wiki on Codeplex as my repository and I’m not sure how to pull the content out.
• What else?

I welcome any thoughts you may have. I’m especially interested in how you think I can best accomplish the bullets about with a minimum of muss and fuss for everyone.

Paul Tavares (@paul_tavares) has already started a thread on the SPServices Discussions to get the ball rolling. Please jump in with your ideas or comment here.

Continue reading »]]> Sahil Malik had an extremely useful little post about a month back that I emailed to myself and then promptly forgot. Today, Mikael Svenson pointed back to Sahil’s in a post of his own that is also very useful. I’m going to steal a little from both posts for this one. I hope Sahil and Mikael don’t mind. I’ll ask for forgiveness later.

Mikael’s trick shows you An easy way to accomplish Home navigation links regardless of the path of your site collection just by looking at a JavaScript variable that SharePoint provides us. Knowing the current context is something I struggled with when I first was working on SPServices, and I came up with some monkey business with the WebUrlFromPageUrl operation in the Webs Web Service and some other URL hackery to figure it out. Since then, I’ve layered in checks for some of the variables that SharePoint 2010 provides to avoid Web Service calls, where possible. In the upcoming 2013.01 release, I’ll add in a few more, and even some that take advantage of some of the additional variables in SharePoint 2013. Of course, there will be fallbacks for anything that isn’t available, so the library continues to be version-resistant.

Mikael linked back to Sahil’s post _spPageContextInfo is your new best friend. In Sahil’s post, he lists the values which are available in SharePoint 2010 and 2013 in every page. Here’s the table that Sahil provides, but I’ve sorted the data alphabetically and changed the example URL to make some of the values more clear. It’s worth noting that there isn’t an SP2007 column in Sahil’s table. That’s because the _spPageContextInfo variable wasn’t introduced until SharePoint 2010. For SharePoint 2007, it’s still monkey business and URL hackery. After all, no one uses script with SharePoint 2007, right?

Assuming we are on the page https://sharepoint.com/sites/demos/SitePages/Home.aspx

Continue reading »]]> I get many great questions in the SPServices Discussions (that’s the best place to ask questions about SPServices, IMHO, not the MSDN forums, or StackExchange, or on the Documentation pages on the SPServices site, where I rarely see them). Some of them deserve to get wider exposure by becoming a blog post, and here is one of those.

The question came in today from jshoaf and was titled Migration to SharePoint 2013:

I’m new to SPServices and I’m using it to develop on SharePoint 2010.  I’m using SPServices 0.7.2.  My organization will be upgrading to SharePoint 2013 sometime in the future.  What will I need to do (if anything) when the new SharePoint server is installed to keep using the SPServices library?  Primarily I’m using GetListItems and Query operations.

and here is my answer:

Unfortunately, the answer will have to be the dreaded “it depends”.

The SOAP Web Services are still present in SharePoint 2013, though Microsoft has decided to deprecate them. What that will mean in reality is anyone’s guess. There are lots of deprecated pieces of functionality (think sandbox) that would very difficult to remove.

The bigger question is around what you do with the results and such. The DOM in SharePoint 2013 has changed, just as it did from 2007 to 2010. If your code is nice and modular and you are using clean selectors, I would guess that you will have to re-test, perhaps adjust the code, and most likely adjust the CSS.

Keep in mind that many of the adjustments may be outside SPServices itself and just in your own jQuery / JavaScript and CSS.

The upshot of this is that there simply can’t be a simple answer. The core of SPServices will work in 2013. My testing hasn’t been extensive enough to test every single operation, but the SOAP Web Services are there in 2013 and they work the same.

As for the value-added functions, it looks like the list forms in 2013 are essentially the same as in 2010 and even 2007. It’s mind-boggling, isn’t it? One would think – at least I do - that there were so many opportunities for improvement.  I was extremely surprised when this was the case going from 2007 to 2010, and I’m incredulous that the forms are the same going from 2010 to 2013. But so it is.

The good news about having those frumpy forms stay the same is that the value-added functions that enhance them will generally work. Again, my testing hasn’t been extensive, but the functions everyone know and love – SPCascadeDropdowns being the primary one – seem to work fine. Of course, the whole iitem creation and editing expereience has been widened so that there are more possible ways to accomplish them.

Another question I often get is “Have you rewritten SPServices for 2013?” The answer for that is “no”, as there isn’t really any need, based on the details above. However, if you decide to use SPServices with SharePoint 2013 and you run into issues, I *definitely* want to hear about them – post to the SPServices Discussions. I think SPServices has a good few years left in it, and I don’t want there to be bugs with 2013 or 2007 or 2010 if I’m able to fix them.

I’m in the midst of working on a new release of SPServices that will return jQuery .Deferred() objects (aka promises) from SPServices calls. (See SPServices 2013.01ALPHA4 Returns a Deferred Object (Promise)) One of the reasons I’m doing this is that it will bring SPServices forward to reflect better coding practices if or when you may decide to move to REST-based calls to SharePoint instead of using SPServices to make SOAP calls. In other words, even if you decide to stick with SPServices, you’ll be using an approach that will make it easier to move forward with SharePoint as it evolves.

Remember that SPServices is open source. I rely on you, the community that uses it, to let me know what works and what doesn’t. There is just not enough time in a day for me to test everything. If I hear about problems, I try to get fixes out as soon as I can, but this is free software, folks. The best situation is one where someone runs into a problem, they devise a fix, and I get the fix to incorporate into future versions. That was my understanding about open source when I got started with SPServices in 2009, but in reality, it just isn’t true most of the time. Wouldn’t it be nice if it were, though?

If you have thoughts or concerns about all this, by all means let me know, preferably in the SPServices Discussions. (Have I mentioned that is the best place to get help with SPServices) Comments here are always welcome as well.

Continue reading »]]> David Broussard put up an interesting post on his blog the other day called MicroWork Is Just Work By Smaller Name. In the post, David says:

This is the promise of Social Business, or as I like to call it MicroWorking. When I am standing in line at the grocery store, I am often on my Smart Phone reading emails, or on Facebook, or Texting with someone…in short I am doing something in what was previously unusable time. This is the real potential of MicroWork or Social Business…turning unproductive time into productive time…especially when we are not at our desks.

• Sitting in a conference room waiting for a meeting to start
• Walking from one part of the building to another
• Waiting in the lunch line
• Walking from the car to the office
• Getting a cup of coffee at the Starbucks

These are times that are often unproductive that can be made productive via MicroWork. What can we do in those time frames?

• Approve invoices
• Enter a timesheets
• Review a document
• Answer a question
• Delegate a task to another person

You get the idea…the idea here is to figure out a bit of work that can be performed and turn it into a MicroWork task. In this manner we accomplish two very important things. First we make our workers more productive and second giving them work in a format that is easy to use and fits in with their lives.

I would recommend reading the entire post, as it’s quite interesting; this is just the tail end of it.

After reading the post, I was moved to add my $.02.

MicroWork is absolutely the current state of things, at least among my social circles (both words in their traditional meanings). I think it’s yet to be seen if or when there will be a backlash to this filling in all of the nooks and crannies of our time.

I know that my days now often feel too full. There’s precious little time I can set aside for self-reflection or family time where I don’t have my iPhone in my pocket. It’s become a bit of a crack high to pull it out of my pocket to see what’s going on with Facebook, Twitter, Yammer, email, etc. (in no particular order).

This is a microhell of my own doing of course.I could simply choose to shut it all off, but that gets harder all the time, as our work and “social” lives intertwine. One could posit that we are giving up too much of ourselves for the perceived benefit of others – a constant striving to belong in too many places.

The other downside I see is that work and non-work now coexist in microbursts. We are devoting increasingly smaller time slices with our attention to any particular “social” activity. If things like approving an invoice are in the “social” mix, are we paying enough attention to the details to make an informed decision? Or are those important (they are important if we need to do them, correct?) decisions becoming relegated to the importance level of clicking a “Like” button?

This new world order is undoubtedly here to stay in some form. Time will show us how it evolves from where it is, regardless what the tool makers would like to see us do.

In his response to my comment (also very worth reading), David recommended the book Hamlet’s BlackBerry: A Practical Philosophy for Building a Good Life in the Digital Age. It’s already on my Kindle, ready to go.

Continue reading »]]> This entry is part 12 of 13 in the series SPServices Stories

Introduction

Ben Tedder (@bentedder) has long been a fan of SPServices and his writing about it is great, to boot. I liked this post back when Ben first put it up on his blog because it really does tell a story, and SPServices plays a significant role in it.

Ben has built quite a few real-world solutions using SPServices that transcend what SharePoint can do. By using SharePoint as the back end data repository, Ben has managed to create solutions that provide a great user experience and are far more efficient than SharePoint can be when building through the UI. He does this without deploying any server-side code, just as I always aspire to do. Great solutions with minimal footprints.

Thanks to Ben for letting me republish this post from his blog.

SharePoint and jQuery SPServices in Education: A Case Study

Continue reading »]]> I’m driven to write this post after reading one by James Dellow over the weekend called Gartner: Yammer or SharePoint? The choice is still unclear.

The choice indeed may still seem unclear, but I think that the statement addresses the wrong questions.

In my opinion (I’m the only one here – you talkin’ to me?), we should stop talking about the “social” thing as a thing. Christian Buckley (@buckleyplanet) beat me to the punch in his comment on the post:

Part of the problem here is that we are still dealing with a serious learning curve on what social is, exactly, and how it fits into an organization’s culture and business needs. Microsoft needs to both education and evangelize a vision+roadmap that has not yet been articulated. That’s a tough row to hoe.

Rather than saying we should use SharePoint or Yammer for “social”, we should instead be talking about the specific things that we want people in a given population to be doing (or at least capable of doing – getting them to do it is a different challenge).

Once we understand what that might look like – and the goals will vary greatly by organization – we can start to make intelligent decisions about the right technologies for that particular case. Saying we need “social” means basically nothing. Or anything. Or something in between.

The slide that James showed from the Gartner webinar which prompted *his* post (and no, I did not see the webinar) starts to get at that set of questions, but I would say that it is still from the reverse angle. It’s useful, but it isn’t the point.

This sort of tool-driven analysis almost always leads to disappointment in my experience. It’s an easy way out for those who don’t want to do the harder work of understanding what the organization actually needs – and maybe even wants – by saying that this tool or that tool is the better one without clearly understanding the underlying problems in the first place.

Technologies can only support the kind of things that people are lumping under the social sobriquet to a certain degree. The concept of being social covers many things, but note that none of them mention SharePoint or Yammer:

so·cial [soh-shuhl] adjective (from Dictionary.com)
1. pertaining to, devoted to, or characterized by friendly companionship or relations: a social club.
2. seeking or enjoying the companionship of others; friendly; sociable; gregarious.
3. of, pertaining to, connected with, or suited to polite or fashionable society: a social event.
4. living or disposed to live in companionship with others or in a community, rather than in isolation: People are social beings.
5. of or pertaining to human society, especially as a body divided into classes according to status: social rank

I’ve already stopped saying “social” as much as I can – which isn’t easy - opting instead to push people to tell me what they want to accomplish. It makes most of them uncomfortable (or they say “You know, *social*), but in the long run these artificial packaging exercises are the wrong way to go.

Decide what you want to do, then decide which tool is the best match to solve that set of problems.

Continue reading »]]>

Dave Coleman (@davecoleman146davecoleman146) and I had a grand time – Dave and I always seem to have a grand time – with the webinar we did yesterday. It was part of the MetaVis SharePoint MVP Webinars Series and I presented Creating a Great User Experience in SharePoint. It was somewhat a reprise of my SPTechCon session from San Francisco a few weeks ago, but with some tweaks and additions based on the feedback I got afterward. (One of the benefits of doing a session multiple times is that I get to refine it as I go.)

Thanks go out to Dave and the MetaVis team for giving me this opportunity to present.

My slides are available on SlideShare.

And here’s the video:

Continue reading »]]> This entry is part 11 of 13 in the series SPServices Stories

Introduction

I ran across this SPServices Story in a post on the blog at CTS. The author of the post, Matt Ingle, is a Senior Consultant at CTS in Birmingham, AL. According to Matt, he is a team lead for a group called the SharePoint Factory. The SharePoint Factory team roles correspond to the various areas of the SharePoint family of products. This role-based approach allows for technical depth and specialization within the SharePoint functional areas.

SPServices has a function called SPRedirectWithID, but it’s problematic in SharePoint 2010 due to the dialogs that SharePoint uses to show the list forms. You can ensure that the function works just fine by turning off the dialogs, but that’s not always desirable. I’d turn them all off if I had my druthers because most list forms require more screen real estate than the dialogs provide without a lot of scrolling. They also don’t obviate the need for a ca-chunk postback when you save the item.

Given this state of things, Matt came up with a way to accomplish a similar thing in a different way. Here’s Matt’s take on the task. It’s a nice way to go if your information architecture is very clear and you know that your forms won’t change much, if at all, since Matt is bypassing the simple NewForm we get for “free” from SharePoint. On the other hand, this type of approach may become more common as we move forward with SharePoint and HTML5 compatibility.

Using SPServices and jQuery to Perform a Redirect from a SharePoint List NewForm to EditForm

By Matt Ingle

Problem: In SP 2010, you have a parent list and multiple child lists connected through Lookup columns. You have created the custom Display and Edit forms for the parent list containing XsltListView web parts for the child lists filtered through query string view parameters. Refer to this article for more information on this solution.

Now you need a way to redirect the user from the NewForm to the EditForm after saving the parent list item while passing the newly created item ID as a query string parameter. The problem is there is no way to do this out-of-the-box (OOB).

Solution: You can use jQuery and the SPServices library from CodePlex to utilize SharePoint’s Web Services. The two operations I will use in the following example are GetUserInfo and UpdateListItems.

Note: Be sure to read the IMPORTANT NOTES on the SPServices Home page about supported versions. This example will use the (“[nodeName='z:row']“) syntax which no longer works with jQuery 1.7. I will be using jQuery 1.6.2 and SPServices 0.6.2 in my example. However, if you want to use 1.7, an alternative solution to using this syntax can be found here by Steve Workman. [ed: Use the SPFilterNode function, which will work with any version of jQuery: .SPFilterNode("z:row") and ensures cross-browser compatibility.]

By using the SPServices operation to create the new list item you will be bypassing the OOB Save process for the SharePoint list form. This means that you will lose the validation on the form and will need to create your own validation logic using jQuery. In the following example I will be implementing the required field validation for my list fields.

Example: At this point you should already have a custom NewForm for your parent list.

Below each field to be displayed on the form, add some text wrapped in a <span> tag with unique ids that will be used to display our custom validation message. I worded mine the same as the text displayed by SharePoint. Notice my id for the <span> tag below is ‘valBU’. We will use jQuery later to select this element by the id.

Additionally, we will need to add a custom button to our form in place of the OOB Save button. This will allow us to attach our custom code to the Save button’s click event.

Next, add a Content Editor WebPart (CEWP) directly below the DataFormWebPart. This will hold our jQuery/SPServices script.

In the CEWP, add the script references to the jQuery and SPServices libraries. I uploaded mine in a new ‘Scripts’ folder stored in the ‘Style Library’ folder so that it is accessible to other pages in the site as needed.

To begin the script, add code to hide the text containing our custom validation messages. Place this code in the $(document).ready function. Next, add a line to attach the method CreateNewItem to the Save button’s click event.

Next, we can implement our custom validation logic. The following method will be called in our CreateNewItem method to validate our form before creating the new item. It starts by using jQuery selectors to obtain the values of the list fields on the form. We can use the ‘title’ attribute for the selectors which contains the name of the list field. In my example, I have 2 drop-down list boxes so I am looking for select elements. For a normal text field you would look for input elements.

For a PeoplePicker, the selector used is a little different. There are different ways to obtain this value, but for our purposes (looking for a single PeoplePicker on the page) you can just look for a textarea element with the title ‘People Picker’. If you have multiple PeoplePickers on the form then you would need to research a way to be more selective. [ed: You can use the SPFindPeoplePicker function in SPServices for this.]

When you have an empty PeoplePicker value you will get ’&#160;’ which is the HTML code for a non-breaking space. Simply check for this value versus an empty string as done for the other fields.

This method counts the number of empty fields and toggles display of the custom validation messages. If there are no empty required fields then it returns true, false otherwise.

Now we can implement the CreateNewItem method. First, use jQuery to select the form fields and obtain the values.

Again, we need to do something different for the PeoplePicker. The value of the PeoplePicker contains a lot of stuff we don’t really need so we have to parse through it to find the user login name.

With this value stored in the ‘buFinContollerPerson’ variable, we will supply it to the ‘userLoginName’ parameter for the GetUserInfo operation. This will be a value like ‘EXT\mingle’.

We are calling the GetUserInfo operation in order to get the correct format needed to save the PeoplePicker value to the list. This format is ’37;#Matt Ingle’ (<UserID>;#<UserName>).

To complete the CreateNewItem method we will call the UpdateListItems method. To specify the creation of a new list item you need to specify “New” for the batchCmd parameter. In addition, supply the list display name (one shown in UI) for the listName parameter. The values to be submitted for the new list item are specified as value pairs in the valuepairs parameter.

Note:We are supplying the fullUserName obtained from the GetUserInfo operation as the value for the PeoplePicker field BUFinContollerPerson.

Once the operation has completed we will parse the XML response to find the newly created item ID. This is where we use the (“[nodeName='z:row']“) syntax. This value is supplied for the ID query string parameter to redirect the user to the EditForm.

Also notice the <div> tag below the <script> tag. This is where you can specify the location of the debug output for the SPServices operations. Simply uncomment the calls to SPDebugXMLHttpResult to see the operation results displayed. Be sure to comment out the redirect though when debugging, otherwise you will not stay on the page to see the results. :-)

Continue reading »]]>

Important!

Mark Miller (@EUSP) and I did a webinar on Friday, March 15, 2013 at  to show the demo again and take questions about how we built it. If you’d like to look at the demo yourself, check out the publicly available page on NothingButSharePoint.com. The video is embedded below.

It’s not every day that I get to create something in SharePoint with a Magic button.

I few weeks ago, Mark Miller pinged me asking if I’d be interested in helping him with a demo for his keynote at SPTechCon. When Mark asks, I tend to ask “how high” simply because it’s usually something fun. Sometimes, it’s even useful.

The basic idea was to show a social dashboard in SharePoint without letting on that we were using SharePoint. As you might imagine, none of this went along as linearly as I’m going to describe it. We tried various different things, added and removed columns, and widgets, etc. What I’ll describe is the end result.

First, I knew I wanted to use jQuery, jQueryUI, and SPServices, so I took a copy of default.aspx in a basic Team Site and added the following references. (Yes, I prefer the old Web Part Page over the Wiki pages. It’s much easier to work with. The Wiki pages tend to vomit markup all over what I do.)

<link href="Scripts/social_home_page.css" rel="stylesheet" type="text/css" />
<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link href="/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -- >
<script type="text/javascript" src="/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript" src="/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>
<!--<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>-->
<script type="text/javascript" src="Scripts/social_home_page.js"></script>

Next, I altered the markup for the page in SharePoint Designer. This was a demo, so there was zero concern about repeatability, of course. It’s nice to have that sort of freedom once in a while. By default, the page has a table with two columns set to 70% (left) and 30% (right) width. I simply changed that markup to have four columns, each with 25% width. In each of the two new table columns, I added a Web Part Zone. I wanted to drop as much of the social stuff as I could into the page using Content Editor Web Parts so that I could explain it more easily, like in this blog post. In edit mode, the page looked something like this: Next I added some CSS to the social_home_page.css file:

#s4-ribbonrow {
  display:none;
}
.s4-titlerowhidetitle {
  display:none;
}
#s4-leftpanel {
  display:none;
}
#MSO_ContentTable {
  margin-left:0;
}
#MSO_ContentTable table td {
  padding:3px;
}

This simple CSS removed all of the chrome we normally see on the page. In other words, we’ve removed the SharePoint from SharePoint to a large degree. The ribbon, title area, and Quick Launch are all totally hidden. (No screen shot for this – you wouldn’t see anything!) At this point, I had a page that looked like a big white nothing in the browser. Time to add the fun stuff. In Twitter, you can create widgets that display tweets from Twitter much like you can create different streams in HootSuite or TweetDeck. You can find this capability in Settings: I created three different widgets:

• search stream for “EUSP”
• search stream for “SPTechCon”, and
• search stream for “SharePoint”

There are a few settings which give you basic control over the look and feel. If we were implementing this “for real”, it would probably make sense to make calls against the Twitter API and get the raw data so that we would have full control over the markup and visuals. When you create the widget, you get a little snippet of markup and script which you can embed in a Web page. Those snippets are very simple. Here’s what the snippet for EUSP looks like:

<a class="twitter-timeline" href="https://twitter.com/search?q=EUSP" data-widget-id="306449761781817344"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

I put each snippet into a TXT file so that I could reference them in CEWPs. For the EUSP stream, I have a TXT file called twitter_search_eusp.txt in a Document library, and I just point to that file in the CEWP’s Content Link. This gets the three Twitter streams into the page:

We also wanted to show something from Yammer, since it plays so importantly into Microsoft’s social story. While there are Yammer Web Parts available, I decided to go the widget route here as well. If you look under Apps in the Yammer Web interface, you’ll find Yammer Embed, which eventually takes you to the Yammer Embed page. There, you’ll find a PDF document that explains how to embed a Yammer feed. (Note to the Yammer folks: This isn’t a very clear process. Opportunity for improvement.)

Here’s what I ended up with for the SPYam feed. Note that I created my own id for the container so that it would fit into my page logic easily.

<script data-app-id="hyB2pTvrL36Y50py8EWj6A" src="https://assets.yammer.com/platform/yam.js"></script>
<script>
yam.connect.embedFeed({
  container: '#yammer-spyam-embedded-feed',
  network: 'spyam' // update with your own
});
</script>
<div id="yammer-spyam-embedded-feed"></div>

For some reason, the Yammer authentication mechanism simply won’t work in my page in Internet Explorer 9, so I switched to Firefox at this point, where I had no problems. (Another place for improvement, Yammer folks. However, it may well be that my IE9 is just sick.)

Now we have all four streams we want in the page, at least in Firefox, for me.

I had seen some Twitter traffic about Dan McPherson’s lastest entries in the SharePoint Games under the Leap moniker. There are two offerings right now: LeapBackup and LeapMessages. Mark and I thought it would be cool if we could use LeapMessages to send a text message with the contents of a Tweet. I can imagine several use cases for this. Perhaps you work at Burger King, your Twitter account is hacked, and you need to notify the execs…

LeapMessages is really simple to implement. You just sign up on the Leap site, give the site URL and your Office365 credentials (it only works on Office365 right now), and Leap creates a list in your site called LeapMessages. If you add an item to that list, the LeapMessages engine grabs it (it polls every 30 seconds) and sends it out as a text from their gateway. Easy-peasy.

To implement this, I pulled a demo cheat. Since it takes a little time to load up the three Twitter streams and the Yammer stream, I set it up so that when I hovered over the Magic button (see below for more info on the button), this script would run, adding an SMS link at the bottom of each tweet in the three streams. I just had to wait until the three Twitter streams were loaded before I did the hover trick.

$("div.showSharePoint").hover(function () {

  if (!loadedSMS) {

    loadedSMS = true;

    $("iframe[id^='twitter-widget-']").contents().find("ul.tweet-actions").prepend("<ul><li><a class="SMS-send">SMS</a></li></ul>");
    $("iframe[id^='twitter-widget-']").contents().find(".SMS-send").click(function (e) {

      e.preventDefault();
      var thisTweet = $(this).closest("div.footer").closest("li");
      var thisTweetText = thisTweet.find("div.e-entry-content").text().trim();
      var thisTweetFullName = thisTweet.find("div.header span.full-name").text().trim();
      var thisTweetNickName = thisTweet.find("div.header span.p-nickname").text().trim();
      messageText.val("Interesting tweet from " + thisTweetFullName + " (" + thisTweetNickName + ") " + thisTweetText);
      countChars();

      $("#dialog").dialog("open");

    });
  }

}, function () {
  // Nothing to do
});

I added this markup at the bottom of the page for the dialog that would pop up when I clicked the SMS links.

<div id="dialog" title="Send SMS Message">
  <p class="validateTips">All fields are required.</p>
  <head>
    <meta name="WebPartPageExpansion" content="full" />
  </head>
  <form>
    <fieldset>
    <label for="phoneNumber">Phone Number</label>+1
    <input type="text" name="phoneNumber" id="phoneNumber"
    class="text ui-widget-content ui-corner-all" />
    <br />
    <label for="messageText">Message</label>
    <textarea rows="5" cols="40" name="messageText"
    id="messageText" value=""
    class="text ui-widget-content ui-corner-all"></textarea>
    <div id="charCount"></div></fieldset>
  </form>
</div>

When I clicked the SMS link, this script drove the dialog and wrote the entered data into the LeapMessages list using SPServices.

dialogDiv.dialog({
  autoOpen : false,
  height : 300,
  width : 500,
  modal : true,
  buttons : {
    "Send Message" : function () {
      var bValid = true;
      allFields.removeClass("ui-state-error");
      bValid = bValid && checkLength(phoneNumber, "Phone number", 10);
      bValid = bValid && checkRegexp(phoneNumber, /^([0-9])+$/i, "Phone number can only contain digits.");
      // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
      if (bValid) {
        // Send the SMS message
        $().SPServices({
          operation : "UpdateListItems",
          async : false,
          batchCmd : "New",
          listName : "LeapMessages",
          valuepairs : [
            ["ReceiverMobileNumber", "+1" + phoneNumber.val()],
            ["Message", encodeXml(messageText.val())]
          ],
          completefunc : function (xData, Status) {}
        });
        $(this).dialog("close");
      }
    },
    Cancel : function () {
      $(this).dialog("close");
    }
  },
  close : function () {
    allFields.val("").removeClass("ui-state-error");
  }
});

There are a few helper functions referenced above, and here they are:

var loadedSMS = false;

var dialogDiv = $("#dialog");
var phoneNumber = $("#phoneNumber"),
messageText = $("#messageText"),
allFields = $([]).add(phoneNumber).add(messageText),
tips = $(".validateTips");

function checkLength(o, n, num) {
  if (o.val().length > num || o.val().length < num) {
    o.addClass("ui-state-error");
    updateTips(n + " must be  " + num + " digits.");
    return false;
  } else {
    return true;
  }
}

function checkRegexp(o, regexp, n) {
  if (!(regexp.test(o.val()))) {
    o.addClass("ui-state-error");
    updateTips(n);
    return false;
  } else {
    return true;
  }
}

function updateTips(t) {
  tips.text(t).addClass("ui-state-highlight");
  setTimeout(function () {
    tips.removeClass("ui-state-highlight", 1500);
  }, 500);
}

function countChars() {
  var messageLen = messageText.val().length;
  var errorClass = messageLen > 160 ? "class='ui-state-error'" : "";
  $("#charCount").html("You have used <span " + errorClass + " >" + messageLen + "</span> of 160 characters");
}
messageText.keyup(function () {
  countChars();
});

I decided to add one last piece of functionality. I couldn’t figure out how frequent the Twitter polling was, but when there was a new tweet in any any of the streams, I wanted to highlight it. To do this, I added this bit of script. It ran every three seconds to see if anything new had shown up, and if it had, it highlighted the counter at the top of each Twitter stream.

// Show tweet counters
setInterval("countTweets()", 3000);

function countTweets() {
  $("iframe[id^='twitter-widget-']").each(function () {
    var tweetCount = $(this).contents().find("li.tweet").length;
    var thisCounter = $(this).prev(".tweet-counter");
    if (thisCounter.length === 1) {
      var currCount = thisCounter.html();
      if (tweetCount != currCount) {
        thisCounter.addClass("ui-state-highlight");
        setTimeout(function () {
          thisCounter.removeClass("ui-state-highlight", 1500);
        }, 10000);
      }

      thisCounter.html(tweetCount);
    } else {
      $(this).before("<div class="tweet-counter">" + tweetCount + "</div>");
    }
  });
}

The Magic button is just a div. Yes, I violated best practices by making it a div instead of a real button. Don’t try this at home.

<div class="showSharePoint">Magic</div>

The Magic button contains the reveal. When I clicked on it, this script ran, unveiling the fact that the page was, in fact, a SharePoint page. There were very few oohs or aaahs that I could hear, which was a little disappointing, but hey, maybe I pushed it too fast or something.

// Set up the Magic button
$("div.showSharePoint").click(function () {

  var thisValue = $(this).text();

  if (thisValue == "Magic") {
    $("#RibbonContainer").hide();
    $("#s4-ribbonrow").slideDown(5000);
    $("#RibbonContainer").slideDown(5000, function () {
      $(this).fadeIn(1000)
    });
    $(".s4-titlerowhidetitle").fadeIn(5000);
    $("#s4-leftpanel").fadeIn(5000);
    $("#MSO_ContentTable").animate({
      "margin-left" : "150px"
    }, 5000, function () {
      // animation complete
    });
    $(this).text("No Magic");
  } else {
    $("#RibbonContainer").slideUp(5000, function () {
      $(this).fadeOut(1000)
    });
    $("#s4-ribbonrow").slideUp(5000);
    $(".s4-titlerowhidetitle").slideUp(5000);
    $("#s4-leftpanel").hide();
    $("#MSO_ContentTable").animate({
      "margin-left" : "0px"
    }, 5000, function () {
      // animation complete
    });
    $(this).text("Magic");

  }

});

So there you have it. I’m sure I’ve left some bits and bobs out of this in trying to make it consumable here, but I think I’ve gotten most of the important parts. All in good fun, and hopefully it got the message across that SharePoint doesn’t have to look like SharePoint and that we can do useful social stuff in SharePoint in many cool ways.

I’ve thought of a few neat things we could do with this, like storing the snippets in a SharePoint list and letting the user select which ones they want to see in their version of the page, dragging and dropping the streams into the order they like, and saving their settings for when they return. The possibilities with this stuff are really endless, depending on what you want to accomplish.

Have fun!

Continue reading »]]> I’ve just posted a new alpha (ALPHA4) for SPServices 2013.01. This alpha implements the return of a deferred object, aka a promise, as well as executing a completefunc (if provided) for backward compatibility. Note that the deferred object capability was introduced in jQuery 1.5, so this version of SPServices requires that version or greater. I’ve done my initial testing with jQuery 1.8.2.

So, what does this mean to you, the SPServices user? Well, in the short term for most of you it may not mean anything unless you understand the first paragraph above. If you do, I could really use some help in testing the deferred object capability.

Here’s how I’ve implemented it. There are two big differences in the core SPServices function. First, I’ve set it up so that it runs a completefunc if one is provided, just has it always has, but also returns a promise. This means the code has gone from this:

var cachedXML;
var status = null;

if(opt.cacheXML) {
  cachedXML = $("body").data(msg);
}

if(cachedXML === undefined) {
  // Make the Ajax call
  $.ajax({
    url: ajaxURL,                      // The relative URL for the AJAX call
    async: opt.async,                    // By default, the AJAX calls are asynchronous.  You can specify false to require a synchronous call.
    beforeSend: function (xhr) {              // Before sending the msg, need to send the request header
      // If we need to pass the SOAPAction, do so
      if(WSops[opt.operation][1]) {
        xhr.setRequestHeader("SOAPAction", SOAPAction);
      }
    },
    type: "POST",                      // This is a POST
    data: msg,                        // Here is the SOAP request we've built above
    dataType: "xml",                    // We're getting XML; tell jQuery so that it doesn't need to do a best guess
    contentType: "text/xml;charset='utf-8'",        // and this is its content type
    complete: function(xData, Status) {
      if(opt.cacheXML) {
        $("body").data(msg, xData);        // Cache the results
      }
      cachedXML = xData;
      status = Status;
      opt.completefunc(cachedXML, status);        // When the call is complete, do this
    }
  });

} else {
  opt.completefunc(cachedXML, status);            // Call the completefunc
}

to this:

// Check to see if we've already cached the results
var cachedXML;
if(opt.cacheXML) {
  cachedXML = promisesCache[msg];
}

if(typeof cachedXML === "undefined") {

  // Finally, make the Ajax call
  var spservicesPromise = $.ajax({
    // The relative URL for the AJAX call
    url: ajaxURL,
    // By default, the AJAX calls are asynchronous.  You can specify false to require a synchronous call.
    async: opt.async,
    // Before sending the msg, need to send the request header
    beforeSend: function (xhr) {
      // If we need to pass the SOAPAction, do so
      if(WSops[opt.operation][1]) {
        xhr.setRequestHeader("SOAPAction", SOAPAction);
      }
    },
    // Always a POST
    type: "POST",
    // Here is the SOAP request we've built above
    data: msg,
    // We're getting XML; tell jQuery so that it doesn't need to do a best guess
    dataType: "xml",
    // and this is its content type
    contentType: "text/xml;charset='utf-8'",
    complete: function(xData, Status) {
      // When the call is complete, call the completefunc if there is one
      if($.isFunction(opt.completefunc)) {
        opt.completefunc(xData, Status);

      }
    }
  });

  spservicesPromise.then(
    function() {
      // Cache the promise if requested
      if(opt.cacheXML) {
        promisesCache[msg] = spservicesPromise;
      }
    },
    function() {
                                // TODO: Allow for fail function
    }
  );

  // Return the promise
  return spservicesPromise;

} else {
  // Call the completefunc if there is one
  if($.isFunction(opt.completefunc)) {
    opt.completefunc(cachedXML, null);
  }
  // Return the cached promise
  return cachedXML;
}

I don’t usually post the differences in the code in such detail, but I want to get some eyeballs on it so that I can gather yeas or nays on the implementation. I wanted to keep it as clean as possible yet maintain 100% backward capability. I seem to have accomplished both in all of my testing, but I’d love feedback. I’m especially curious what folks think I should do in the failure case of the .then() function. In the past I’ve not done anything, leaving it to the SPServices user to decide what they would like to do. The only two options I can think of are:

1. Add a retry loop to give it a few more shots before giving up
2. Pop up an error message of some sort

Neither of these two options feel right to me. If the .ajax() call fails, in my experience it’s because the server isn’t responding 99.9999% of the time. Trying again won’t usually solve that unless it’s simply a lag after an IISRESET. Popping up an error doesn’t really help, either, as it would have to be some sort of generic “Contact your administrator” nonsense, which I avoid assiduously. Thoughts?

The second change is that I’ve moved from using the .data() jQuery function for caching to caching the promises in an array, as you can see in the code above. This difference should be invisible to all end users and to most developers who use SPServices. However, since it means a difference in how the caching works since I introduced it in v0.7.2, I want to be sure that I get people testing that as well.

Finally, as a further test of the deferred object capability, in this alpha the SPArrangeChoices function also uses the returned promise for GetList as a test to improve the performance and user experience. This function was a good candidate for the first internal test of the new architecture, as it is relatively straightforward and only makes one Web Services call to GetList. I’ll be implementing more uses of promises inside the library as it makes sense before finalizing this release.

So if you’re a hard-core SPServices user, please give this one a test for me. Obviously I’m interested in any regression, but I’d also like to know how the returned promises work for you if you can write new calls against this version. As an illustration of how you can use this new capability, here’s what I’ve done in SPArrangeChoices:

// Rearrange radio buttons or checkboxes in a form from vertical to horizontal display to save page real estate
$.fn.SPServices.SPArrangeChoices = function (options) {

  var opt = $.extend({}, {
    listName: $().SPServices.SPListNameFromUrl(),          // The list name for the current form
    columnName: "",          // The display name of the column in the form
    perRow: 99,            // Maximum number of choices desired per row.
    randomize: false        // If true, randomize the order of the options
  }, options);

  var columnFillInChoice = false;
  var columnOptions = [];
  var out;

  // Get information about columnName from the list to determine if we're allowing fill-in choices
  var thisGetList = $().SPServices({
    operation: "GetList",
    async: false,
    cacheXML: true,
    listName: opt.listName
  });

  // when the promise is available...
  thisGetList.done(function() {
    $(thisGetList.responseXML).find("Field[DisplayName='" + opt.columnName + "']").each(function() {
      // Determine whether columnName allows a fill-in choice
      columnFillInChoice = ($(this).attr("FillInChoice") === "TRUE") ? true : false;
      // Stop looking;we're done
      return false;
    });
[...]
  });
}; // End $.fn.SPServices.SPArrangeChoices

Here’s another chunk of test code that I’ve been using to see that the caching is working as I’d like. The Census Data list on my Demos site has over 3000 items in it, so it’s a good list to test timings with, as it takes a comparatively long time to send the data down the wire. I’ve got the async option and the completefunc commented out below; you can play around with the combinations here as I have if you’d like.

function getIt() {
  var outUl = $("#WSOutput ul");

  logTime(outUl, "Start: ");
  var getListItemsPromise = $().SPServices({
    cacheXML: true,
//    async: false,
    operation: "GetListItems",
    webURL: "/Demos/",
    listName: "Census Data"
//    completefunc: function (xData, Status) {
//      logTime(outUl, "completefunc: " + $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount"));
//    }
  });
  logTime(outUl, "End: ");

    getListItemsPromise.done(function() {
    logTime(outUl, "promiseComplete: " + $(getListItemsPromise.responseXML).SPFilterNode("rs:data").attr("ItemCount"));
    });
}

function logTime(o, t) {
  o.append("<li>" + new Date() + " :: " + t + "</li>");
}

with this simple markup:

<input type="button" onclick="getIt();" value="Get It"/>
<div class="ms-vb" style="width:100%;" id="WSOutput"><ul></ul></div>

Let me know what you think, and stay tuned for more changes in this release, which you can keep track of in the Issue Tracker.

Thanks go to Scot Hillier (@scothillier) for opening my eyes to the value of deferred objects by showing examples in several of his recent sessions.

Continue reading »]]> Well, I’m back in the snowy Northeast after a great four days at SPTechCon San Francisco 2013. As always, the BZ Media folks put on a great show. SPTechCon is consistently well-run and packed with excellent content, vendors, and attendees.

I wanted to post links to the slide decks from my three sessions. They are available on SlideShare.

In addition, as I promised in my third session, here’s a link to a WSP which contains the demos I showed. The WSP is simply the Office365 site saved as a template. In the past, some people have had difficulty instantiating my demo templates in their environments due to activated features not matching. (My rants on the lack of  true portability of SharePoint-based content will probably continue, like Trials and Tribulations: Migrating My Demos Site to Office365, Office365 SharePoint Online Portability Issues Strike Again, and Moving Lists from Hosted WSS 3.0 to Office365 – The ShareGate Way.) If you run into this sort of issue, let me know in the comments and we’ll see what we can work out.

Continue reading »]]> I’ve started really cranking on the new version of SPServices and I’m having a blast, as usual. I’ve learned a few things already, and I thought I’d capture them in a post.

“use strict”;

Just gotta do it. I balked at implementing this previously, as it kept hating my code. Well, it hated my code for a reason. "use strict"; makes you fix some pretty dumb mistakes, and I had quite a few of them. SPServices ran just fine with those mistakes, but by implementing "use strict";, they aren’t even there anymore.

If you want to understand why "use strict"; is a good idea with jQuery, read John Resig’s post ECMAScript 5 Strict Mode, JSON, and More.

JSLint vs. JSHint

As part of my refactoring and housecleaning. I went to run SPServices through JSLint as I usually do. It seems that Douglas Crockford, godfather of JavaScript and author of JSLint, has introduced what amounts to either an annoying new feature or a bug into JSLint. I saw the message “Use spaces, not tabs.” on so many lines that JSLint only was making it through about 1% of my code before giving up.

There’s a post over on StackOverflow called New JSLint errors “use spaces, not tabs” and “unsafe character” wherein someone has tracked down what’s going on. I like using tabs in my code, so I took the hint and the advice in the post and headed over to JSHint instead.

It turns out that JSHint does some nice things that JSLint doesn’t do, anyway. Each message shows the line number as a link which takes you into the code at the proper spot to fix it right there. With JSLint, I was always copy/pasting back and forth to SharePoint Designer to make my fixes. JSHint also color codes your code in the edit window so that you can really do editing. Very nice. The only drawback is that JSHint throws an error when I try to run it in IE9, but I’m fine with working in Firefox.

Refactoring

Every single time I go through SPServices, I do a lot of refactoring. I’m a learning human, and each time I know more (at least I like to think I do) about good coding practices than the last time. Sometimes I really want to slap myself up side the head seeing what I did in some of my earliest efforts. I’m taking this opportunity to refactor things yet again, creating many more complex objects to store things than I had originally. This is a good thing, not a complicating thing, as it will make the code far more manageable and readable over the long haul. (Yes, there is a long haul. SPServices still has a good number of years in it, IMO.)

I’m also taking advantage of some of the SharePoint 2010 context information which is available in JavaScript variables (if we’re in 2010, of course, with nice fall back for 2007). Thanks to John Liu’s post SharePoint – JavaScript current page context info which gave me the impetus for this.

Version Numbers

You may have noticed that I’ve switched my version numbering scheme. I have been confusing myself with the version numbers over the last year or so. On one level I wanted to sort of align with the jQuery version numbers, and on another I was being coy and avoiding ever getting to version 1.0. (I’m asymptotic in my tendencies.)

With this version, I’ve switching the versing scheme altogether. This next version will be 2013.01, meaning the first version in 2013. It moves things away from the jQuery alignment and still is an increasing function, so it should make everyone happy. Except the people who will complain about it.

OK, enough chit chat. Back to work. Mark Miller and I are working on some magic and hijinks for his keynote next week at SPTechCon in San Francisco. Hope to see you there!

Continue reading »]]> This entry is part 10 of 13 in the series SPServices Stories

Introduction

Today’s SPServices Story comes from Prateek Kulkarni in Bengaluru, India. Prateek posted this originally on the C# Corner site as jqGrid Implementation Using SpServices in SharePoint.

As with several of the earlier SPServices Stories posts, I found this one interesting because it shows how to use SPServices with another framework to render the results obtained from the Web Services calls.

I’ve had several people tell me that there isn’t enough “story” to these SPServices Stories. Have a better one? Let me know!

jqGrid with SPServices

This article is regarding implementation of jqGrid(demo) using SPService(CodePlex)

SPService is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities. It works entirely client side and requires no server installation.

Use of SPService and jQuery is best explained at Marc’s blog.

Following Js files are needed for JqGrid Implementation with SPService

• jquery-1.8.2.js
• grid.locale-en.js
• jquery.jqGrid.min.js  // Structuring jqGrid
• json2-min.js  // Parsing data to json format
• jquery.SPServices-0.7.2.js  // For getting the list items

Css file required

• ui.jqgrid.css  //Style sheet of Grid

HTML controls for jqGrid are as mentioned below.

<div id='tblMain' style="float:left">
  <table  id="list" ></table>
  <div id="pager" style="text-align:center;"></div>
</div>

Loading JqGrid on the page load:

jQuery("#list").jqGrid({
  datatype: GetMyData,
  colNames:["Project ID","Project Name","Delivery Manager","ApprovalStatus"],
  colModel:[{name:'ProjectId',index:'ProjectId',align:'left',sortable: true},
            {name:'ProjectName',index:'ProjectName',align:'left',sortable: true },
          {name:'DeliveryManager',index:'DeliveryManager',align:'left',sortable:true},
          {name:'ApprovalStatus',index:'ApprovalStatus',align: 'left',sortable: true }
                       ],
  pager: true,
  pager: '#pager',
  pageinput: true,
  rowNum: 5,
  rowList: [5, 10, 20, 50, 100],
  sortname: 'ApprovalStatus',
  sortorder: "asc",
  viewrecords: true,
  autowidth: true,
  emptyrecords: "No records to view",
  loadtext: "Loading..."
});

In the above jqGrid load function I have mentioned the datatype for the grid as GetMyData() which is a function that gets triggerred first.

The GetMyData method has function GetDataOnLoad which uses the SpServices which has the basic operation of getting the list items i.e. GetListItems, which need optional CAML Query property which will fetch the data from list with some WHERE clause.

In the code I have a list called ProjectDetailsList which will contain details of some projects which are inserted by some Project Manager or delivery manager. So the requirement was when a user log in to the system I should get the current login user name and pass the same user name to the “where” clause of query so the grid will contain data of projects to which the current logged in user is assigned as PM or DM.

To get the current login user am using SpServices Operation SpGetCurrentUser.

The method GetTheOrderByType function will make the query part for SpServices.

The functions code is as follows:

function ForGettingUserName() {
  var userName = $().SPServices.SPGetCurrentUser({
      fieldName : "Title",
      debug : false
    });
  return userName;
}

function GetMyData() {
  sortIdexName = jQuery("#list").getGridParam("sortname"); //Maintaining Consitant SortName after the Sortcol event
  sortOrderName = jQuery("#list").getGridParam("sortorder"); //Maintaining Consistant Sort Order
  Query = GetTheOrderByType(sortIdexName, sortOrderName);
  var CAMLViewFields = "<ViewFields>" +
     + "<FieldRef Name='projectName' /><FieldRef Name='projectID' />"
     + "<FieldRef Name='Title' /><FieldRef Name='deliveryManager' />"
     + "<FieldRef Name='projectSQA' /><FieldRef Name='approvalStatus' />"
     + "<FieldRef Name='projectStartDate' /><FieldRef Name='projectEndDate' />"
     + "<FieldRef Name='sqasiteurl' /><FieldRef Name='ID' />"
     + "</ViewFields>";
  GetDataOnLoad(Query, CAMLViewFields);
}
Function for Getting the Query Type and the particular WHERE CLAUSE TO send the Query to GetListItem function
function GetTheOrderByType(index, sortOrder, userName) {
  var OrderByType;
  if (index == "ProjectName") {
    if (sortOrder == "desc") {
      OrderByType = "<Query>" +
         + "<Where><Or>" + "<Eq>" + "<FieldRef Name='deliveryManager'/><Value Type='Text'>"
         + userName + "</Value>" + "</Eq>"
         + "<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
         + userName + "</Value></Eq>" + "</Or></Where>" +
         + "<OrderBy><FieldRef  Name='projectName' Ascending='FALSE' /></OrderBy>" +
         + "</Query>";
    } else {
      OrderByType = "<Query>" +
         + "<Where><Or>" + "<Eq>" + "<FieldRef Name='deliveryManager'/><Value Type='Text'>"
         + userName + "</Value>" + "</Eq>"
         + "<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
         + userName + "</Value></Eq>" + "</Or></Where>" +
         + "<OrderBy><FieldRef  Name='projectName' Ascending='FALSE' /></OrderBy>" +
         + "</Query>";
    }
  } else if (index == "ApprovalStatus") {
    if (sortOrder == "desc") {
      OrderByType = "<Query>" +
         + "<Where><Or>" + "<Eq>" + "<FieldRef Name='deliveryManager'/><Value Type='Text'>"
         + userName + "</Value>" + "</Eq>"
         + "<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
         + userName + "</Value></Eq>" + "</Or></Where>" +
         + "<OrderBy><FieldRef  Name='approvalStatus' Ascending='FALSE' /></OrderBy>" +
         + "</Query>";
    } else {
      OrderByType = "<Query>" +
         + "<Where><Or>" + "<Eq>" + "<FieldRef Name='deliveryManager'/><Value Type='Text'>"
         + userName + "</Value>" + "</Eq>"
         + "<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
         + userName + "</Value></Eq>" + "</Or></Where>" +
         + "<OrderBy><FieldRef  Name='approvalStatus' Ascending='FALSE' /></OrderBy>" +
         + "</Query>";
    }
    return OrderByType;
  }

  //This function gets the data from List using SpServices
  Function GetDataOnLoad(Query, CAMLViewFields) {
    $().SPServices({
      operation : "GetListItems",
      async : false,
      listName : "ProjectDetailsList",
      CAMLQuery : Query,
      CAMLViewFields : CAMLViewFields,
      completefunc : processResult
    });
  }

The processResult is the function which formats the data which can be converted to Json and adds to the JqGrid.
The reason of formatting of data in the following particular format is to make it readable by the Json parser which is json2.js file. I had implemented the same JqGrid in asp.net application with AJAX calls where it was returning the data in this format and some other bloggers also used the same data format in the MVC or asp.net application with the help for JsonHelper class which mainly formats the data returned from the DB

//Processing the XML result to formatted Json so that We can bind data to grid in Json format
function processResult(xData, status) {
  var counter = 0; // Gets the total number of records retrieved from the list (We can also use xData.ItemCount method for counting the number of rows in the data )
  var newJqData = "";

  $(xData.responseXML).SPFilterNode("z:row").each(function () {

    var JqData;
    if (counter == 0) {
      JqData = "{id:'" + $(this).attr("ows_projectID") + "',"
         + "cell:[" + "'" + $(this).attr("ows_projectID") + "','" +
        $(this).attr("ows_projectName") + "','" +
        $(this).attr("ows_deliveryManager") + "','," +
        "]}";
      newJqData = newJqData + JqData;
      counter = counter + 1;
    } else {
      var JqData = "{id:'" + $(this).attr("ows_projectID") + "',"
         + "cell:[" + "'" + $(this).attr("ows_projectID") + "','" +
        $(this).attr("ows_projectName") + "','" +
        $(this).attr("ows_deliveryManager") + "','," +
        "]}";
      newJqData = newJqData + JqData;
      counter = counter + 1;
    }

  });
  FinalDataForGrid(newJqData, counter);
}

That’s it. Add the data to the grid with the div control and the other page number calculation is for showing the pager.

function FinalDataForGrid(jqData, resultCount) {
  dataFromList = jqData.substring(0, jqData.length - 1);
  var currentValue = jQuery("#list").getGridParam('rowNum');
  var totalPages = Math.ceil(resultCount / currentValue);
  var PageNumber = jQuery("#list").getGridParam("page"); // Current page number selected in the selection box of the JqGrid
  //formatting rows
  newStr = "{total:" + '"' + totalPages + '"' + "," + "page:" + '"' + PageNumber + '"' + ","
     + "records:" + '"'
     + resultCount + '"' + ","
     + "rows:"
     + "[" + dataFromList + "]}";
  var thegrid = jQuery("#list")[0];
  thegrid.addJSONData(JSON.parse(newStr)); //Binding data to the grid which is of JSON Format
}

And the grid works fine and fast on paging, sorting and also even search, we can make the particular column as hyperlink which I will blog in the next part. Sample grid is as follows and this grid has some extra columns then the mentioned in above code

Continue reading »]]> As I gear up to work on the next release of SPServices, I want to make some pretty fundamental changes/improvements to the internal plumbing. What I’m hoping to do with this post is to gather any ideas and feedback that the user community has about the implementation before I go too far with things.

Deferred Object and Promises

In all prior versions, we’ve relied on the completefunc (which I made up) to process the results we get back from a Web Services operation call. In the meantime, jQuery has moved forward significantly.

In jQuery 1.5, we got the first deferred object capabilities. I was loathe to change the internal workings of SPServices at the time because we had a substantial user base, even then.

Now the user base is significantly larger (as of this writing, there have been almost 75,000 [!] total downloads), but I think it’s time to add the deferred capabilities into the core SPServices function. More and more people have been exposed to deferred processing capabilities in script at this point, so it will be less of a shock to existing SPServices users (I hope!).

Oddly, I’ve only had one request (at least that I can remember) to add deferred processing into SPServices. It came from a Codeplex user named MgSam in a thread s/he titled JQuery Deferred compatibility, and I’ll admit that I blew it off a bit when he raised it as a possibility.

My strongest impetus for considering this fundamental architecture shift is having seen Scott Hillier talk several times about Utilizing Promises in SharePoint 2013 Apps. In actual fact, his talk applies to JavaScript (and thus jQuery) development more than it applies to SharePoint 2013 development. We can use the deferred methodology even if we’re running our scripts on SharePoint 2007. It’s a way to manage requests in the script and has little to do with the version of SharePoint.

In doing this, my goal will be to keep full backward compatibility so that all existing code continues to function with no changes, but I may deprecate the current completefunc focused methodology, either in this next release or shortly thereafter.

in the simplest form, it will look something like this (borrowing from MgSam’s example in the thread above):

function myCode(someOtherListId) {
    /* Ideally, I should be able to do this call SPListNameFromUrl asynchronously
     * as well, perhaps add an optional "async" parameter
     * which, if used, returns the jqXHR object and invokes
     * a callback upon completion rather than blocking until
     * the data returns. This is not the main point of this code though.
     */
    var currentListId = $().SPServices.SPListNameFromUrl();

    //Call 1
    var a = $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: currentListId,
        completefunc: function(xData) {
            //Do something useful
        }
    });

    //Call 2
    var b = $().SPServices({
        operation: "GetList",
        async: true,
        listName: currentListId,
        completefunc: function(xData) {
            //Do something useful
        }
     });

     //Call 3
     var c = $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: someOtherListId,
        completefunc: function(xData) {
            //Do something useful
        }
     });

     /* Now I want to do something once all 3
      * asynchronous calls have completed. Under the current
      * model, there's no easy way to do this.
      * I either have to hand-roll some ugly code,
      * or contort my completefuncs so that they work with
      * jQuery's Deferred.
     */
}

Moving toward the deferred object approach will also mean that I’ll replace the simplistic caching mechanism I put into place using the .data() function in v0.7.2. There will be no visible difference in the way it works, but the underlying mechanism will be deferred promises instead.

SharePoint 2007

I’m also considering finally ending development specifically for SharePoint 2007. I’ve continued to use WSS 3.0 as my development environment since the first release of SPServices so that I can “test up” rather than down *and* up.

I still have a lot of people contacting me with questions who are using SharePoint 2007. In fact, some of my best clients are still on SharePoint 2007. It’s still a great platform that works well for many people who are still using it.

That said, there are some capabilities in SharePoint 2010 and now SharePoint 2013 that I haven’t tried to take advantage of because they aren’t there in SharePoint 2007. It isn’t that I want to abandon the SharePoint 2007 folks, but I’m considering making the main focus SharePoint 2010.

I’m very interested in hearing people’s thoughts on that. There’s no easy way for me to know what versions everyone out there has, so chime in.

Version Numbering

These changes will definitely merit a more significant version bump than just going from 0.7.2 to 0.7.3, of course. Is it finally time to ship a 1.0.0? Or maybe I should just decide to go to 5.3.8 or something. The numbers mean nothing, of course, as long as they go in a consistent direction. I’m even toying with 2013.01. Any thoughts on this?

Thanks to everyone out there who uses SPServices, especially those of you who have contacted me to let me know how it has helped you accomplish your business goals. If you have a story to tell, please consider writing it up for my SPServices Stories series. I’m planning to keep that series going as long as there are good stories to tell.

Continue reading »]]> This entry is part 9 of 13 in the series SPServices Stories

Introduction

Here’s another SPServices Stories post that is a bit older and talks about how you can use SPServices with other popular plugins and frameworks. While this is possible with the CSOM, I’ve always found that SPServices provides a much tighter and more controllable syntax. You probably can’t trust me on that, though, since I wrote it.

Phil Harding’s post from March 2012 called SharePoint: Developing with Client-side Technologies: jQuery, REST, SPServices and JsRender caught my eye because in it he explains how he used the popular JsRender with SPServices. Many people want to use rendering frameworks in general or specifically in conjunction with SPServices, and JsRender has been a popular choice. Knockout,js is probably becoming more popular, but JsRender still has its place. You should evaluate the options based on your own business requirements to decide what’s best for you.

Keep in mind that is doesn’t really matter what version of SharePoint you’re working with, as these techniques can work well with SharePoint 2007, 2010, and 2013.

Phil Harding (@phillipharding) is an independent SharePoint consultant from Manchester, UK, specializing in development for the 2007, 2010 and (he’s hoping really really soon) 2013.

Developing with Client-side Technologies: jQuery, REST, SPServices and JsRender

Having recently been immersed in developing client-side functionality for a SharePoint 2007 project I thought I’d share some of the techniques and tools I’ve used in doing so.

The functional requirements in this project are pretty standard CRUD operations;

1. Collect data from the user and create new list items
2. Display and modify existing data
3. Display formatted lists of existing data

In this post we are going to retrieve a set of list items from a SharePoint list and display that data using a technique very similar to that used by ASP.NET data bound/templatized controls.

SPServices.

The premier tool IMHO for interacting with SharePoint 2007 from the client is the SPServices library by @sympmarc, check out the documentation as the library is pretty extensive.

Here we will be using the SPServices GetListItems method which wraps the SharePoint Lists web service.

REST.

If you’re working with SharePoint 2010, you might also consider using the REST interface for retrieving data, although this interface by default returns XML, it can also be configured to return JSON, and the jQuery getJSON() method does exactly that by configuring the $.ajax() call to the REST interface appropriately. Why JSON? Well as with SPServices, using JSON encoded results fits very nicely when using jsRender to render your output markup. Some good examples of how to use the REST interface can be found here.

Choosing a Client Side Data Retrieval Interface

If you’re using SharePoint 2007, your options are (very) limited. By limited I mean, that pretty much your only sane option is SPServices, there are other options of course, 2007 has the [SOAP] List webservice which you could grok against – you’ll have to write a lot of javascript if you want to go that route, but seriously, why bother, SPServices has you more than covered.

If you’re using SharePoint 2010 or 2013, you’ve got the JSOM interface which you can use to read list data, frankly though, given the amount of code you have to write just to read some data, I almost never use the JSOM for this.

SPServices of course is a valid choice to make – as with all things choose the right tool to accomplish your goal. Personally, I tend to use REST when my data needs are typically one-way, i.e. reading, even then I may defer to SPServices if my query is sufficiently complex – the REST interface is pretty damn flexible but it won’t allow you to model complex queries in the way that CAML does.

For updating data back to lists, again you can use REST, JSOM or SPServices. For me, I might typically use JSOM to update list items, sure I can do this using REST, but to do this you’ll have to manage the ETag – another piece of state to maintain (see the Concurrency Management section for more information). I also came across a javascript library recently called data.js, which seems to be a wrapper over OData services, I haven’t used it yet but it definitely looks interesting.

Finally, SPServices has the UpdateListItems method which serves both creating and updating data.

jsRender.

Having retrieved your data from SharePoint, you could of course, write quite a bunch of grungy JavaScript and DOM code to create the rendered display, however there is a much better way, and that is to use something latterly called jQuery Templates, which, like ASP.NET data-bound or templatized controls, allows you to write the markup template for your output and include bits which bind to the data being displayed.

jQuery Templates are officially deprecated in favour of a new but similar technology called jsRender by Boris Moore.

jsRender seems to be gaining a lot of traction and there is a growing amount of information available out there, and the documentation provided by Boris is more than enough to get you going.

Retrieving List Items.

So lets get going, first we’ll write the SPServices code to retrieve a set of list items, which we’ll then iterate over and place into an array of JSON objects (required by jsRender).

function GetListItemData() {
  var container=$('#container');
  $(container).html("");

  // get list data
  var datarows = [];
  $().SPServices({
    operation: "GetListItems",
    webURL:"http://sp2007/sites/demo",
    async: false,
    listName: "The List Title",
    CAMLViewFields:"",
    CAMLQuery:"........",
    completefunc: function(xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var x={
          title: $(this).attr('ows_Title'),
          id: $(this).attr('ows_ID'),
          reviewoutcome: $(this).attr('ows_ReviewOutcome')
        };
        datarows.push(x);
      });
    }
  });
  ..... // display list data
}

Here we use SPServices GetListItems to retrieve the data, amongst other things we supply the following parameters;

1. operation: “GetListItems”
2. Optional webURL parameter, if not supplied SPServices will use the equivalent of SPContext.Current [the current Web]
3. listName: “The List Title”
4. CAMLViewFields: the list of fields we want returned by the query
5. CAMLQuery: the CAML query in the form; “<Query><Where>….</Where><OrderBy>….</OrderBy></Query>”

I also specify a completion function which parses and iterates over the returned rows, creates a JSON object and adds it to an array.

Note: SPServices also provides the SPXmlToJson function which will convert the returned rows to an array of JSON objects.

Next we’ll use jsRender to display the data we just retrieved using the supplied template (#reviewTemplate), in this case the template with id reviewTemplate.

function GetListItemData() {
  var container=$('#container');
  $(container).html("");

  var datarows = [];

  ..... // get list data

  // display list data
  if (datarows.length > 0) {
    $(container).html( $("#reviewTemplate").render(datarows) );
  } else {
    $(container).html("There are no items to display.");
  }
}

The return value from jsRender is then set as the html value of a container DIV or other element.

jsRender Templates.

So what’s a jsRender template? Quite simply it is a <SCRIPT /> block with an ID value and a type set to text/x-jsrender, as shown below.

<script id="reviewTemplate" type="text/x-jsrender">
<TABLE cellSpacing="0" cellPadding="0" width="100%">
  <TBODY>
    <TR>
      <TD style="width:400px">
        <A title="{{:title}}" href="{{:~reviewurl(id)}}">{{:title}}</A>
      </TD>
      <TD style="width:20px">
        {{outcome reviewoutcome /}}
        {{if reviewoutcome=='Undecided' tmpl='#reviewundecided' /}}
        {{if reviewoutcome=='Accepted' tmpl='#reviewaccepted' /}}
        {{if reviewoutcome=='Rejected' tmpl='#reviewrejected' /}}
      </TD>
    </TR>
  </TBODY>
</TABLE>
</script>
<script id="reviewundecided" type="text/x-jsrender">
  <IMG style="" title="this is undecided." border="0" src="http://sp2007/_layouts/images/erg-0.gif" />
</script>
<script id="reviewaccepted" type="text/x-jsrender">
  <IMG style="" title="this was accepted." border="0" src="http://sp2007/_layouts/images/erg-2.gif" />
</script>
<script id="reviewrejected" type="text/x-jsrender">
  <IMG style="" title="this was rejected." border="0" src="http://sp2007/_layouts/images/erg-1.gif" />
</script>

Here we’re showing 4 jsRender templates, reason being that a feature of jsRender allows you to use template composition, i.e. to use different templates to render different parts of the output. In this case we have 3 different templates to render an <IMG…/> element according to the value of the “reviewoutcome” object property (which is the listitems ows_ReviewOutcome column value). To summarise whats going on I’ll briefly describe each of the jsRender features we’re using;

Expression Evaluation / Output an Object Property Value

Use the {{:  expression  }} tag to evaluate an expression or output the property value of the current item, this form does not perform HTML encoding of the output

Use the {{> expression  }} tag to evaluate an expression or output the property value of the current item, this form performs HTML encoding of the output

Call a Custom Helper Function

Use the {{:~ customhelper(expression)  }} tag to call a custom helper function that you have written, which optionally accepts parameters, and returns the desired output – in the sample above we created a helper function called reviewurl to build a composite HREF value for an <A /> element.

See below for help writing a custom helper function.

Conditional Processing : If/Else

Use {{if  expression }}…{{/if}} {{else  expression }}…{{/else}} tags to perform conditional processing or branching of the template – in the sample above we used conditional processing to choose a different jsRender template to build <IMG /> elements based on the value of the current items reviewoutcome property value.

Call a Custom jsRender Tag

In the above example we used conditional processing to chose a jsRender template to display different <IMG /> elements, another method of doing this is to write a custom jsRender tag which will do the same thing. To use a custom jsrender tag you have written, use the following form {{mytagname expression /}}. In the sample above we created a custom tag called outcome which accepted the reviewoutcome property value of the current item and returned an <IMG /> element.

See below for help writing a custom tag function.

To create a custom helper function;

A custom helper function, as you might imagine, is simply a JavaScript function which optionally accepts parameters and returns something for display. Usefully the function can reference global variables in the page, as you can see I’m referencing global variables g_rlid and g_thispageurl.

/* jsRender helper function */
$.views.helpers( {
  reviewurl:function(fid) {
    var m="mypage.aspx?";
    m+="form=Display";
    m+="&list="+g_rlid;
    m+="&id="+fid;
    m+="&Source="+g_thispageurl;
    return m;
  }
});

To create a custom jsRender Tag function;

A custom tag function, is also a JavaScript function which optionally accepts parameters and returns something for display.

/* jsRender custom tag */
$.views.tags({
outcome: function(value) {
var ret='';
switch(value) {
case 'Undecided':
ret="<IMG style='' title='' border='0' src='http://sp2007/_layouts/images/erg-0.gif' />";
break;
case 'Accepted':
ret="<IMG style='' title='' border='0' src='http://sp2007/_layouts/images/erg-2.gif' />";
break;
case 'Rejected':
ret="<IMG style='' title='' border='0' src='http://sp2007/_layouts/images/erg-1.gif' />";
break;
}
return ret;
}
});

Putting all this together we get something that is ripe for a little CSS beautification.

There’s much more to go at in jsRender, including some interesting effects involving hoverstate and re-rendering of item display using dynamic templates. Hopefully the documentation (and feature-set) will continue to improve and that this post has provided a leg up should you wish to start using it.

Continue reading »]]> This entry is part 8 of 13 in the series SPServices Stories

Introduction

I’ve been keeping a list of older posts about using SPServices that I’ve seen on the InterWebz for that day when I finally got around to doing something like SPServices Stories. This one is from Dan Stoll (@_danstoll) at Nintex, and was originally published on Dan’s blog back in February, 2012 as CEWP, Nintex, jQuery, SPServices and the Client API.

To me, the fact that someone at Nintex would choose to use SPServices to accomplish something with workflows is pretty telling, in a positive way. The folks over at Nintex know what they are doing, and if they choose to use SPServices as spackle to fill in some of the gaps in SharePoint, then it’s testament to the value of it.

In SPServices Stories #7, John Liu showed an example of starting a workflow with SPServices, and here Dan gives us some of the details under the covers.

CEWP, Nintex, jQuery, SPServices and the Client API

I had a requirement that required a not so difficult solution but tricky.. The first requirement was that a webpart had to be embedded in to a publishing page layout that was used over multiple sites in the farm. The next requirement was to only show this webpart to a select group of people.. Easy right ? Using audiences should work a treat…. Wrong. . Embedding the CEWP you can still put in the audience but it doesn’t work because it isn’t in a webpart zone… Ok, so let’s put a webpart zone in.. Pop in my custom CEWP webpart.. The audience set.. but still no joy.. Audience is working but because my webpart is in a webpart zone, it doesn’t show up.

So now I’m faced with .. “How do I get a default webpart to appear on 500 + pages that already exist?? ” Back to square one.. There has to be a way of telling a Div to hide if you aren’t part of a group of some kind. So let’s look at this.. Here is an extract of my page layout

<div class="certifiedPanel" style="display: none;">
  <div class="article-before-wp">
    <h3 class="ms-standardheader ms-WPTitle">
      <span>Details</span>
    </h3>
  </div>
  <div class="article-meta article-wp">
  <table style="width: 100%;">
    <tbody>
      <tr>
        <th class="style1" style="width: 36%;">Contact:</th>
        <td id="pubContact"></td>
      </tr>
      <tr>
        <th class="style1" style="width: 36%;">Last Modified:</th>
        <td id="modifiedOn"></td>
      </tr>
      <tr style="display: none;">
        <th style="width: 36%;">Last Review Date:</th>
        <td id="lastReviewedOn"></td>
      </tr>
      <tr>
        <th class="style1" style="width: 36%;">Next Review
        Date:</th>
        <td id="reviewedOn"></td>
      </tr>
      <tr>
        <th class="style1" style="width: 36%;">Certified Date:</th>
        <td id="certifiedOn"></td>
      </tr>
      <tr>
        <th class="style1" style="width: 36%;">HYway DOCID:</th>
        <td id="docId"></td>
      </tr>
      <tr>
        <th class="style1" style="width: 36%;">Reference ID:</th>
        <td id="refId"></td>
      </tr>
    </tbody>
  </table>Managers PanelNoneUse for formatted text, tables, and
  images.true2NormaltruetruetruetruetruetruetrueModeless
  <dir>Default</dir>Cannot import this Web
  Part.true00000000-0000-0000-0000-000000000000g_73d6de6b_445e_4d9a_8443_c05b20548336/OurProcesses/Documents/startworkflow.txt</div>
  <div class="article-after-wp"></div>
</div>

You’ll see in the first line, I have included a “display:none” style on the DIV called “certifiedPanel” The rest of it, well the first half of the Certified Panel shows a few fields from the content type, eg Modified Date, ID etc etc.. The second half is the CEWP that has a text file as it’s source of content ‘startworkflow.txt’ .. This is where part 2 of the story begins..

The other requirements is that this “Panel” had to show indicators as to the phases of the document, it also had to have a link to the version history of the document and there also had to be a couple of workflows that could be executed against the page (content type) from this panel.. Firstly, let me show you the panel

The 3 indicators shown here, show the manager at a quick glance that the document isn’t certified (Yellow) because the review date has passed, it isn’t ready for Review either (Red) as the Contact hasn’t been filled in. The only parameter that is ok is that the Review date as been set with “something” (Green)

As you can see the document has been modified since being certified so this document is now no longer certified as changes may have been made to the content…

Ok so how did we do this.. I’ll post the full contents of the startworkflow.txt file and we can work from there. (the Startworkflow.txt) is used with the Content Editor Webpart to display on the page

[Ed: I've split the HTML and JavaScript sections for better readability.]

var $ = jQuery;
$(document).ready(SetPageIndicators);
function SetPageIndicators() {

  //get the certified and reviewed indicators
  var certifiedOn = new Date($("#certifiedOn").text());
  var hasCertDate = !isNaN(certifiedOn);
  var modifiedOn = new Date($("#modifiedOn").text());
  var hasModDate = !isNaN(modifiedOn);
  var reviewOn = new Date($("#reviewedOn").text());
  var hasReview = !isNaN(reviewOn);
  var lastReviewedOn = new Date($("#lastReviewedOn").text());
  var haslastReviewedOn = !isNaN(lastReviewedOn);
  var baseUrl = "/Style%20Library/hyway/Images/";

  //set certified icon
  var certImg = $("#certImg");
  if (!hasCertDate)
    certImg.attr("src", baseUrl + "statusRed.png");
  if (hasCertDate)
    certImg.attr("src", baseUrl + "statusGreen.png");
  if ((hasModDate && hasCertDate) && (modifiedOn.setDate(+1) > certifiedOn))
    certImg.attr("src", baseUrl + "statusYellow.png");

  //set lastReviewedOn icon
  var lastReviewedOnImg = $("#lastReviewedOnImg");
  if (!haslastReviewedOn)
    lastReviewedOnImg.attr("src", baseUrl + "statusRed.png");
  if (haslastReviewedOn)
    lastReviewedOnImg.attr("src", baseUrl + "statusGreen.png");
  if (lastReviewedOn > certifiedOn)
    lastReviewedOnImg.attr("src", baseUrl + "statusYellow.png");

  //set review icon
  var reviewImg = $("#reviewImg");
  if (!hasReview) {
    reviewImg.attr("src", baseUrl + "statusRed.png");
  } else {
    if (reviewOn > new Date()) {
      reviewImg.attr("src", baseUrl + "statusGreen.png");
    } else {
      reviewImg.attr("src", baseUrl + "statusYellow.png");
    }
  }

  //Hide the Panel from those who don't need it
  ExecuteOrDelayUntilScriptLoaded(function () {
    var ctx = SP.ClientContext.get_current();
    var web = ctx.get_web();

    // change ID based on
    // http://devserver/OurProcesses/_layouts/people.aspx?MembershipGroupId=551
    // http://server/OurProcesses/_layouts/people.aspx?MembershipGroupId=752
    var group = web.get_siteGroups().getById(551);
    ctx.load(group);
    var users = group.get_users();
    ctx.load(users);
    var user = web.get_currentUser();
    ctx.load(user);
    ctx.executeQueryAsync(Function.createDelegate(this, function () {

        // success
        for (var i = 0; i < users.get_count(); i++) {
          var u = users.get_item(i);
          //alert(u.get_loginName());
          if (u.get_loginName() == user.get_loginName()) {
            //alert("found you");

            $(".certifiedPanel").show();
          }
        }
      }), Function.createDelegate(this, function () {}));
  }, "sp.js");
}
function StartWorkflow(ItemURL, WorkflowName) {
  var waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('working on it….', 'Please wait while Gnomes get this sorted for you...', 76, 330);

  // start the workflow manually, then take the TemplateID from the URL of the Workflow starting form
  // this is no good since it changes when you republish workflow...
  // get TemplateID first for item.
  $().SPServices({
    operation : "GetTemplatesForItem",
    item : ItemURL,
    async : false,
    completefunc : function (data, status) {
      var workflowTemplateID;
      if (status == "success") {
        $(data.responseXML).find("WorkflowTemplates > WorkflowTemplate").each(function (i, e) {

          // hard coded workflow name
          if ($(this).attr("Name") == WorkflowName) {
            var guid = $(this).find("WorkflowTemplateIdSet").attr("TemplateId");
            if (guid != null) {
              workflowTemplateID = "{" + guid + "}";
            }
          }
        });
      } else {

        // error can't find template
        alert(status + " : " + data.responseText);
        return;
      }

      // start workflow now with obtained templateID. Note this must run within the completeFunc of the first webservice call
      $().SPServices({
        operation : "StartWorkflow",
        item : ItemURL,
        templateId : workflowTemplateID,
        workflowParameters : "<root />",
        completefunc : function (data, status) {
          waitDialog.close();
          if (status == "error") {
            alert(status + " : " + data.responseText);
          } else {
            document.location.reload();
          }
        }
      });
    }
  });
}
function certImg_onclick() {}

function ShowVersionHistory() {
  if (!_spPageContextInfo) {
    return;
  }
  var options = {
    tite : "Versions",
    url : _spPageContextInfo.webServerRelativeUrl + "/_layouts/Versions.aspx?list=" + _spPageContextInfo.pageListId + "&ID=" + _spPageContextInfo.pageItemId,
    allowMaximize : false,
    showClose : true,
    width : 800,
    height : 500,
  };
  SP.UI.ModalDialog.showModalDialog(options);
}

<table style="width: 100%">
  <tr>
    <td>
    <img id="certImg" alt="Page Certified Indicator" src=""
    onclick="return certImg_onclick()" height="20px"
    width="20px" />Certified</td>
    <td>
      <a href="javascript:StartWorkflow(document.location, 'Super Stamp')">
      Certify Process Page</a>
    </td>
  </tr>
  <tr>
    <td>
      <div>
      <img id="reviewImg" alt="Page Review Indicator" src=""
      height="20px" width="20px" />Reviewed</div>
    </td>
    <td>
      <a href="#" onclick="javascript:ShowVersionHistory();">View
      Modification History</a>
    </td>
  </tr>
  <tr>
    <td>
    <img id="lastReviewedOnImg"
    alt="Page Ready for Review Indicator" src=""
    onclick="return lastReviewedOnImg_onclick()" height="20px"
    width="20px" />Ready for Review</td>
    <td>
      <a href="javascript:StartWorkflow(document.location, 'ReadyForReview')">
      Ready for Review</a>
    </td>
  </tr>
</table>

As you can probably guess there is are a couple of parts to this txt file..

1. The first being jquery switching the indicators depending on the rules set and the values of certain date fields.
2. The second part is using the client API where we are setting the ID of the SP group (note you can’t have any nested SP or AD groups here) that has access to this panel.. This then sets the DIV certifiedPanel display to show.
3. Part 3 is using SPServices http://spservices.codeplex.com/ to call Nintex Reusable Workflows that are bound to the custom content type that I am using for these Publishing Pages. As Nintex Workflow use the same infrastructure as SharePoint workflows, the rich feature set of SPServices, allow me to start my Nintex Workflows and a whole host of other things.

These workflows not only update the Page in question but also assign tasks to the review committee, and maintain a centralised list of all pages that are currently under review, / are due for review or don’t comply to the companies guidelines..

On approval of the task, the pages are certified within the companies “Processes” site. The JavaScript indicators reflect its new status, and the document is removed form the centralised management list.

Continue reading »]]> This is a silly thing to need to post about, but I just spent about 15 minutes trying to figure it out, so I’m sure others will have the same trouble.

I’ve read all about the impending merge of Skype and Microsoft Messenger. (See Skype and Messenger Coming Together: The Next Chapter)

I figured I’d get ahead of things and merge my two accounts now to get it over with. I’ve never been much of a Messenger user, so I’m not all that invested in it as an application. However, over the years I’ve collected some contacts there that I don’t want to lose.

I’ve been using Skype as a messaging application for years, though, so I’ve already got it all set up and I update it regularly.

I figured it would be easy to find out how to merge my two accounts, so I started looking around in Skype help. The best results I got were when I searched for “merge accounts”. However everything that I found was geared toward the “what happens when…” questions.

I wasn’t interested in what happens, I just wanted to do it!

If that info is in Skype’s help, then I can’t find it. If it’s there, then it’s very well hidden.

I did find a blog post out there in the InterWebz (How to Merge Skype and Windows Live Messenger Accounts into Microsoft Account by Venkat eswarlu) that explained it, though, so I’m going to give the gist of it here. It’s actually pretty easy, once you know what to do.

Here are the steps:

1. Be sure to update your copy of Skype. You may not have some of the bits you need if you are running an older version. To do this, simply go to Help / Check for Updates and follow the instructions.
2. Once Skype is running again, log out.
3. Log in with your Microsoft Account (nee LiveID) credentials

   

4. Once you’ve logged in, you’ll be asked if you already have a Skype account. Since you already do, click the “I have a Skype account” button.

   

5. Next, you’ll log in with your Skype credentials.

   

6. Finally, you”ll see the prompt to merge your accounts.

   

From this point forward, you should use your Microsoft Account to log into Skype.

Continue reading »]]> This entry is part 7 of 13 in the series SPServices Stories

Introduction

I’ve been aware that John Liu (@johnnliu) is a fan of SPServices for some time now. He occasionally tweets about things he’s up to, and they always sound intriguing.

Recently, I asked him if he’d like to share any of his own SPServices Stories, and he did a post for me on his blog. In the post, John shows three great examples of how you can slide SPServices under some truly impressive functionality that greatly improves the overall SharePoint user experience.

There’s another SPServices Story coming up from Dan Stoll (@_danstoll) which goes into some of the details on John’s first example below.

Without further ado, here’s John’s first SPServices Story. I expect that John will have a few more SPServices Stories to share with us over time.

Example uses of SPServices, JavaScript and SharePoint

I wanted to write about spservices.codeplex.com from Marc D Anderson – we’ve found ourselves using this really special library time and again across different projects to talk back to SharePoint quickly.

Starting Workflows

Here’s a page from one of our Process Wiki articles.

• We have a special “Contributor-only” Web Part on the right.
• It shows the various workflow status’ on the current page, as traffic light bubbles.
• The “Certify Process Page” calls a JavaScript function that calls StartWorkflow via SPServices.
• The workflow is a Nintex workflow and triggers a significant multistage approval process.  But you can use StartWorkflow to start SharePoint workflows as well.

Getting List Data, Lots of List Data

Here’s our task list, represented as a task board.

• This one is completely done with SPServices to get the list items
• Convert the objects to JSON using SPServices.SPXmlToJson
• Then binding the objects to UI via Knockout
• There’s jQuery UI’s drag and drop in play, so we can change the Task’s status by dragging the task across a different column.
• Update task using SPServices’ UpdateListItems call.
• And some nice CSS.
• This particular page also runs via SharePoint 2010′s OData listdata.svc, but is completely viable with SPServices on SP2007 as well.

Getting User Profiles via Search

Here’s our People page.

• First, get SharePoint to index your people.
• Use SPServices to call SharePoint search to return a bunch of people, including their picture (one would say, especially their picture).
• Here I use Knockout to render the pictures.  When clicked, each one opens that user’s My Site page.
• There’s a filter box on the top right, as well as “fake” refinements on the left hand side that allows us to re-query SharePoint search for filtered people.
• One possible idea here would be to use SPServices’ User Profile Service support and talk directly to the User Profile service if you want to skip the search service.

Summary

A quick post of 3 recent JavaScript customizations that heavily used SPServices.  Hope that give you guys a lot of ideas.  Let me know what you guys think.

Continue reading »]]> This entry is part 6 of 13 in the series SPServices Stories

Introduction

Many times, SPServices Stories play out on the field of the Codeplex Discussions. As someone posts questions about how to build some of the components of their solution, the overall plan comes into focus.

Over the last week or so, I’ve been helping Oli Howson (@Mr_Howson) in the discussions here and here. As the bits and pieces came to together for me, I thought that Oli’s work in progress would make a great SPServices Story, especially since he took the trouble to write up what he was trying to accomplish in the discussion thread.

Oli’s project is in process, and it’s certainly possible that he will make changes from here. However, I thought it would be useful to post things “as-is” so that everyone could see how he’s going about it. If he makes any significant changes, we’ll try to post them back as well.

If you have any comments for Oli about how you might do things differently, I’m sure he’d be interested. I know I would be.

Oli’s entire bespoke page is shown below, so you get to see the markup, the script, everything.

Custom Quizzing System

I am a teacher – running the ICT and Computer Science department of a South London Academy – we teach both disciplines to 11-18 year olds. For key-stage 3 (Y7, 8 and 9) we have for the last few years set homework on our VLE (Virtual Learning Environment) which had a built-in testing system. Due to that being about the only part of the VLE that wasn’t naff, it was recently retired and a new SharePoint system brought in. It’s got a few bespoke bits, and I am not an admin. Now I’m faced with the dilemma: I have 555-ish students needing their homework setting every week, I deliver all my learning resources via the SharePoint system, but there is no built-in quizzing system. Yes – there are surveys, but they don’t mark and have their own foibles. So I built this JavaScript-based quizzing system.

Methodology

The teacher in charge of setting homework that week creates a multiple-choice quiz on a stand-alone piece of client software I wrote in Delphi. This then creates an array string which it pastes into the quiz template (with a relevant name) and copies the file to the relevant document store in the SharePoint server. The teacher then just creates a link from the homework page to the relevant quiz, and when the kids hit the quiz the results go into the relevant list (created with the same name as the quiz). The difficult bit was making sure that the list was created the first time the quiz is run. The idea is the teacher hits the quiz once the link is up to make sure it has worked. When they submit, it creates the list, adds the columns, and updates the view. The second time it tests if the list exists (it does now!) and just inserts their score, which it also shows to the kids and then closes the window.

Well, I think I’m there! I’m going to get this beta tested by a group of Year 9 students tomorrow, but I’ll put the code below for reference to anyone that might find it interesting. I’m sure I’ve made loads of faux-pas as I’ve written a grand total of about three things in JavaScript, and have very limited knowledge of SharePoint.

Wheeee :)

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Tabs - Default functionality</title>
 <link rel="stylesheet" href="/mertonshared/computerstudies/homework/Documents/includes/jquery-ui.css" />
 <script language="javascript" src="/mertonshared/computerstudies/homework/Documents/includes/jquery-1.8.1.js"></script>
 <script language="javascript" src="/mertonshared/computerstudies/homework/Documents/includes/jquery-ui.js"></script>
 <script language="javascript" src="/mertonshared/computerstudies/homework/Documents/includes/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
 <script>
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 // Quizzer v1.0.2                                                                                //
 // Change Log:                                                                                   //
 //  - 1.1.0 Added check whether user has completed before - one try only. Reordered some actions //
 //          Added permissions setting when list is being created. Changed submit button value.   //
 //  - 1.0.2 Removed some pointless alerts for ordinary users, reenabled windows.close(), added   //
 //           some useful comments.                                                               //
 //  - 1.0.1 Added view change to show all fields                                                 //
 // Currently available:                                                                          //
 //  - Multiple choice                                                                            //
 //  - Unlimited questions                                                                        //
 //  - Four options per question                                                                  //
 // Future Plans                                                                                  //
 //  - Varying number of options per question                                                     //
 //  - Missing word completion                                                                    //
 //  - Include YouTube clip                                                                       //
 ///////////////////////////////////////////////////////////////////////////////////////////////////

 var startseconds;
 var filename;
 var score;
 var thisUserName;
 var previouslytried;

 function checkiflistexists() {
    //alert('checking existance of list: '+filename);
    $().SPServices ({
        operation: "GetList",
        listName:  filename,
        completefunc: function (xData, Status) {
                //tp1 = xData.responseText;
                //alert(tp1);
                //alert(Status);
                if (Status == 'success') {
                    //alert ('Exists - dont create - just insert data');
                    insertdata();
                }
                else {
                    alert('Dont exist');
                    $().SPServices({
                        operation: "AddList",
                        listName: filename,
                        description: "List created for quiz: "+filename,
                        templateID: 100,
                        completefunc: function (xData, Status) {
                            alert('Trying to create list');
                            alert(Status);
                            alert('Now add fields');
                            var nfields = "<Fields><Method ID='1'><Field Type='Text' DisplayName='Score' ResultType='Text'></Field></Method><Method ID='2'><Field Type='Text' DisplayName='TimeTaken' ResultsType='Text'></Field></Method><Method ID='3'><Field Type='Text' DisplayName='CompletedOn' ResultsType='Text'></Field></Method></Fields>";
                            $().SPServices({
                                operation: 'UpdateList',
                                listName: filename,
                                newFields: nfields,
                                completefunc: function(xData, Status) {
                                    tp1 = xData.responseText;
                                    tp4 = tp1.indexOf("errorstring");
                                    if (tp4 < 0) {
                                        alert("Fields created! - Update View");
                                        var viewname = "";
                                        $().SPServices({
                                            operation: "GetViewCollection",
                                            async: false,
                                            listName: filename,
                                            completefunc: function (xData, Status) {
                                                alert('Complete Func - GewViewCollection');
                                                $(xData.responseXML).find("[nodeName='View']").each(function() {
                                                    var viewdisplayname = $(this).attr("DisplayName");
                                                    if (viewdisplayname=="AllItems") {
                                                        viewname = $(this).attr("Name");
                                                        return false;
                                                    }
                                                });
                                            }
                                        });
                                        alert('Ok - done GetViewCollection - now update the view');
                                        var viewfields = "<ViewFields><FieldRef Name=\"Title\" /><FieldRef Name=\"Score\" /><FieldRef Name=\"TimeTaken\" /><FieldRef Name=\"CompletedOn\" /></ViewFields>";
                                        $().SPServices({
                                            operation: 'UpdateView',
                                            async: false,
                                            listName: filename,
                                            viewName: viewname,
                                            viewFields: viewfields,
                                            completefunc: function(xData, Status) {
                                                alert('Trying to update view');
                                                alert(Status);
                                                alert('Updated view - now update permissions');
                                                //insertdata();
                                                $().SPServices({
                                                    operation: 'AddPermission',
                                                    objectType: 'List',
                                                    objectName: filename,
                                                    permissionIdentifier: "HARRISNET\\ham-grp-students",
                                                    permissionType: 'user',
                                                    permissionMask: 1011028719,
                                                    completefunc: function(xData, Status) {
                                                        alert('Trying to update permissions');
                                                        alert(Status);
                                                        alert(xData.responseXML.xml);
                                                        alert('Done... hopefully! - better insert the data!');
                                                        insertdata();
                                                    }
                                                });
                                            }
                                        });
                                    }
                                    else {
                                    // Error creating fields!
                                    alert("Error creating fields!");
                                    }
                                }
                            });
                        }
                    });
                }
            }
        });
 }

 function insertdata() {
    var endseconds = new Date().getTime() / 1000;
    endseconds = endseconds - startseconds;
    var d = new Date();
    var dd = d.toDateString();
    var dt = d.toTimeString();
    $().SPServices({
        operation: "UpdateListItems",
        async: false,
        batchCmd: "New",
        listName: filename,
        valuepairs: [["Title", thisUserName],["Score",score],["TimeTaken",Math.round(endseconds).toString()+" seconds"],["CompletedOn",dd+" "+dt]],
        completefunc: function (xData, Status) {
            //alert('Trying to add data');
            if (Status == 'success') {
                //inserted();
            }
            else {
                alert(Status+' : There was a problem inserting your score into the database. Please notify Mr Howson!');
                //inserted();
            }
        }
    });
    alert('You achieved a score of '+score);
    window.close();
 }

 function checkanswers() {
    var form = document.getElementById('answers');
    score = 0;
    for (var i = 0; i < form.elements.length; i++ ) {
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                if (questions[form.elements[i].name.substring(9)-1][questions[form.elements[i].name.substring(9)-1].length-1] == form.elements[i].value)
                {
                 score++;
                }
            }
        }
    }
  $(document).ready(function() {
    checkiflistexists();
  });
 }

 function initialise() {
    var rowcount = 0;
    startseconds = new Date().getTime() / 1000;
    var url = window.location.pathname;
    thisUserName = $().SPServices.SPGetCurrentUser({
        fieldName: "Title",
        debug: false
    });
    filename = url.substring(url.lastIndexOf('/')+1);
    filename = filename.substring(0,filename.lastIndexOf('.'));
    //alert(filename);
    //alert('Getting items');
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: filename,
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Score' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Title' /><Value Type='Text'>"+thisUserName+"</Value></Eq></Where></Query>",
    CAMLRowLimit: 1,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        //var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
        score = $(this).attr("ows_Score");
        //$("#tasksUL").append(liHtml);
        rowcount++;
      });
    }
  });
    //alert(rowcount);
    //alert('done');
  if (rowcount > 0) {
   previouslytried = true;
   document.getElementById('tabs').style.visibility = 'hidden';
   alert('Sorry - you have already tried this quiz - one try only!\nLast time you got a '+score);
   window.close();
  }
  else {
   previouslytried = false;
  }
 }

 function inserted() {
    //window.close();
 }

 $(function() {
  $( "#tabs" ).tabs();
 });

 var questions = new Array;
  //The section below should be uncommented when not testing - this will be replaced by the client
  // side application with the questions array.
  [INSERTQUESTIONS]

 //The following questions can be uncommented for testing purposes
 //questions[0] = ['q1','a','b','c',1];
 //questions[1] = ['q2','d','e','f',2];
 //questions[2] = ['q3','g','h','i',3];
 </script>
</head>

<body onload="initialise()">
 <div id="tabs">
  <ul>
   <script language="JavaScript">
    for (var i = 0; i< questions.length; i++)
    {
     document.write('<li><a href="#tabs-'+(i+1)+'">Question '+(i+1)+'</a></li>');
    }
    document.write('<li><a href="#tabs-'+(i+1)+'">Summary</a></li>');
   </script>
  </ul>
   <form name="answers" id="answers">
   <script language="JavaScript">
    for (var i = 0; i < questions.length; i++)
    {
     document.write('<div id="tabs-'+(i+1)+'">');
     document.write(' <p>'+questions[i][0]+'</p>');
     for (var j = 1; j < questions[i].length-1; j++)
     {
      document.write(' <p><input type="radio" name="question-'+(i+1)+'" value="'+j+'">'+questions[i][j]+'<br></p>');
     }
     document.write('</div>');
    }
    document.write('<div id="tabs-'+(i+1)+'">');
    document.write(' <p><input type="submit" onclick="checkanswers(); return false;" value="Submit Homework"></p>');
    document.write('</div>');
  </script>
  </form>
 </div>
</body>
</html>

Continue reading »]]> This entry is part 5 of 13 in the series SPServices Stories

Introduction

This SPServices Story comes to use from Rick El-Darwish (@RtfulDodg3r) in Geneva, Switzerland. For those of you who aren’t familiar with it, Gritter is a Growl-like notification jQuery plugin. That’s a mouthful, but try the links and you’ll quickly get the picture. If you’re an OS X user, then you’ll recognize the capability right away.

Sure, SharePoint has a notification scheme built into it – Showing transient messages using the SharePoint 2010 Notification Area – SharePoint 2010 UI tip #2 (thanks, as always, @waldekm) – and there is at least one Codeplex project – SPNotifications - that provides similar functionality. However, the built-in notifications are limited in functionality and the SPNotifications requires server-side code. The script-based approach has a much smaller footprint and the content can easily be maintained by an end user. (Getting developers out of the mix with content ought to always be the goal.) Also, by using open source jQuery-based alternatives, you always have the option to expand the functionality to meet your own needs.

By using SPServices and Gritter together, Rick was able to create very user-friendly notifications on SharePoint pages which were driven by list-based content. Rick starts out with a simple example and shows you how to set up the list-driven approach. With a little extrapolation, I’m sure you will be able to see quite a few additional uses for this approach in your own environments.

You can see Rick’s original post on his blog, Forensic Aspirations, Inferred Logic: Rick’s tale of FAIL.

Gritter and Sharepoint: Integrate Nifty Notifications in Your Intranet!

I’m working with a client on building up a project management tool in SharePoint; one thing that’s really piqued their interest is the concept of getting short flashes of information when their staff logs into the landing page. I think it’s a lovely idea, and I’m intend on giving them this functionality – but how, you might ask? There doesn’t seem to be any SharePoint feature for doing that!

We tend to forget that SharePoint is, above all, a web-based solution. This means that, with a little ingenuity (and sometimes a lot of sweat and blood), you can integrate some of the latest, coolest web features into your existing SharePoint. Fortunately, notifications are not too complicated. In this short article, we’re going to walk through creating very cool notifications using Gritter, a jQuery-based “plugin”, with Sharepoint.

Step One: Create a Sandbox

This may be as simple as creating a new page in your Site Pages repository. I seriously recommend implementing a proof-of-concept rather than work on your production page… If you’re not familiar with these libraries, the last place you want to test things out is on your production work, as easy as these implementations may seem.

Apart from your page, your sandbox will need a few extra files. These you can either place in the Site Assets repository of your PoC portal, or in the Site Assets repo of your root. The latter has the benefit of being accessible to your entire audience (or at least I assume so, it will depend on your permissions). The files that you need are the latest minified version of jQuery, the latest version of Gritter, and the latest version of SPServices (double-check these pages for compatibility issues, of course – if Gritter or SPServices tell you that they won’t work with certain versions of jQuery, don’t use those versions…)

When downloading Gritter, you’ll notice that it is a zip file that has several folders and files. I recommend that you keep those in one single place in your Site Assets. I find it’s easiest to use SharePoint Designer to do that.

Step Two: Add Your jQuery References

Now that you have a sandbox, you can start working with it. In case you’re wondering, this section is assuming that you’re working with SharePoint Designer (SPD) to do your work.

Open your sandbox page in SPD, editing it in Advanced Mode. Locate the PlaceHolderMain placeholder and add the references to your script files:

<!– Inserted by Rick – references to jQuery scripts –>
<!– These are the references to jQuery and SPServices. –>
<script type="text/javascript" src="../SiteAssets/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices-0.7.2.min.js"></script>
<!– These are the references to Gritter: –>
<link rel="stylesheet" type="text/css" href="../SiteAssets/gritter/css/jquery.gritter.css" />
<script type="text/javascript" src="../SiteAssets/gritter/js/jquery.gritter.min.js"></script>
<!– End Rick insertions. –>

You can test that the libraries loaded correctly by firing up Chrome, navigating to your PoC page, and opening your Console (F12). In the Console, type the following:

$
$(document).SPServices
$.gritter

If any of these return ‘undefined’, review your references, make sure the files are uploaded in the correct location.

Step Three: Setting up your notifications!

OK, now we know that all the necessary libraries are loaded. Time to develop notifications. Always develop incrementally, testing your code one chunk at a time. To that effect, here’s code that you should insert after the above script blocks:

<!– Here’s a test notification –>
<script type="text/javascript">
$(document).ready( function() {
  $.gritter.add({
    title: "This is a test notification",
    text: "This will fade after some time"
  });
});
</script>

If that works, you know that Gritter is functional for static content! Now it’s time to pull the real notifications from a list — this is where SPServices comes in. Before we proceed, we need something to pull information from: create a custom list with a single title for your PoC, “Latest Activities” for instance. Then, you will call the GetListItems function using SPServices.

The following code replaces your test notification:

<!– Code for notifications –>
<script type="text/javascript">

//This function throws up the notification:
function notify(curTitle, curContent) {
  $.gritter.add({
    title: curTitle,
    text: curContent
  });
}

//This retrieves the latest item of your Latest Activities.
function getLastActivity() {
  $(document).SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Latest Activities",
    CAMLRowLimit: 1,
    CAMLQuery: "<Query><OrderBy><FieldRef Name=’Created’ Ascending=’False’ /></OrderBy></Query>",
    CAMLViewFields: "<ViewFields><FieldRef Name=’Title’ /></ViewFields>",
    completefunc: function(xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        notify(‘For your information…’, $(this).attr("ows_Title"));
      });
    }
  });
}

//On document load, throw up the notification:
$(document).ready( function() {
  getLastActivity();
});
</script>

Et voilà — Gritter and SharePoint notifications in a nutshell! Your page will load and, once loaded, will call the getLastActivity function. getLastActivity pulls the latest item from the Latest Activities list (we use the CAMLQuery parameter to order by create date, and the CAMLRowLimit parameter to only return one parameter), and use a callback function to call the notify() function. The notify function is what is responsible for rendering the Gritter notification.

Happy notifying!

Rick.

Continue reading »]]> This entry is part 4 of 13 in the series SPServices Stories

Introduction

SPServices Stories #4 comes to us from Michael Broschat. Michael claims he’s just a “regular old contractor, nothing special”. He lives in the DC metro area (Northern Virginia, specifically), although he’s originally a West Coast boy.

Using SPServices to Process Files from a Non-Microsoft Source

Our system involves email messages sent to a SharePoint library by a non-Microsoft forms application. Although this particular application normally saves its results as XML files, it cannot _send_ those results anywhere (say, the SharePoint library). It can send the results as delimited strings, however, without field names.

I developed a scheme whereby I provide the field structure in an array (arFields) then match it with the field values derived from the delimited-string email. I then write same to a list.

So, three steps in a four-step process have email looking something like this:

smithxx@us.here*BP*11/01/2012*11/19/2012*18*1 - Sent to Supervisor

The final step contains much more information, for a total of 25 fields. The endpoint list includes all 25 fields, of course. Typically, a user entry will comprise four entries but accommodation must also be made for changes made while the four-step process operates. Once a step 4 has been received, any further attempts to augment this process for that user are ignored.

This JavaScript code (with SPServices, jQuery) runs via an enabling button on the list display page. But even before the button appears, the first routine has run. This routine looks in the library for any entries that have not yet been exported. If any, the button is enabled and its label includes the number of records to read and create in an associated list.

$(document).ready(function() {
  jQuery.support.cors = true;
  $().SPServices({
    operation:  "GetListItems",
    listName: "{D3795486-9926-424E-8F14-59BE5DB65BA8}",	//dev  GFSSEForm
    CAMLViewFields: "<ViewFields><FieldRef Name='LinkFilename'/><FieldRef Name='Exported' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode('z:row').each(function() {
        var thisFSObjType = parseInt($(this).attr("ows_FSObjType").split(";#")[1]);
        if(thisFSObjType === 0) {
          if(parseInt($(this).attr("ows_Exported"))===0) iRecordsToExport++;
        }  //if this is a file name
      });  //each()
      if(iRecordsToExport > 0) {
        $("#btnInitiate").html('There are ' + iRecordsToExport + ' records to export...');
        $("#btnInitiate").prop('disabled', false);
      } else {
        $("#btnInitiate").html('No records to export...'); //evidently, once we're off IE7
        $("#btnInitiate").prop('disabled', true);
      }
    }  //completefunc
  });  //SPServices
});  //document.ready

When the Records to Export button is launched, more or less the same code runs again, but this time I want to see only those email entries that have not already been dealt with (ie, Exported = false). This is done via CAML. I collect the library IDs of all items I’m writing in this batch (by the way, there is an interesting distinction between dealing with a batch and dealing with the set of records already written to the list), along with a couple other values, and create an array of IDs. The rest of the processing in this application is from that array.

return {
  //the only public method; handler for the web page button (enabled when at least one library item has not been exported)
  processRecord: function () {
    //this filter restricts the selection just to items that haven't been exported;
    var myQueryOptions = "<QueryOptions />";
    var myQuery = "<Query><OrderBy><FieldRef Name='Created_x0020_Date' /></OrderBy><Where><Eq><FieldRef Name='Exported' /><Value Type='Integer'>0</Value></Eq></Where></Query>";
    // now sorts by Created, ascending.
    $().SPServices({
      operation:  "GetListItems",
      async: false,
      listName: "{D3795486-9926-424E-8F14-59BE5DB65BA8}",	//dev  GFSSEForm
      CAMLViewFields: "<ViewFields><FieldRef Name='LinkFilename'/><FieldRef Name='Exported' /></ViewFields>",
      CAMLQuery: myQuery,
      CAMLQueryOptions: myQueryOptions,
      completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode('z:row').each(function() {
          //pick up some metadata from the SharePoint library
          //gather ows_ID='14', ows_FSObjType='14;#0', ows_Created_x0020_Date='14;#2012-11-20 06:55:13'
          var thisFSObjType = parseInt($(this).attr("ows_FSObjType").split(";#")[1]);
          idCurrent = $(this).attr("ows_ID");	//available globally
          dateCurrentCreated = $(this).attr("ows_Created_x0020_Date").split(";#")[1];	//available globally
          var formFilename = $(this).attr("ows_LinkFilename");
          if(thisFSObjType == 0) {
            arIDs.push([idCurrent, dateCurrentCreated, formFilename]);
          }  //if this is a file name
        });  //each(); arIDs is an array built from looking at all non-Exported items in the library
        //actually, you need to know the contents before you can decide whether there are any duplicate entries.
        //	ordering by Created, we're processing all entries in order of their entry into the library
      }  //completefunc
    });  //SPServices
    //here, do the Ajax call against the array of arrays; async:false is no longer used with $.ajax, deferred
    //	taking over that function; 2 Jan took the following routine out from completefunc; seems to save a stack level
    $.each(arIDs, function(index, value) {
      var promise = $.ajax({
        type:"GET",
        url:"GFSSEForm/" + arIDs[index][2],		//for SP2010 and above, full path is needed for the library name
        dataType:"text"
      });
      //the promise code executes when the file has been opened by AJAX
      promise.done(doStuff);	//magically passes the data along, too
      promise.fail(function() {alert("failed to open this eform: " + arIDs[index][2]);});
    });  //each
  }
};	// public method processRecord() [return]

By this point, the email file in the SharePoint library has been opened and its contents are ready to process.

There are two ways for email to get into the library: sent by the non-Microsoft forms application and sent directly via a client’s Outlook. The former way gets encoded (binary64), whereas the latter way does not. Both must be parsed for usable content but the encoded email must first be decoded. I use the following routine to handle both:

//	Sets the global variable: arValues; deals with both base64-encoded email and also non-encoded email
//	CRLF = \r\n
function decodeEmail(block) {
  var iBase64 = block.indexOf("base64");
  if(iBase64 > -1) {
    var startBlock = iBase64 + 6;
    var endBlock = block.indexOf("\n--", startBlock);
    var emailBlock = $.trim(block.substring(startBlock, endBlock));
    var strEmail = emailBlock.replace(new RegExp("\\n", "g"), "");
    var strDecoded = Base64.decode(strEmail);
    strDecoded = stripHTML(strDecoded);
    var iLong = strDecoded.indexOf("\r\n\r\n");	//intended for non-SMTP messages
    if(iLong > -1) {
      //take up to first \r\n
      strDecoded = strDecoded.substring(0,iLong+2);
    }
    arValues = strDecoded.split("*");
  } else {
    //	charset="us-ascii"; charset=utf-8; charset="gb2312"
    //here if there was no "base64" in the message; perhaps you should look for [charset="]us-ascii["]
    // this routine greatly strengthened 24 Jan 2012
    var iTrueStart = block.indexOf("quoted-printable");	//24 Jan fine; whole routine looks good
    var iTrueStart2 = iTrueStart + 16;
    var endBlock = block.indexOf("\n--", iTrueStart);
    var strBlock2 = $.trim(block.substring(iTrueStart2, endBlock));
    var newBlock = strBlock2.replace("=\r\n", "");		//kill all CRLFs
    var newBlock2 = newBlock.replace(/\<.*\>/g, "");  //a weird <mailto...> string in one message
    //you could have just called your own stripHTML()!
    var newBlock3 = newBlock2.replace(/=\r\n/g, "");	//one last holdout: =CRLF
    arValues = newBlock3.split("*");

  }
}

In my experience, getting values from functions does not always work within this environment (JavaScript within SharePoint). I have had to rely upon global variables (which have created their own problems at times). When that email decoding code runs, it places the parsed values into a global array: arValues, which is then used by the various routines that follow.

doStuff runs when the promise has been fulfilled. In other words, it only runs when data from the email is in hand. It sends the record off to writeNew or, if the number of field values does not match the current field template, stops the record from being processed.

function doStuff(data) {
  decodeEmail(data);	//sets global arValues, regardless of email type
  arFields = [];	//to ensure correct value within the batch loop
  if(arValues.length == 7) arFields = arFields100;
  if(arValues.length == 25) arFields = arFields200;
  if(arFields.length > 0) {
    boolIgnore = false;	//ensures correct starting point for each email
    iGlobal++;
    arValues[2] = dateFormat(arValues[2]);	//watch for changes in this default field order
    arValues[3] = dateFormat(arValues[3]);
    if(arValues.length === arFields.length) {
      var strArguments = arValues.join();
      writeNew(strArguments);	//wait until this routine before handling a dupe;
    } else alert("Number of values differed from number of form fields; not written." + arFields.length + " fields, " + arValues.length + " values (" + arValues + ")");
  } // was arFields set? If not, just return and let it pass
}  // doStuff()

writeNew simply uses SPServices to write the email contents to the list. It does this by preparing an array value to contain the values in the proper manner for UpdateListItems::New. After writing the record, I call setUpdated to modify the library entry, passing the library ID, which setUpdated uses to access the library metadata.

// strArguments is arValues rendered as string
function writeNew(strArguments) {
  $("#divId").ajaxError( function(event, request, settings, exception) {
    $(this).append("Error here: " + settings.url + ", exception: " + exception);
  });
  var iFields = arFields.length;
  var i = 0;
  var strTest = "";
  var strField = "";
  var vpairs = [];
  var strPairs = "";
  var arValues2 = strArguments.split(',');
  for(i=0; i<iFields; i++) {
    strTest = String(arValues2[i]);
    if(strTest.length > 255) strTest = strTest.substring(0,255);
    strField = arFields[i];
    vpairs.push([strField,strTest]);
  }
  //check to see whether this email address is in HoldMe; if so, processing stops, but run setUpdated(arIDs[idIndex][0]) and advance the index
  notInHoldMe(vpairs[0][1]);	//sets global value regarding presence in HoldMe list
  if(!inHoldMe) {
    var jsDate = getJSDate();		//picks up date values from arValues
    vpairs[4][1]=jsDate;
    $().SPServices({
      operation: "UpdateListItems",
      batchCmd: "New",
      async: false,
      listName: "{2D9F4CDB-A5F0-4EED-8996-C26FB2D08294}",  //development list GFSSVerified
      valuepairs: vpairs,
      completefunc: function(xData, Status) {
        if(Status == 'success') {
          //'success' is a relative term; you must also examine any error text, to see whether an error occurred
          var strError = $(xData.responseXML).SPFilterNode('ErrorText').text();
          if(strError != "") {
            $("#showErrors").append("<p>Error adding: " + $(xData.responseXML).SPFilterNode('z:row').attr("ows_Title") + " " + strError + "</p>");
          } else setUpdated(arIDs[idIndex][0]);  //possibly delete the row at this point
          idIndex++;
          if(vpairs[6][1].substring(0,1) == "4") setLocked(vpairs[0][1]);	// ie, after writing Step 4
          //record has been written; now find out whether it was a duplicate
          else findExisting(vpairs[0][1], vpairs[6][1].substring(0,1));
        } else alert("error: " + xData.responseText);
      }	//completefunc
    }); //SPServices
  }	//if not locked
  else {
    alert("The record for " + vpairs[0][1] + " is locked...");
    setUpdated(arIDs[idIndex][0]);
    idIndex++;
  }
}  // writeNew()

All records are to be written to the list, but it will happen that some records are duplicates (because a later action changes the previous action). In that case, the earlier record needs to be marked as ‘orphan’. The original idea was to simply delete the record but someone wanted to keep it. Therefore, I need to filter orphans from various stages of processing. The routine called findExisting deals with this issue. I use CAML to filter orphans.

function findExisting(user, action) {
  $("#divId").ajaxError( function(event, request, settings, exception) {
    $(this).append("Error in findExisting: " + settings.url + ", exception: " + exception + "<br>");
  });
  var queryOptions = "<QueryOptions />";
  var query = "<Query><Where><And><And><Eq><FieldRef Name='Title' /><Value Type='Text'>" + user + "</Value></Eq><BeginsWith><FieldRef Name='col07x' /><Value Type='Text'>" + action + "</Value></BeginsWith></And><Neq><FieldRef Name='col26x' /><Value Type='Integer'>1</Value></Neq></And></Where></Query>";  //col26x is 'Orphan'
  //CAML looks for existing items having same name and action, ignoring any that have already been marked as orphans
  $().SPServices({
    operation:  "GetListItems",
    async: false,		//required!!!!!
    listName: "{2D9F4CDB-A5F0-4EED-8996-C26FB2D08294}",  //development list GFSSVerified
    CAMLViewFields: "<ViewFields><FieldRef Name='Title'/></ViewFields>",
    CAMLQuery: query,
    CAMLQueryOptions: queryOptions,
    completefunc: function (xData, Status) {
      var iCount = parseInt($(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount"));
      if(iCount > 1) {	//you're here because this value _at least_ was written
        //within this batch, there are multiples of this user/action; pass the multiple IDs
        var arDupIDs = [];
        var iDupID = 0;
        // routine examines each entry in arDupIDs, and replaces any value with lesser; ends up with earliest entry, which is then orphaned
        // limitation here is that it only--practically speaking--handles two instances; three or more would lose all but one
        $(xData.responseXML).SPFilterNode('z:row').each(function() {
          iDupID = parseInt($(this).attr("ows_ID"));
          arDupIDs.push(iDupID);
          if(arDupIDs.length > 1) {
            if(iDupID < arDupIDs[0]) arDupIDs[0] = iDupID;
          }
        });
        orphanGFSSRow(arDupIDs[0]);
      }	// if at least one
    }	//completefunc
  });  //SPServices
}	//findExisting()

The completefunc routine looks only at items that have duplicates. It determines the earliest item, then sends off its ID for marking as orphan.

SPServices is also used to lock an account (by placing the email address in a separate list), by checking for existence of the email address currently being processed in the Locked list. One function sets the lock, while notInHoldMe() queries the lock list.

Continue reading »]]>

I want to thank the fine folks at SusQTech (@SusQTech) – Steve Witt (@SPLumberjack) and Julia Oates (@juliaoates), in particular – for asking me to present in their “30 on Thursday” webinar series today.

We had a great turn out and it’s a given that I love to talk about SharePoint and jQuery together. It’s like peas and carrots or chocolate and peanut butter.

My slides from the webinar are available on SlideShare. If you missed it, the recording will be available soon on the “30 on Thursday” site. (Every time I type “30 on Thursday” I’m reminded how long ago it was that I was 30.)

"Maybe it's old school... but I'm old and I went to school." -- Marc Anderson aka @sympmarc

February 7, 2013 2:56 pm via TweetDeckReplyRetweetFavorite

@EUSP

Mark Miller

Continue reading »]]> In my previous post entitled Referencing jQuery, jQueryUI, and SPServices from CDNs, I provided the references to quickly add jQuery, jQueryUI, and SPServices from the CDNs I typically use.

However, I made a bit of a faux pas in what I provided. It’s better to omit the protocol in the references. Browsers will simply use the current protocol, whether it be http: or https:, as needed. This means that you won’t have to worry about any issues down the road should you decide to implement SSL. It also means that the location your user happens to use to access the site doesn’t matter.

Here’s my updated set of references with the protocols omitted and updated to the versions I’m currently using:

<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>

Continue reading »]]> Ouch. Last week, several alert SPServices users reported issues with jQuery 1.9.0. (See: SPServices Compatibility Issues with the Minified Version of jQuery 1.9.0) It turned out that the minified version of 1.9.0 had a comment at the end of it that caused any jQuery library which followed it to throw errors.

Today, I had a report of SPServices not working with jQuery 1.9.1, which was released yesterday.

There’s a bug in the jQuery bug tracker called Ajax request not returning responseXML that sums up the issue well. Not everyone uses the .ajax() function in jQuery, but if you use SPServices, you’re using it constantly whether you realize it or not. Since there is no responseXML object returned by 1.9.1, every call to SharePoint’s SOAP Web Services in SPServices will fail.

Needless to say, don’t update to jQuery 1.9.1.

If there’s a bright side in all of this, it’s that the issues with jQuery 1.9.0 and 1.9.1 aren’t issues in SPServices or in the way I’ve coded anything. As I said in a forum earlier today, before I knew about the 1.9.1 bug:

Don’t ever point to ‘latest’. There are frequently changes in new versions that break perfectly fine old code.

While most of the mainstream CDNs provide ways to point to the current version of script libraries, e.g., jQuery.latest.min.js, don’t be tempted. These latest two versions of jQuery would have broken all of the SPServices-based code in your SharePoint installations. Make that a part of your governance: no pointing to ‘latest’ versions of script libraries.

Herre’s hoping that 1.9.2 is a better release.

Continue reading »]]> I’m still doing lots of work with SharePoint 2007, even while many of my compatriots have moved on almost exclusively to 2013 work. The new shiny stuff is fun and all, but just because it’s new doesn’t mean that all the good work is there. Both SharePoint 2007 and 2010 are still providing valuable collaborative toolsets in organizations out there.

When you work with an older version of the product, you get the benefit of hindsight as well as knowledge of new trends in user interfaces and development approaches.

One of my clients wanted to create and auto-refresh capability for a SharePoint 2007 page that they use as a sort of dashboard. Many of the people in the organization keep the page open all day, and hitting refresh all the time is tedious. They also forget sometimes and can mistakenly be looking at stale content.

In SharePoint 2010, Data View Web Parts (DVWPs) provide this capability simply by checking a box on the ribbon (which usually works). I’ve rarely seen anyone enable the feature in 2010, but it’s there. To make this work in 2007, I had to build it with script.

To improve the situation, and therefore the general user experience (UX), we decided to give the user control over the auto-refresh capability. It wasn’t that much extra work to do it this way, and by allowing them the set their own refresh interval, they feel that they have more control of the page. This makes them more satisfied with the solution, which increases adoption. All goodness.

It took some iteration to decide how to lay things out ideally, so what I’m showing here is closer to the end result than the starting point. I was able to take advantage of a function I had written earlier called refreshElement, which I wrote about in my prior post entitled Refreshing a Web Part Without a Postback Using jQuery’s AJAX Function.

The first step is to ensure that we have references to jQuery, jQueryUI, and jQueryUI’s CSS in the page. I’m also using jQuery cookie to set a cookie with the value in the slider that the user sets, thus making it possible to persist the value between sessions. In this particular case, we have references to the script libraries in the master page because we’re using them pervasively.

Next, I added a little markup to the page. My thinking on this was that by adding the markup at the top on the PlaceHolderMain rather than where the slider actually ended up, I could ensure that the data which drives the refresh will always be in the same place that I always put my script references, thus easy to find. If we decide to put the slider somewhere else in the page, I can just change the script, with no need to change the markup in the page itself. (We’re using this capability in four sites at the moment, with more to come.) There’s a div containing the slider info and then a second div wrapped around the area of the page I’d like to refresh. The refresh div can really surround anything in the page. I’m using AJAX to grab the full page, and I can simply parse out whatever is in the div. In this case, it contains the complex DVWP and one other Web Part. Note that the first div has a data attribute (how very HTML5 of me) which “points” to the div we want to actually refresh.

</pre>
<div id="aaa-refresh-control" data-to-refresh="aaa-listing"></div>
<div id="aaa-listing"><!-- ... DVWP, etc. ... --></div>
<pre>

Next comes the script. Hopefully the comments inline are clear enough, but if you have questions feel free to ask them in the comments section.

$(document).ready(function() {

  // If there is an element with the id aaa-refresh-control, we'll refresh what it indicates at a user-specified interval
  var refreshControl = $("#aaa-refresh-control");
  var toRefresh = refreshControl.data("to-refresh");

  // If there is a request to refresh an element...
  if(toRefresh !== undefined) {

    $("div[id$='QuickLaunchNavigationManager']").append(refreshControl);

    // Add the elements to the page that we need for the functionality to work
    refreshControl.append("<div id='refreshInfo'>" +
      "<label for='refreshInterval'>Refresh every</label>  " +
      "<input type='text' id='refreshInterval'/>minutes " +
      "<label id='refreshTime'></label></div>");
    refreshControl.append("<div id='refreshSlider'></div>");
    refreshControl.append("<div id='refreshNow'></div>");

    // Get the refresh interval value the user has set by retrieving the cookie
    var refreshInterval = $.cookie("refreshInterval");

    // If the refreshInterval hasn't been set, default to 5 minutes
    if(refreshInterval == 0 || refreshInterval == undefined) refreshInterval = 5;
    $("#refreshInterval").val(refreshInterval);
    $("#refreshTime").html("Last refreshed: " + getNow());

    // Set up the refresh behavior using a timer
    var refreshListing = setInterval(function(){
      refreshElement(toRefresh, "", "Please wait...", "Refreshing...");
      $("#refreshTime").html("Last refreshed: " + getNow());
    }, 1000 * 60 * refreshInterval);
    $("#aaa-listing").css("clear", "both");

    // Adjusting the slider allows the user to set the refresh interval to their own needs
    $("#refreshSlider").slider({
      value: refreshInterval,
      min: 5,
      max: 60,
      step: 5,
      slide: function(event, ui) {
        $("#refreshInterval").val(ui.value);
      },
      change: function(event, ui) {

        // Set a cookie with the refresh interval so that we can reload it when we return
        $.cookie("refreshInterval", ui.value);
        clearInterval(refreshListing);

        // Re-initialize the timer
        refreshListing = setInterval(function(){
          refreshElement(toRefresh, "", "Please wait...", "Refreshing...");
          $("#refreshTime").html("Last refreshed: " + getNow());
        }, 1000 * 60 * ui.value);
        $("#aaa-listing").css("clear", "both");
      }
    });
  }

});

// Refreshes an element's contents on a user action, showing a modal dialog during the refresh
// elementId  The id of the container element
// qs      The Query String to append to the current URL
// msg      The message to show in the dialog
function refreshElement(elementId, qs, title, msg) {

  var elementObj = $("#" + elementId);
  var infoDialog = $("<div><div>" + msg + "</div><div class='aaa-please-wait'></div></div>").dialog({
    open: function(event, ui) {
      $(".ui-dialog-titlebar-close").hide();  // Hide the close X
      $(this).css("overflow-y", "visible");  // Fix for the scrollbar in IE
    },
    autoOpen: false,
    title: title,
    modal: true,
    position: { my: "center", at: "center", of: window }
  });
  infoDialog.dialog("open");

  elementObj.fadeOut("slow", function() {
    $.ajax({
      // Need this to be synchronous so we're assured of a valid value
      async: false,
      url: window.location.pathname + qs,
      complete: function (xData) {
        newHtml = $(xData.responseText).find("#" + elementId).html();
        elementObj.html(newHtml);
      }
    });

  }).fadeIn("slow", function() {
    infoDialog.dialog("close");
  });
}

// Helper function which gets the current time and formats it in HH:MM format
function getNow() {
  var d = new Date();
  var curr_hour = d.getHours();
  var curr_min = d.getMinutes() >= 10 ? d.getMinutes() : "0" + d.getMinutes();
  return curr_hour + ":" + curr_min;
}

And voila. We have a little slider right under the main links in the Quick Launch which the user can slide to set their own refresh interval. Every time the timer hits that interval, the dialog pops up with info about the refresh, the content is refreshed, and the time above the slider changes to tell the user how fresh the content is.

Continue reading »]]> This entry is part 2 of 13 in the series SPServices Stories

Introduction

This submission comes to us from an anonymous reader, who can’t publish the details under his (or her) name due to confidentiality issues. However, s/he has been able to generate some very useful charts with HighCharts using SharePoint list data as the underlying data sources.

Charting List Data with HighCharts

In the following code, the source list contains columns with Year (string), Month (1-12), and Value (number with decimals).

While HighCharts isn’t free, the licensing costs are quite reasonable. A similar approach would work with other charting engines out there which may be free.

The page has a Content Editor Web Part dropped into it with the Content Link pointing to a file containing the following:

<!-- jquery and spservices are in the masterpage here this is a CEWP noConflict is on-->

<script type="text/javascript"src="//code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="//code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
function GetYearSeries(series, year)
{
  var gotOne = false;
  var seriesOptions;

  jQuery.each (series, function(index, dataItem) {
    if (dataItem.name === year)
    {
      seriesOptions = dataItem;
      gotOne=true;
    }
  });

  if (!gotOne)
  {
    seriesOptions = {
      name: year,
      data: [0,0,0,0,0,0,0,0,0,0,0,0]
    };

    series.push (seriesOptions);
  }

  return seriesOptions;

}

jQuery(function($) {

  var CamlQuery = "<Query><OrderBy><FieldRef Name='Year' /><FieldRef Name='Month' Ascending='False' /></OrderBy></Query>";

  $().SPServices({
    operation: "GetListItems",
    async: true,
    listName: "Sales",
    CAMLQuery: CamlQuery,
    CAMLViewFields: "<ViewFields><FieldRef Name='Year' /><FieldRef Name='Month' /><FieldRef Name='Value' /></ViewFields>",
    completefunc: GraphIt
  });

  function GraphIt(xmlResponse)
  {

    var options = {
      chart: {
        renderTo: 'container',
        type: 'column'
      },
      title: {
        text: 'Sales'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Value'
        }
      },
      series: []
    };

    $(xmlResponse.responseXML).SPFilterNode("z:row").each(function() {

      var seriesOptions = GetYearSeries(options.series, $(this).attr('ows_Year'));
      var month=parseInt($(this).attr('ows_Month'))-1;

      seriesOptions.data[month]=parseFloat($(this).attr('ows_Value'));
    });
    var chart = new Highcharts.Chart(options);

  }

});//docReady
</script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

This generates a chart which looks something like this:

Continue reading »]]> Codeplex users tedka and danstaley have reported issues using SPServices with jQuery 1.9.0. You can read their issues here and here, respectively.

I’ve done some quick testing, and the problem seems to be with the minified version of jQuery 1.9.0, *not* 1.9.0 itself. When I use the non-minified version, my test pages perform just fine.

I’ve added a note to the home page of SPServices to this effect:

2013-01-29 – At this time, SPServices seems to work just fine with jQuery 1.9.0, but NOT with the minified version. If you need to use jQuery 1.9.0, please stick with the non-minified version or minify your own version.

When I create my own minified version of 1.9.0 using The JavaScript CompressorRater (I chose the first YUI Compressor 2.4.2 result, as I do when I minify SPServices), my minified version works fine, too.

At this point, I’m not sure what the exact problem is, but I’ll try to contact the jQuery team to see if there have been any other reports of issues. I’m not sure how well that will go, but at least there’s a workaround.

I found some other reports of issues which are caused by this line at the end of the minified version of jQuery 1.9.0:

//@ sourceMappingURL=jquery.min.map

While the source mapping capability sounds useful, having this line in the minified version causes another library following that line to throw errors, which is explained well on this thread at StackOverflow.

Continue reading »]]> This entry is part 3 of 13 in the series SPServices Stories

Introduction

Eric Alexander (@ejaya2) should be no stranger to those of you who have visited NothingButSharePoint‘s Stump the Panel forums. If you’ve ever visited those forums, odds are very good that Eric has helped you out. He’s a stalwart member of the SharePoint support community.

Eric wrote a post on his blog about using SPServices to add Web Parts to existing pages that I thought was worth sharing as an SPServices Story.

AddWebPart Method of the WebPartPages Web Service

There are a lot of documentation black holes out there in the Sharepoint land and it seems that the WebPartPages web service is one of them.

In a project I’m currently working on, there is a need to automate a project creation process that is very manual to something more automated. Fortunately we have Nintex Workflow to handle situations like this.​ Part of this workflow is to provision a new subsite after the project is approved by the project manager. Nintex makes this easy with their LazyApproval feature and create site action.

What I needed to do was upon site creation from a template, add some web parts to the home page. This is where I was running into the huge documentation gap. I turned to one of my goto libraries, SPServices, to protoype the actual calls before porting it over to my workflow. Fortunately someone had tried to do this same thing in the past and provided a working example for adding a content editor web part. That is described here and worked no problem. My issue is I need to add list view web parts of document libraries and lists. I tried many things over the span of a couple days to tweak that to get my web parts onto the page. No dice.

Today I stumbled upon a post by Glyn Clough that filled that documentation black hole.

I need to use the List View Web Part markup like this for lists:

<?xml version="1.0" encoding="utf-8" ?>
<webParts>
 <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
  <metaData>
   <type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
   <importErrorMessage>Cannot import this Web Part.</importErrorMessage>
  </metaData>
  <data>
   <properties>
    <property name="ListUrl" type="string">Lists/CustomList</property>
    <property name="ExportMode" type="exportmode">All</property>
   </properties>
  </data>
 </webPart>
</webParts>

and like this for document libraries:

<?xml version="1.0" encoding="utf-8" ?>
<webParts>
 <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
  <metaData>
   <type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
   <importErrorMessage>Cannot import this Web Part.</importErrorMessage>
  </metaData>
  <data>
   <properties>
    <property name="ListUrl" type="string">Library</property>
    <property name="ExportMode" type="exportmode">All</property>
   </properties>
  </data>
 </webPart>
</webParts>

Once escaped and passed into my SPServices function I had web parts on my web part page.

SPServices Code

Eric’s post doesn’t have the SPServices call in his post, so I thought I’d provide an example here. This is built from the example from the documentation on the SPServices Codeplex site for AddWebPart. It adds an XLV Web Part showing the default view of my Tasks list to the home page of my root site and shows me an alert with the results.

var str = "<?xml version="1.0" encoding="utf-8" ?>" +
"<webParts>" +
 "<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">" +
  "<metaData>" +
   "<type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />" +
   "<importErrorMessage>Cannot import this Web Part.</importErrorMessage>" +
  "</metaData>" +
  "<data>" +
   "<properties>" +
    "<property name="ListUrl" type="string">Lists/Tasks</property>" +
    "<property name="ExportMode" type="exportmode">All</property>" +
   "</properties>" +
  "</data>" +
 "</webPart>" +
"</webParts>";

$().SPServices({
  operation: "AddWebPart",
  webPartXml: str,
  pageUrl: "/SitePages/Home.aspx",
  storage: "Shared",
  async: true,
  completefunc: function (xData, Status) {
    alert("Status: " + Status + " xData: " + xData.responseText);
  }
});

Continue reading »]]> This entry is part 1 of 13 in the series SPServices Stories

Introduction

Given the fact that so many people are using SPServices these days, I wanted to start posting some of the great things that people are doing with it out there.

If you have a story about how you are using SPServices that you would like to tell, ping me using the contact form. Your story doesn’t even have to include code, though people love to see examples. I’m always interested in what impact using SPServices may have had on your development philosophy, time to market with solutions, hiring practices, really anything that you feel SPServices has enabled you to do.

We can remove any identifying details if you feel that need to do so, but I’d like these stories to show off what *you* have done, so it’s great if you can take credit. I reserve the right to do a little editing for clarity, but otherwise you can write your own story. I’m also happy to help.

The first guest post is from fellow SharePoint MVP, Alberto Diaz Martin, who lives in Spain. Thanks to Alberto for kicking this series off!

How to Start a Workflow on Multiple Items on a List

In SharePoint 2010 we have the option to select multiple items on a list. When you select several items, the ribbon allows you to Delete Items and Send Alerts, but where is the Workflow command?

To start a workflow on a list item, you have to go through the Start workflow page and if the workflow has an initialization form, you also have to enter the parameters. Because of this, SharePoint doesn’t allow users to start a workflow on multiple items simultaneously. But why not do so when we have a parameter-less workflow?

I think this is a missing feature on SharePoint 2010 because we can certainly do it using the SharePoint API or Web Services without any problems. What can we do to provide this capability to our users?

First, we need to create a Ribbon command using a Custom Action and in this action we will have two options to try to start the workflow. The first one uses an application page by passing the selected items as parameters and uses the server API to start the process. The second, and more flexible and elegant option is using JavaScript and the SharePoint Web Services to start each workflow per item.

SharePoint Web Services are a horrible way to talk with SharePoint [ed: I disagree, but everyone is entitled to their opinion!] because the Web Services use XML to get and put parameters and options, and it’s not easy working with XML in JavaScript.

SPServices to the Rescue!!

As you know, SPServices is a jQuery library which encapsulates SharePoint Web Services with jQuery to make it easy to call them. SPServices has a Workflow namespace with some powerful operations and we can use StartWorkflow to start an item workflow, even if it has parameters.

It is so easy to use, you only need the Item URL, the workflow template Id and, if required, the workflow parameters.

$().SPServices({
  operation: "StartWorkflow",
  item: currentItemURL,
  templateId: workflowGUID,
  workflowParameters: workflowParams,
  async: true,
  completefunc: function () {
    SP.UI.Notify.addNotification("Workflow process started on selected item.", false);
  }
});

To get the workflow template Id, we have another function called GetTemplatesForItem that returns all the associated workflows for an item. All we have to do is get all the templates and find our workflow by name.

$().SPServices({
  operation: "GetTemplatesForItem",
  item: itemURL,
  async: true,
  completefunc: function (xData, Status) {
    var currentItemURL = this.item;
    $(xData.responseXML).find("WorkflowTemplates > WorkflowTemplate").each(function (i, e) {
      if ($(this).attr("Name") == "Invoice Approve") {
        var guid = $(this).find("WorkflowTemplateIdSet").attr("TemplateId");
        if (guid != null) {
          workflowGUID = "{" + guid + "}";
          //in this point, we have our workflow Id and we have to call the starting method
        }
      }
    }
  }
})

Now, we have to traverse the selected items in the custom action method, and for each item call the SPServices StartWorkflow method. Something like this:

function StarSignWorkflow(listId) {

  RemoveAllStatus(true);
  waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Starting approval workflow process on selected item','Please,wait until we finished this long operation.',76,400);

  //Get the selected items
  clientContext = new SP.ClientContext.get_current();
  var web = clientContext.get_web();
  var list = web.get_lists().getById(listId);
  var items = SP.ListOperation.Selection.getSelectedItems(ctx);
  totaSelItems = items.length;

  //Because only have items Id,we need to use Client Object Model to get EncodeAbsUrl.
  var query = new SP.CamlQuery();
  var queryString = '<View><Query><Where><In><FieldRef Name="ID"/><Values>';
  for (index in items) {
    var valueString = '<Value Type="Integer">' + items[index].id + '</Value>';
    queryString = queryString + valueString;
  }

  query.set_viewXml(queryString + '</Values></In></Where></Query></View>');
  this.collListItems = list.getItems(query);
  clientContext.load(collListItems,'Include(EncodedAbsUrl)');

  //In the success callback,we’ll have all the selected items with the absolute url.
  clientContext.executeQueryAsync(Function.createDelegate(this,this.onInitProcessSuccess),Function.createDelegate(this,this.onInitProcessFail));
}

function onInitProcessSuccess() {

  var listItemEnumerator = this.collListItems.getEnumerator();

  //If our workflow has default init param,we can provide it in this way to run workflow with default values.
  var workflowParams = "<Data><Approvers></Approvers><NotificationMessage></NotificationMessage>" +
      "<DurationforSerialTasks></DurationforSerialTasks><DurationUnits></DurationUnits>" +
      "<CC></CC><CancelonRejection></CancelonRejection><CancelonChange></CancelonChange>" +
   "<EnableContentApproval></EnableContentApproval></Data>";

  try {
    var counter = 1;
    var total = totaSelItems;

    //Traverse all the selected items
    while (listItemEnumerator.moveNext()) {
      var oListItem = listItemEnumerator.get_current();
      var itemURL = oListItem.get_item('EncodedAbsUrl');
      var workflowGUID = null;

      //Before start the workflow,we used GetTemplatesForItem to get Workflow Template Id.
      $().SPServices({
        operation: "GetTemplatesForItem",
        item: itemURL,
        async: true,
        completefunc: function (xData,Status) {
          var currentItemURL = this.item;
          $(xData.responseXML).find("WorkflowTemplates > WorkflowTemplate").each(function (i,e) {
            if ($(this).attr("Name") == "Invoice Approve") {
              var guid = $(this).find("WorkflowTemplateIdSet").attr("TemplateId");
              if (guid != null) {
                workflowGUID = "{" + guid + "}";
                $().SPServices({
                  operation: "StartWorkflow",
                  item: currentItemURL,
                  templateId: workflowGUID,
                  workflowParameters: workflowParams,
                  async: true,
                  completefunc: function () {
                    if (total == counter) {
                      if (waitDialog != null) {
                        waitDialog.close();
                      }
                      SP.UI.Notify.addNotification("Started workflow approved process for selected invoice.",false);
                      window.location.reload();
                    }
                    counter++;
                  }
                });
              }
            }
          });
        }
      });
    }
  }catch (e) {
    if (waitDialog != null) {
      waitDialog.close();
    }
    AddStatus("There is an exception. Error: " + e.message,"red");
  }
}

As you can see, you have an easy way to provide an easy way to start a process on multiple items at the same time. Thanks to SPServices, working with SharePoint client side is more flexible and easy.

Alberto Diaz Martin
MVP SharePoint
adiazcan@hotmail.com
@adiazcan
http://geeks.ms/blogs/adiazmartin

Continue reading »]]> People reach out to me all the time to ask my advice on how to accomplish certain things with SharePoint. Sometimes I can help, and sometimes their questions are way beyond me. One of the benefits of being reasonably well known in the SharePoint space is that people tend to come to me with questions that are up my alley.

When the questions aren’t something I can handle, I usually suggest that they use one of the public forums out there. My favorite is SharePoint StackExchange and in a distant second, the MSDN Forums for SharePoint.

Other times, either due to how they found me or based on the content of their questions, things stay in an email exchange.

The other day, my friend and colleague Christina Wheeler (@cwheeler76) passed along some questions from someone she knew [I've edited each part of the exchange a little for clarity and anonymity]:

I was wondering if you have a good resource within your network that might have published a blog about the different ways to access Sharepoint list data (client side scripting using something like SPServices or server side scripting using a deployable web part). Also, are there any other ways to accomplish this? I know the data view web part is another method, but it has its limitations.

A good example would be wanting to combine data from a SharePoint list and an external list and display both back to the browser window. I thought SPServices would be an excellent alternative to the data view web part, because it wouldn’t require taking the server down to deploy or redeploy. However, there are concerns coming from my team that client side is not as fast, secure etc. So I am just looking to see if there are any resources out there that have addressed this as it relates directly to Sharepoint.

Well, she certainly arrived in the right place with those questions. Since SPServices is mine, I can certainly answer any questions about it better than most people. The first thing I did was refer her to the post that Mark Rackley (@MrAckley) and I wrote together called When to Choose SPServices vs. the Client Side Object Model (CSOM). That post has gotten a lot of reads and Mark and I still think it covers the topic pretty well.

That prompted the next set of questions:

Thank you so very much for pointing me to all this valuable information! [...] mentioned the SPServices [...], and from then, I was hooked. Honestly, it was the number one thing I took away [...] because of its potential to get around some Sharepoint limitations. To give you an example, we have a [...] calendar that is managed under the IT site for the Sharepoint intranet. We like to display a summary of the daily or upcoming downtime to appear on the home page. The only way to display this data from another sub site (before) was with an RSS feed. The problem with the RSS feed is when we get into reoccurring events on the Sharepoint calendar. Now, I abandoned the RSS feed in favor of SPServices and it works beautifully.

My problem comes in with trying to get everyone on board that client scripting is okay to use for returning SharePoint list data. This argument is a perfect example. I am familiar with both client side scripting (javascript, xslt, jquery) and server side scripting with C#, but I don’t claim to be an expert. The argument that has been presented to me is that server side scripting is preferred because:

1.) It’s more secure

2.) It’s browser independent

3.) It’s better from a performance perspective

I tend to disagree that server side scripting is always the better answer for Sharepoint solutions. For one, we are not talking about writing an ERP payroll system where I plan to return thousands and thousands of records, so the amount of data I plan to return from a SharePoint list is minimal enough that I don’t think performance is a concern. For browser independence, that’s why I use jquery. And I don’t really know the answer about security. I think it comes down to what I want to do with the javascript. I am talking about using js to return a Sharepoint list. In this scenario, there is no increased threat of any kind by choosing to use client side javascript over a custom deployable web part written in C#. The case I am trying to argue is that using client side scripting to access a Sharepoint list is now possible, and in some cases, more desirable because it is easier to test, deploy, update and would not require any server downtime. I would just like to know your thoughts on this, or perhaps any resources…another blog or white paper you wrote that touches on best practices for when to use client side scripting vs server side development? Please bear with me because I have only been using Sharepoint for 6 months. Are there any other options to displaying Sharepoint list data other than using client side scripting like SPServices or CSOM, or to write an ASP.net page or deploy a custom web part that uses the Sharepoint Object model reference? I’m sure this is such an obvious answer that I have never really understood the answer to!

We plan to debate this issue tomorrow and I am just trying to make sure I understand the concerns/risks about coding for Sharepoint, specifically. There are lots of resources that touch on when to use client side scripting vs server side coding, but I think it’s not so black and white when it comes to working with Sharepoint.

And my reply was this:

You’re spot on in your thinking. This is a classic “it depends” scenario, of course. A good architect looks at all of the possible tools to solve the problem and decides where and when to use each one. Client side scripting is an excellent option for some things and just downright a bad idea for others.

The security argument is moot. The Web Services fully respect the permission model. If the user can’t access something through the UI, they can’t through the Web Services, either. QED. In a way, it’s even *more* secure than server side code since it’s impossible to elevate permissions, which many developers do as a common practice whether it’s needed or not.

Here are some more posts which may be helpful [each here on my blog]:

http://sympmarc.com/2011/05/27/elevating-permissions-with-sharepoints-web-services/

http://sympmarc.com/2011/06/06/using-script-to-hide-content-not-always-a-good-idea/

http://sympmarc.com/2011/05/18/sharepoint-myths-part-2/

Finally, the best argument that you can make is that Microsoft is going to a distributed, client side development model in SharePoint 2013, relying on (you guessed it) JavaScript and jQuery much of the time. If they are baking it into the product set by expanding their version of the API (versus mine with SPServices) how can someone argue that client side development is flat out a bad idea?

I don’t know if this little exchange will be useful for anyone else or not. However, it seems like every time I answer questions like there, it helps me to crystalize my thinking a little more. If it’s helpful to others, great. Otherwise, at least I had a little fun writing it up.

Continue reading »]]> There was an interesting question over in the MSDN Forums the other day that I struggled to answer. It was a headscratcher, so I had to figure it out. In the thread, emfuentes27 wanted to know why s/he saw different results in SharePoint Designer than in the browser when using this formula:

<xsl:value-of select="number(ddwrt:DateTimeTick(ddwrt:GenDisplayName(string(@Due_Date))))- number(ddwrt:DateTimeTick(ddwrt:GenDisplayName(string($Today))))" />

Not only had I never seen the ddwrt:DateTimeTick function (no documentation on that is available anywhere at all that I can find), but the numbers just didn’t make sense.

The ddwrt:DateTimeTick isn’t documented there and I’d never seen it in the wild. At least now I know about it.

To determine the days between two dates in the past, I’ve always used date arithmetic XSL templates, as I explain in my post Date Arithmetic in SharePoint DVWPs. The ddwrt:DateTimeTick function turns out to be a lot easier to use, but as I said, the numbers just didn’t make sense. They didn’t make sense, that is, until I went back to a little arithmetic.

It seems that the values in the browser were off from the ones in SPD (I tested this in WSS 3.0 because I had that VM open) by a factor of 864000000000. Trying to figure out the significance of that, I realized that it’s the number of seconds in a day times 1 million:

864000000000 = 60 * 60 * 24 * 1000000

60 * 60 * 24 = the number of seconds in a day.

Wolfram Alpha helps with this. Try going there and typing in 86400 seconds.

Who knows why this is the case, but this equation will give you the right answer in a browser (it will be wrong in SPD), which is what you are really after in the first place:

<xsl:value-of select="(number(ddwrt:DateTimeTick(ddwrt:GenDisplayName(string(@Lead_x0020_Date)))) - number(ddwrt:DateTimeTick(ddwrt:GenDisplayName(string(@Created))))) div 864000000000" />

The ddwrt:DateTimeTick function is a great tool for your XSL work in SharePoint. It returns the number of “ticks” since Dec 30, 1899 in SharePoint Designer. That’s an odd date to use as the base, but you can test it by adding this to your XSL:

1899-12-30::<xsl:value-of select="ddwrt:DateTimeTick(ddwrt:GenDisplayName(string('0001-01-01')))" /><br/>
1899-12-31::<xsl:value-of select="ddwrt:DateTimeTick(ddwrt:GenDisplayName(string('0001-01-02')))" /><br/>
1900-01-01::<xsl:value-of select="ddwrt:DateTimeTick(ddwrt:GenDisplayName(string('0001-01-03')))" /><br/>

Even odder, the base date in the browser seems to be Jan 1, 0001. You don’t see that date bandied about too often. Go ahead; give it a go:

0001-01-01::<xsl:value-of select="ddwrt:DateTimeTick(ddwrt:GenDisplayName(string('0001-01-01'))) div 864000000000" /><br/>
0001-01-02::<xsl:value-of select="ddwrt:DateTimeTick(ddwrt:GenDisplayName(string('0001-01-02'))) div 864000000000" /><br/>
0001-01-03::<xsl:value-of select="ddwrt:DateTimeTick(ddwrt:GenDisplayName(string('0001-01-03'))) div 864000000000" /><br/>

This is yet another example where the rendering engine in SharePoint Designer doesn’t yield the same results as what the SharePoint server provides. Don’t expect something like this to be fixed any time soon, though, given Microsoft’s abandonment of the Design and Split View in SharePoint Designer 2013.

We don’t really care what the base date is for zero ticks, of course; we just want to be able to use the values to determine the difference in days between two “ticks”. As long as you use the million-day-seconds trick, all is well.

This post also appeared on NothingButSharePoint.com‘s EndUserSharePoint channel on 2013-01-09. Visit the post there to read additional comments.

Continue reading »]]> I have always wondered what would happen if I created a custom theme for jQueryUI using the excellent ThemeRoller tool and then wanted to upgrade my version of jQueryUI. It always seemed like the odds were that the existing CSS and accompanying image files wouldn’t change too much (I’ve found that there’s far less disruption in an upgrade to jQueryUI than there is in an upgrade to jQuery itself), but at a certain point, there were bound to be changes that mattered enough to cause a problem.

I haven’t run into any of those problems, but as I’m carefully upgrading jQueryUI in a client installation, I don’t want to make any egregious mistakes. (The buck stops with me no matter how crappy a tool I’m using works.)

I decided to Bingle to see if there was a converter that some kind soul may have built out there somewhere. Lo and behold, it’s even easier than that. I found a nice little answer over on StackExchange that shows how. Thanks to StackExchange user fbuchinger for that. Gotta love the Internet.

If you open your custom CSS file and scroll down to the second main section, you’ll see something like this:

/*!
 * jQuery UI CSS Framework 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em[...SNIP...]cornerRadiusShadow=5px
 */

Assuming that you haven’t customized your theme manually since downloading it (probably a big assumption, actually) this link in the CSS file allows you to go right back to where you started in the ThemeRoller. Simply copy that link and paste it into a browser window and the ThemeRoller will load up your custom theme just as you created it.

My guess is that this would be a bit more tenuous depending on how many versions removed you are from the current one, but I’ve had no problems today. This is also helpful if you create a theme and realize a few days later that you missed that baby blue hover color that only shows up with one of the widgets or something.

Continue reading »]]> There was a post from Roger Langedal over on SPYam the other day asking about getting the value of a Managed Metadata column using jQuery.

I hadn’t tried this before, so I thought I should give it a go.

As when I first figured out how to get the value of a People Picker, which later evolved into the SPFindPeoplePicker function in SPServices, consider this a rough first pass. I’m sure I’m not covering many edge cases because I haven’t experimented enough yet.

The basics are pretty simple. The Managed Metadata Picker (or perhaps it should be called a Taxonomy Picker, given the CSS classes that Microsoft uses within it) is embedded within the form much like the People Picker is. Luckily there is a pretty easy way to identify it in the page. When you dig into the markup in the DOM, there’s a div which has the column name as its Title attribute.

In my experiment, I’ve got a column called Office, and here’s what that div looks like:

<div class="ms-taxonomy-fieldeditor ms-taxonomy-writing" title="Office" style="width: 362px;">

There’s another div within that one, and within the second div, you’ll see several spans.

If there are spans with the div which have the CSS class valid-text, then they contain the valid value(s) you’ve selected for the picker. For example, Newton Centre below.

If there are spans within the div with the CSS class invalid-text, they contains the entered value(s) which aren’t legitimate values for that column. For instance, if I type in Hanover for my Office (which isn’t one of the allowed values), it’ll be in one of these spans.

So getting at the acceptable values is fairly simple with jQuery. Again, this is a first pass, but it should be serviceable.

// Find the div for the column which contains the entered data values
var thisDiv = $("div[title='Office']");
// Fill an array with the acceptable values
var acceptableValues = [];
thisDiv.find("span.valid-text").each(function() {
  var thisValue = $(this);
  acceptableValues.push(thisValue.text());
});

At this point, you’ll have an array which contains all of the text values which are acceptable, meaning that they are legitimate values from the Term Set.

If you’d like to get at the unacceptable values, it’s basically the same idea:

// Find the div for the column which contains the entered data values
var thisDiv = $("div[title='Office']");
// Fill an array with the unacceptable values
var unacceptableValues = [];
thisDiv.find("span.invalid-text").each(function() {
  var thisValue = $(this);
  unacceptableValues.push(thisValue.text());
});

From here, you could do whatever you’d like with the values. They are in an array, so if you’d like to save them to another column, you’ll probable want to join them into a single string. The code below will join the values together into one nice, displayable string, with the values separated by commas. If there’s just a single value, that the string will be that single value.

var accepted = acceptableValues.join(", ");
var unaccepted = unacceptableValues.join(", ");

Let me know if this works for you, and if not, what issues you might have. Hope it helps.

Continue reading »]]> Dan Antion (@dantion) did a great post over on his SharePoint Stories blog this morning called People Want Different Things. Dan does one excellent post per week on that blog. They arrive every Saturday morning, and reading it is usually one of the first things I do of a Saturday.

Today’s was a great post, as always, and prompted me to write a comment, much of which turned into this post. Dan’s post hits on something I feel very strongly about: there is no one-size-fits-all concept with SharePoint.

There are many, many people out on SharePointLand who seem to think that there is one way to do any one thing in SharePoint. Usually it’s the way that they know best, and is sometimes the way that they are selling (though sales people in SharePointLand seem to be far more ethical than in the other lands I have visited).

This mindset can apply across many dimensions: development, branding, information architecture, process implementation, you name it. There’s a reason people joke about what I and many other SharePointilists usually say, but the right answer is almost always “It depends.”

In Dan’s post, he gives the three main ways he approaches most of his SharePoint work (I won’t repeat them here, read Dan’s post), and I happen to know that there are favors and variations on the three (the jazz masters have nothing on us SharePointilists) and there are probably a fourth and fifth or more some days, too.

And that’s Dan’s point, I believe. Using SharePoint has some science to it, but to a large degree it’s more art than science. Anyone who marches into a new client, project, or meeting thinking they positively have the answer up front is more than likely wrong. SharePoint is a collaboration platform first and foremost – which can make it frustrating to use in other ways – and building stuff in SharePoint ought to be a collaborative process. I call that collaborative development, and whether you label it with other buzzwords like Agile or not, I firmly believe it’s the best approach.

So it’s not just that People Want Different Things; it goes beyond what any one person likes. It’s what the right answer turns out to be. Sometimes you don’t truly know that answer until you have finished. Of course, work on SharePoint-based solutions should never really be finished, but that’s another another post for a different day.

Continue reading »]]> This is a really simple little thing. I end up writing little functions like this all the time, and never think much about them. But they are darn useful.

This little function will hide a list column’s row in the form. You might want to do this on a NewForm but not the EditForm, for instance, so setting the column to be hidden may not be a good answer. With this little function, you can hide the column’s row conditionally or on page load – whatever suits your fancy.

Here’s the function. All you need to pass it is the DisplayName of the column.

// Function to hide a column's row in the form
function hideColumn(c) {
  $(".ms-formlabel h3 nobr").filter(function() {
    var thisText = $.trim($(this).clone().children().remove().end().text());
 //   alert("::" + thisText + "::");
    return thisText.indexOf(c) === 0 && thisText.length === c.length;
  }).closest("tr").hide();
}

Then you might call the function like this:

$(document).ready(function() {
  hideColumn("Priority");
});

This will simply hide the column, but any value in it will still be submitted.

For instance, I just added a column to a list called “User Agent String”, set like so:

$("textarea[title='User Agent String']").val(navigator.userAgent);

and then hid it:

hideColumn("User Agent String");

Put it together and what have you got? (Bonus points to anyone who knows the next line in the song.)

$(document).ready(function() {

  // Set the User Agent String
  $("textarea[title='User Agent String']").val(navigator.userAgent);

  // Hide the columns which aren't relevant to the user
  hideColumn("User Agent String");

});

// Function to hide a column's row in the form
function hideColumn(c) {
  $(".ms-formlabel h3 nobr").filter(function() {
    var thisText = $.trim($(this).clone().children().remove().end().text());
 //   alert("::" + thisText + "::");
    return thisText.indexOf(c) === 0 && thisText.length === c.length;
  }).closest("tr").hide();
}

Continue reading »]]> Well, Microsoft’s SharePoint Conference 2012 has come to a close, and I’m writing this post on the plane flying back to Boston. It was a humdinger of a conference. Not only was this the largest SharePoint conference on record, having it in Las Vegas made everything seem just that much bigger and flashy.

Whether it was strolling the Exhibit Hall or the halls of the convention center or sitting in one of the over 250 sessions, all the buzz was about SharePoint 2013, which was released to manufacturing (RTM – a Microsoft term for”shipped” ). While only one of my clients has indicated any real interest in 2013 at this point (I do a mix of SharePoint 2007 and 2010 work these days), it was hard not to be swept up in the fever around this new release. SharePoint 2013 is a huge undertaking in its own right, but Microsoft has also RTMed Office 2013 and Windows 8 in concert, and there was a lot of information at SPC about the great integration across those toolsets.

SharePoint 2013 Unveiled: Live from Las Vegas

Thursday I had the honor of participating in a webinar for SusQTech’s ’30 on Thursday’ series called SharePoint 2013 Unveiled: Live from Las Vegas. Liam Cleary and I talked about the key takeaways we had from attending SPC this week. Since our perspectives are different and we do different types of work, of course we keyed in on different aspects of 2013. In the webinar, I talked about my three main takeaways from SPC. You can listen to the free webinar recording when it’s available if you are interested.

The Democratization of SharePoint Development

With the new App Model and the ability to host apps off-SharePoint, the market opens up to developers of many stripes, as long as those stripes blend into the colors of the Web development savannah. I’ve been promoting this for quite a few years now, and I’m truly glad to see it happen under Microsoft’s auspices. Now we have “official” ways to use JavaScript, jQuery, etc. to create SharePoint apps, and in fact, many SharePoint apps will be all JavaScript apps. I’m not saying that the .NET model hasn’t been a successful way to build upon SharePoint, I’m saying that now we have the options that I think we need to push the envelope even further on usability and distributed processing where it makes good sense.

New Search Features

The most exciting new Search feature is, for me, hands down the Content Search Web Part. This little beauty will be a game changer. What it allows you to do is surface content from anywhere in the farm using custom display templates. That means that it truly no longer matters where content lives, as long as it is correctly constructed and  tagged so that search can identify it. Think of the CQWP as the Content Query Web Part with nuclear power. The underlying search engine in 2013 is greatly improved to start with and the CSWP makes it sing. Think of this example: a CSWP in a page in a Community of Practice or Center of Excellence site could surface collaborative content a from across the Site Collection which meets certain keyword or content inclusion criteria, with ratings and usage metrics used as further filters. All this can happen with the expected, appropriate security trimming for each individual user or permissions groups. The UI for the CSWP is simple enough to allow a Site Administrator to set it up, with added capabilities for writing more complex queries in the advanced mode.

Access 2013 Apps

While I can see that there are some parts of Access 2013 story which haven’t quite been written yet, this approach to developing SharePoint applications shows great promise, as Ruven Gotz (@ruveng) and I have discussed in person and had been hoping on his blog. Access has always been an underrated development environment in my opinion, seen as underpowered and rejected in favor of more complicated server-based tools over the last half dozen years or so. With this release’s ability to store its content in SQL Server in Azure, the corporate IT concern that the data isn’t controllable and secure is mitigated. The tool itself has taken on a wonderfully minimalistic likeness of the Windows 8 UI (aka Metro) which is clean yet extremely capable for building real applications.

The integration with SharePoint isn’t fully there yet, and SharePoint list data can only be used in read-only mode in the release. However, I can see a path forward where Access 2013 becomes a viable replacement for InfoPath, and given that InfoPath received no development love this go-around it may well be what Microsoft is thinking as well. Forms development becomes easier, at least to me, and with the underlying data constructs and event triggers we have an environment ready to take off. When we hear “in this release” from Microsoft, we’re used to thinking three years or so, but my gut tells me that paradigm is about to be broken in a significant way, so stay tuned on this one.

But Wait, There’s More…

Other things worthy of note are the new Design Manager capabilities for building out your branding and the improved workflow capabilities of SharePoint Designer. SharePoint Designer itself has become a bit of an orphan, as it loses the Design and Split views in 2013. While the Design Manager capabilities can fill some of that gap (but only with the Server license when Publishing is enabled) we have a gap there which isn’t filled by anything other than perhaps Access 2010.

Improved Social in 2013 + Yammer

Social in 2013 is leaps and bounds beyond what 2010 gives us. We can follow people, documents, sites, and tags. We can monitor our own newsfeeds and access that content via rich client side APIs. But the real ace in the hole here is going to be Yammer. While I’m impressed with Yammer as it stands, the best is unknown and yet to come, I think. I’m impressed with the SharePoint integration points that Yammer has already built in the few months since the purchase by Microsoft. But I think the real secret sauce they bring to the table is their deep knowledge of rapid feature development and deployment in a true SaaS approach. Microsoft can leverage that knowledge and significantly learn from it. If they don’t, and instead wipe the secret sauce away, then it is at their peril. While there are a lot of positive things to say about Microsoft’s products, they simply cannot continue in the three year “enterprise” cycle they have followed for the last few decades. Yammer’s mindset (and to a lesser degree, Skype‘s) can push Microsoft out of this rut into being a nimble and potent “player” in social or any other part of the stack. By pushing out regular new features and existing feature refreshes, Microsoft can start to act more like its competition has been acting for a long time now. We see the vision in the vast array of current releases that follow the same patterns in design and development; having them continue to evolve rapidly and in concert would be a stellar improvement.

There was plenty more information for IT Pros and Business people as well, of course, but I focused almost exclusively on the Development track. Since the session videos will be available online, I’ll probably try to catch on some of the better ones based on the tweets I saw throughout the conference later.

All Work and No Play…

Oh, and the parties. Vegas isn’t known for low key events, and neither do people at a conference there act that way. Everything was bigger, louder, flashier, and more exciting than last year’s SPC in Anaheim. Here were the events I was lucky enough to attend.

• Opening Reception on Sunday night
• Lounge SPC at the House of Blues Monday night
• MVP/MCP/Insider party at Border Grill Monday Night
• Jon Bon Jovi and the Kings of Suburbia at the Mandalay Beach Tuesday night

• US MVP breakfast on Wednesday morning
• Dinner Wednesday night at L’Atelier de Joël Robuchon with Michal Pisarek (@michalpisarek), Denise Ching (@deniseching), and Cindy Hui (@CindyHui2). OK, so this wasn’t really a party, but it was the best meal of the week for me. Food photos here.
• The SharePoint City party at Tryst on Wednesday night, sponsored by Axeler, Jornata, and many more. For some reason, they had Pamela Anderson show up. Go figure.

Wrap Up

All in all, this SPC was the biggest Microsoft event I’ve ever attended, with more information and more glitz than ever. Thanks to everyone on the event planning and logistics staff for all of the yeoman’s work. No, everything wasn’t perfect. The lack of wireless capabilities during almost the entire conference certainly detracted from getting information and messaging out that Microsoft should have wanted people not in attendance to hear. There were many sessions that were far to popular for the size of the room the were held in. Predicting this sort of thing is hard, but MySPC should have given a better handle on things. There were too many sessions at any given time to even try to learn about much out side one’s own “track”, though the videos will help with that after the fact. We easily spot these shortcomings and can’t see many of the things that simply went right. The staff at the Mandalay Bay complex were so helpful and knowledgeable most of the time that it was almost creepy, they really seem to enjoy their work and making things go well for us attendees.

So, a big thank you to everyone who had any part of the panning and execution. I hope to see you in ??? next year!

Continue reading »]]> This is just a quick post I’d like to use to gather your thoughts on where SPServices should go from here.

At The Microsoft SharePoint Conference in Las Vegas, going on right now, many people I’m talking to are asking me about my plans. I’ve been mulling it over for a few months now, and I have my own ideas. But I’d love to hear where you’d like to see SPServices fit into the SharePoint 2013 landscape. Let me know what you think in the comments, or over on Facebook here or here.

Here’s a photo of Jeff Teper speaking at the keynote today. I had a great view from the front row, center.