Category Archives: SharePoint Development

HTTP 406 Error When Using Angular $http.get Against SharePoint REST End Points

Update: Marc AD ndersson pointed out this great piece of info: http://blogs.office.com/2014/08/13/json-light-support-rest-sharepoint-api-released/.  That explains a lot :).

That may be the worst title of a blog post ever!  Anyhoo.

I typically do all of my prototyping against an O365 instance.  I have my personal instance so that I don’t have to be worried about affecting anyone else.  As an aside – remember when we call carried around virtual machines on our laptops with MOSS – SQL Server, IIS, deciding Hyper-V vs. VMWare?  Anyhoo…

I had developed an app using Angular in this environment that does, among other things, this:

$http.get(serverUrl)
.success(function(data, status, headers, config) {

    var getLinksResponse = data;

    getLinksResponse.value.forEach(function(theResult) {

    // and so on and so froth

This was working just fine in two different SharePoint online environments.  However, when my colleague ported it to a Cloudshare instance, he was getting an HTTP 406 error (which was the first time I ever got that one, so … yay, I guess).  We did a bit of research and noticed that the “Accept” header was off.  SharePoint online was perfectly happy with:

Accept: application/json

But the cloudshare instance (which is SP on prem, hosted in a virtual server) wanted the classic “odata=verbose” added in as well:

Accept: application/json;odata=verbose

To fix that, we added the header as such:

var config = {headers: {
‘Accept’: ‘application/json;odata=verbose’
}
};

$http.get(serverUrl,config)
.success(function(data, status, headers, config) {

  var getLinksResponse = data;

  getLinksResponse.value.forEach(function(theResult) {

  // and so on and so froth

That got rid of the 406, but it also changed the format of the response.  It was more … verbose.  (haha!)  More changes were required and here’s the final result:

var config = {headers: {
‘Accept’: ‘application/json;odata=verbose’
}
};

$http.get(serverUrl,config)
.success(function(data, status, headers, config) {

  var getLinksResponse = data;

  getLinksResponse.d.results.forEach(function(theResult) {

  // and so on and so froth

This only turned into a 30 minute problem for us, so we lucked out.  Hopefully someone finds this useful.

</end>

Growing Awareness / Adoption of JavaScript Frameworks

My colleague, Javed Ansari (http://www.bigapplesharepoint.com/team?showExpertName=Javed%20Ansari&rsource=pgblog), wrote a short summary blog post on frameworks he likes or at least has been using with with SharePoint: http://www.bigapplesharepoint.com/pages/View-An-Insight.aspx?BlogID=53&rsource=PGBlog).

jQuery seems to have been the victor on the field, so to speak, for years now, but the others are more new and stills sort of battling it, like Angular. (SPServices, of course, has been a life saver for years and will continue to be so I think).

What are people using? Are they focused more on Microsoft’s tooling (CSOM / JSOM) or moving more toward Angular, Knockout, Ember, etc?

I have a growing bias toward these non-Microsoft frameworks. I think the MSFT stuff is harder and harder to work with, requiring almost as much of learning curve as old-style server-side dev.

Post a comment here or over at Big Apple SharePoint if you want to discuss (Big Apple will have more likelihood of a good discussion).

</end>

Spinning SharePoint Timer Jobs from Site Collection Configuration

My colleague, Ashish Patel, wrote a blog post describing a flexible timer job architecture that affords some nice flexibility to support long-running tasks and/or reports.  In his words:

1. Analyzing Checked out files and sending reminders to the individuals if the number of days (since the file was checked out) exceed certain threshold limits

2. Removing links from other content when a particular content is removed or archived from the system

3. User wants to see all the alerts that he subscribed in all webs in the site collection

4. Sending a reminders to authors to review the content when a review time was specified in the content and that date is approaching

Well, the list goes on…

– See more at: http://www.bigapplesharepoint.com/pages/View-An-Insight.aspx?BlogID=40#sthash.7cKuiwly.dpuf

There are times in my past when having something like this would have been very helpful.

</end>

How to: Configure Unit Test and Test Coverage with QUnit.js and Blanket.js For an Office 365 SharePoint App

Intro

I’ve been exploring unit testing and test coverage for JavaScript as I work on a new SharePoint app for SharePoint online in the Office 365 suite.  The obvious research paths led me to Qunit.js and right after that, to Blanket.js.

QUnit let me set up unit tests and group them into modules.  A module is just a simple way to organize related tests. (I’m not sure I’m using it as intended, but it’s working for me so far with the small set of tests I have thus far defined).

Blanket.js integrates with Qunit and it will show me the actual lines of JavaScript that were – and more importantly – were not actually executed in the course of running the tests.  This is “coverage” – lines that executed are covered by the test while others are not.

Between setting up good test cases and viewing coverage, we can reduce the risk that our code has hidden defects.  Good times.

Qunit

Assuming you have your Visual Studio project set up, start by downloading the JavaScript package from http://qunitjs.com.  Add the JavaScript and corresponding CSS to your solution.  Mine looks like this:

image

Figure 1

As you can see, I was using 1.13.0 at the time I wrote this blog post. Don’t forget to download and add the CSS file.

That out of the way, next step is to create some kind of test harness and reference the Qunit bits.  I’m testing a bunch of functions in a script file called “QuizUtil.js” so I created an HTML page called “QuizUtil_test.html” as shown:

image Figure 2

Here’s the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>QuizUtil test with Qunit</title>
    <link rel="stylesheet" href="../CSS/qunit-1.13.0.css" />
    <script type="text/javascript" src="QuizUtil.js" data-cover></script>
    <script type="text/javascript" src="qunit-1.13.0.js"></script>
    <script type="text/javascript" src="blanket.min.js"></script>

    <script>
        module("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", function () {
            var goodValue = "1;#Paul Galvin";

            equal(getIDFromLookupField(goodValue) + 1, 2), "ID of [" + goodValue + "] + 1 should be 2";
            equal(getIDFromLookupField(undefined), undefined, "Undefined input argument should return undefined result.");
            equal(getIDFromLookupField(""), undefined, "Empty input argument should return an undefined value.");
            equal(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), undefined,"Should always return a result convertible to an Integer");
            equal(getIDFromLookupField("2;#some other person"), "2", "Checking [2;#some other person].");
            equal(getIDFromLookupField("9834524;#long value"), "9834524", "Large value test.");
            notEqual(getIDFromLookupField("5;#anyone", 6), 6, "Testing a notEqual (5 is not equal to 6 for this sample: [5;#anyone]");

        });

        module("htmlEscape");
        test("QuizUtil htmlEscape()", function () {
            equal(htmlEscape("<"), "&lt;", "Escaping a less than operator ('<')");
            equal(htmlEscape("<div class=\"someclass\">Some text</div>"), "&lt;div class=&quot;someclass&quot;&gt;Some text&lt;/div&gt;", "More complex test string.");
        });

        module("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", function () {
            equal(getDateAsCaml(new Date("12/31/2013")), "2013-12-31T:00:00:00", "Testing hard coded date: [12/31/2013]");
            equal(getDateAsCaml(new Date("01/05/2014")), "2014-01-05T:00:00:00", "Testing hard coded date: [01/05/2014]");
            equal(getDateAsCaml(new Date("01/31/2014")), "2014-01-31T:00:00:00", "Testing hard coded date: [01/31/2014]");
            equal(getTodayAsCaml(), getDateAsCaml(new Date()), "getTodayAsCaml() should equal getDateAsCaml(new Date())");
            equal(getDateAsCaml("nonsense value"), undefined, "Try to get the date of a nonsense value.");
            equal(getDateAsCaml(undefined), undefined, "Try to get the date of the [undefined] date.");
        });

        module("getParameterByName");
        test("QuizUtil getParameterByName (from the query string)", function () {
            equal(getParameterByName(undefined), undefined, "Try to get undefined parameter should return undefined.");
            equal(getParameterByName("does not exist"), undefined, "Try to get parameter value when we know the parameter does not exist.");

        });

        module("Cookies");
        test("QuizUtil various cookie functions.", function () {
            equal(setCookie("test", "1", -1), getCookieValue("test"), "Get a cookie I set should work.");
            equal(setCookie("anycookie", "1", -1), true, "Setting a valid cooking should return 'true'.");
            equal(setCookie("crazy cookie name !@#$%\"%\\^&*(()?/><.,", "1", -1), true, "Setting a bad cookie name should return 'false'.");
            equal(setCookie(undefined, "1", -1), undefined, "Passing undefined as the cookie name.");
            equal(getCookieValue("does not exist"), "", "Cookie does not exist test.");
        });

    </script>
</head>
<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>

</body>
</html>

There are several things happening here:

  1. Referencing my code (QuizUtil.js)
  2. Referencing Qunity.js
  3. Defining some modules (getIDFromLookup, Cookies, and others)
  4. Placing a <div> whose ID is “qunit”.

Then, I just pull up this page and you get something like this:

image

Figure 3

If you look across the top, you have a few options, two of which are interesting:

  • Hide passed tests: Pretty obvious.  Can help your eye just see the problem areas and not a lot of clutter.
  • Module: (drop down): This will filter the tests down to just those groups of tests you want.

As for the tests themselves – a few comments:

  • It goes without saying that you need to write your code such that it’s testable in the first place.  Using the tool can help enforce that discipline. For instance, I had a function called “getTodayAsCaml()”.  This isn’t very testable since it takes no input argument and to test it for equality, we’d need to constantly update the test code to reflect the current date.  I refactored it by adding a data input parameter then passing the current date when I want today’s date in CAML format.
  • The Qunit framework documents its own tests and it seems pretty robust.  It can do simple things like testing for equality and also has support for ajax style calls (both “real” or mocked using your favorite mocker).
  • Going through the process also forces you to think through edge cases – what happens with “undefined” or null is passed into a function.  It makes it dead simple to test these scenarios out.  Good stuff.

Coverage with Blanket.js

Blanket.js complements Qunit by tracking the actual lines of code that execute during the course of running your tests.  It integrates right into Qunit so even though it’s a whole separate app, it plays nicely – it really looks like it’s one seamless app.

This is blanket.js in action:

image Figure 4

image

Figure 5

(You actually have to click on the “Enable coverage” checkbox at the top [see Figure 3] to enable this.)

The highlighted lines in Figure 5 have not been executed by any of my tests, so I need to devise a test that does cause them to execute if I want full coverage.

Get blanket.js working by following these steps:

  1. Download it from http://blanketjs.org/.
  2. Add it to your project
  3. Update your test harness page (QuizUtil_test.html in my case) as follows:
    1. Reference the code
    2. Decorate your <script> reference like this:
    <script type="text/javascript" src="QuizUtil.js" data-cover></script>

Blanket.js picks up the “data-cover” attribute and does its magic.  It hooks into Qunit, updates the UI to add the “Enable coverage” option and voila!

Summary (TL; DR)

Use Qunit to write your test cases.

  • Download it
  • Add it to your project
  • Write a test harness page
  • Create your tests
    • Refactor some of your code to be testable
    • Be creative!  Think of crazy, impossible scenarios and test them anyway.

Use blanket.js to ensure coverage

  • Make sure Qunit is working
  • Download blanket.js and add it to your project
  • Add it to your test harness page:
    • Add a reference to blanket.js
    • Add a “data-cover” attribute to your <script> tag
  • Run your Qunit tests.

I never did any of this before and had some rudimentary stuff working in a handful of hours. 

Happy testing!

</end>

undefinedSubscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Lists.asmx, GetList and “Value cannot be null”

I discovered today that the GetList() method in lists.asmx web service has to be called very carefully or it’s prone to throw a mysterious “Value cannot be null” exception (and that’s assuming you can get past the even worse generic error message, “Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ was thrown.”)  Specifically, I found that you can’t provide any kind of prefix on the GetList method.  The following jQuery snippet illustrates the point:

image

If you do that, the web service responds with “Value cannot be null” as per this fiddler-provided HTTP transcript:

<?xml version="1.0" encoding="utf-8"?>
  <soap:Envelope
     xmlns:soap="
http://schemas.xmlsoap.org/soap/envelope/"    
     xmlns:xsi=”
http://www.w3.org/2001/XMLSchema-instance
     xmlns:xsd="
http://www.w3.org/2001/XMLSchema">

  <soap:Body>
    <soap:Fault>
      <faultcode>soap:Server</faultcode>
      <faultstring>
        Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ was thrown.
      </faultstring>
      <detail>
        <errorstring xmlns="
http://schemas.microsoft.com/sharepoint/soap/">
Value cannot be null.
        </errorstring>
      </detail>
    </soap:Fault>
  </soap:Body>
</soap:Envelope>

Of course, you probably wouldn’t add that “s0” prefix on your own, but some tools are prone to do it (like Eclipse).

This is all the more confusing / frustrating because other methods tolerate prefixes.  For instance, the GetListCollection method doesn’t mind if it’s been prefixed, even with nonsense prefixes like “xyzzy”:

image

This “value cannot be null” seems fairly common with lists.asmx so hopefully this will help someone out in future.

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Endlessly Nesting <div> Tags and jQuery

This seems like such an oddball topic, I’m not sure it’s really worth blogging about, but that’s never stopped me before, so here we go Smile

I’m working out on a project where I’m pulling some data from a search, packaging it up into an XML message and then that XML is ultimately transformed into HTML via XSLT.  There’s a lot of jQuery involved, one bit of which implements some tabbing functionality.  When you click on a tab (really, a <div>), jQuery invokes .hide() and .show() on various divs (the initial page load downloads all the content so there are no postbacks in this case).

A bunch of hours ago, the tab switching logic started to behave erratically and it wouldn’t show one of my tabs.  I ultimately tracked it down to the fact that internet explorer (at least) thought that the <div> tags nested far, far deeper than intended.The developer toolbar would show:

-<div id=”Tab1Content”>
  -<div>
    -<div>
      -<div id=”Tab2Content”>
        -<div>
           …………………………
                   </div>  <—finally showing it was closed all the way down here!

So, if I did a $(“#Tab1Content”).hide(), I’d also hide Tab2 and I could never show Tab2 if I didn’t also show Tab1.  I copied and pasted the code up into visual studio and it showed all of the div’s lining up nicely, just like they were supposed to be doing, looking like this:

-<div id=”Tab1Content”>
  +<div>
  +<div>
-<div id=”Tab2Content”>
  +<div>
  +<div>

I beat my head against the wall for a while and noticed that in the actual HTML code was generating a lot of empty <div> tags, like:

<body>

  <div id=”Tab1Content”>

    <div id=”row1” />
    <div id=”row2” />

  </div>

  <div id=”Tab2Content”>

    <div id=”row1” />
    <div id=”row2” />

  </div>

</body>

(The above is waaaaaaaaaaaay oversimplified.  The empty div tags are totally valid. Some of my <div> tags were full of content, but many more were not.  I came to the realization that my <xsl:for-each> directives were emitting the short-form div tags when the xsl:for-each didn’t’ find any data.  I forced an HTML comment into the output, as shown:

image

 

After I did that, all the div’s lined up nicely and my tab switching started working.

As always, I hope this helps someone in a pinch.

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

One Cause for “The creator of this fault did not specify a Reason.”

I’ve been doing a lot of work with SharePoint search lately and specifically the KeywordQuery class, properties and methods.

If you want the result set to return results above and beyond the usual suspects (see here), you add it to the SelectedProperties collection, as in:

myKeywordQuery.SelectProperties.Add("xyzzy");

Many thanks and a tip of the hat to Corey Roth and this enormously helpful blog post (http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2008/02/19/how-to-use-the-moss-enterprise-search-keywordquery-class.aspx)

In my case, “xyzzy” isn’t actually a managed property.  When I added it to SelectedProperties anyway, SharePoint threw one of my favorite ever runtime exceptions:

“The creator of this fault did not specify a Reason.”

I especially like the capital “R” in Reason.  This sounds to me like the .NET equivalent of “I have no mouth, and I must scream.”

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Handy Reference: Default Results from KeywordQuery Search

When you invoke the Execute() method on a KeywordQuery, you can create a ResultTable based on ResultType.RelevantResults.  This code snippet illustrates what I mean:

ResultTableCollection resultsTableCollection = myKeywordQuery.Execute();

ResultTable searchResultsTable = resultsTableCollection[ResultType.RelevantResults];

The resulting table will have the following columns of information: 

WorkId
Rank
Title
Author
Size
Path
Description
Write
SiteName
CollapsingStatus
HitHighlightedSummary
HitHighlightedProperties
ContentClass
IsDocument
PictureThumbnailURL
ServerRedirectedURL

I derived this list from a SharePoint 2010 environment, enterprise edition.  Hopefully it will be handy to someone in future.

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

One Reason for: “Failed to extract the cab file in the solution”

While working on a visual studio web part project today, I did a minor re-org of some files to be put into the _layouts folder as part of the deployment process. Specifically, I renamed a .js file from “TypeAhead.js” to “TypeAhead(old).js”  I plan to remove it as soon as its successor “TypeAhead.js” proves correct.  It looked like this:

image

This immediately caused a problem with visual studio when I tried to deploy the project:

Error occurred in deployment step ‘Add Solution’: Failed to extract the cab file in the solution.

It turns out that you should not put a parenthesis in file names.  I removed the parens and that solved the problem.

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin