SPServices Stories #13: Durandal SP3: Developing SharePoint SPAs Made Easy

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:

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: 2013-04-08-SP2013Demo

SharePoint 2010 | IE 8:

2013-04-08-SP2010Demo

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.

2013-04-08-SP2007Demo

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.

2013-04-08-OptimizedBuild

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.

2013-04-08-Development

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.

Setting Up BCS and the Secure Store Service in SharePoint 2010

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.

image

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.”

SNAGHTML4b86215

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.

Displaying Blog Posts in Different Sites in SharePoint 2010

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.

image

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.

image

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.

image

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.

image

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:

image

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.

image

In IE(, I get this prompt

image

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.

image

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.

image

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.

Working Title: Black Magic Solutions for White Hat SharePoint

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.

Using Git with SPServices on Codeplex

gitlogo@2xThis 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.

SPServices 0.7.2 ReleaseI’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.