Getting started with Durandal on SharePoint

I recently saw a presentation on using Durandal to build Single Page Applications within a SharePoint-hosted app. You can download the Sildes from the presentation on Andrew Connels blog here). It looked promising, so I wanted to give it a go. The instructions here show how to create a Durandal SPA within a SharePoint-hosted app.

Open Visual Studio 2012 and select File/New/Project/SharePoint 2013 App

Make it app named SharepointDurandalSample

d1

Next, add Durandal to the project

Go to Tools/Library Package Manger/Package Manager Console

Within the Package Manager Console, enter the command:

Get-Package -ListAvailable Durandal

d2

This will display the packages available containing the text ‘durandal’:

We want the starter kit, so enter the command:

install-package Durandal.starterkit

This added a lot of stuff to the project as you can see:

d3

If we build the project now, we get an error on the DurandalController.cs. We don’t need it, since we’re using SharePoint as the backend, so we can just delete the Controllers Folder.

The pages/Default.aspx is the starting page for the SharePoint-hosted app that Visual-studio created for us.  It wants to start the app by calling /Scripts/App.js.  We’re going to change this below so we can delete the following line from Default.aspx:

<script type=”text/javascript” src=”../Scripts/App.js”></script>

We can also delete the file /Scripts/App.js (DO NOT MISTAKENLY DELETE SCRIPTS/DURANDAL/APPS.JS)

Replace the contents of the contentsPaceholderMain inside of Defaut.aspx with

<div id=”applicationHost”>

<div>

<div>

Durandal Starter Kit

</div>

<i></i>

</div>

</div>

<script type=”text/javascript” src=”../Scripts/require.js” data-main=”../App/main”></script>

The <div> whose id is applicationHost is where Durandal will display its output. The <Script> tag tells the browser to load require.js and the start App/Main.js. (I’m not sure about the majic that makes that happen.

If we try to run the app now, we get an error because Durandal wants knockout to be loaded on the page, so we need to add knockout to default.aspx. Add the following to paceholderadditionalpagehead within default.aspx:

<script type=”text/javascript” src=”../Scripts/knockout-2.3.0.js”></script>

Now if we run the app, we get an error that jquery is undefined:

d4

Durandal seems to want jquery 1.9.1, so in the contentplaceholderadditionalpagehead of Default.aspx,replace the tag:

<script type=”text/javascript” src=”../Scripts/jquery-1.8.2.min.js”></script>

with this one:

<script type=”text/javascript” src=”../Scripts/jquery-1.9.1.js”></script>

Running the app now, We see the Durandal sample starter page:

d6

In my case, clicking on the flicker link the first time gave me an exception. But the second time its worked. I’m not sure what’s happening, but I don’t care, I just want to get at some SharePoint data for now.

So let’s create a SharePoint list we can query . in Visual Studio select

Add/New Item/List

Make the list based on the Contacts template and name it My Contacts:

d7

Edit My Contacts/My Contacts Instance/Elements.xml to add some sample data

<?xml version=”1.0″ encoding=”utf-8″?>

<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”&gt;

<ListInstance Title=”My Contacts”

OnQuickLaunch=”TRUE”

TemplateType=”10000″

Url=”Lists/My Contacts”

Description=”My List Instance”>

<Data>

<Rows>

<Row>

<Field Name=”FirstName”>Bill</Field>

<Field Name=”Title”>Gates</Field>

<Field Name=”Email”>bgates@microsoft.com</Field>

</Row>

<Row>

<Field Name=”FirstName”>Steve</Field>

<Field Name=”Title”>Ballmeer</Field>

<Field Name=”Email”>sbalmeer@yahoo.com</Field>

</Row>

</Rows>

</Data>

</ListInstance>

</Elements>

If you run  the app now you should be able to navigate to

https://yourappweb/SharepointDurandalSample/Lists/My%20Contacts/AllItems.aspx

To see the sample data, or go to

https:// yourappweb /SharepointDurandalSample/Lists/My%20Contacts/NewForm.aspx

To add new data.

Now we want to make our Durandal app display this list.

First, we need to modify the app object to remember the appUrl and the webUrl. Add the following function to the App/Main.js to get qyerystring parameters:

function getQueryStringParameter( param )

{

var params = document.URL.split( “?” )[1].split( “&” );

//var strParams = “”;

for ( var i = 0; i < params.length; i = i + 1 )

{

var singleParam = params[i].split( “=” );

if ( singleParam[0] == param )

{

return singleParam[1];

}

}

}

Then, just before appStart add the following code:

app.hostWebUrl = decodeURIComponent( getQueryStringParameter( ‘SPHostUrl’ ) );

app.appWebUrl = decodeURIComponent( getQueryStringParameter( ‘SPAppWebUrl’ ) );

app.requestDigest = $( ‘#__REQUESTDIGEST’ ).val();

(Please note that I am new to Durandal and no doubt this is not the best way to do this)

This will save these properties on the app object so we can use them later.

Next we need to create the ViewModel (or module in Durandal Teminology). In Visual Studio, within the App/viewmodels folder, Add/New Item/Web/Javascript. Name the file MyContacts.js and set the content as follows:

define( [‘plugins/http’, ‘durandal/app’, ‘knockout’], function ( http, app, ko )

{

debugger;

return {

displayName: ‘My Contacts’,

myContacts: ko.observableArray( [] ),

activate: function ()

{

//the router’s activator calls this function and waits for it to complete before proceding

var success = function ( data, status, jqXHR )

{

self.myContacts(data.d.results)

};

var options = {

dataType: “json”,

url: app.appWebUrl + “/_api/lists/getByTitle(‘My Contacts’)/Items”,

headers: {

Accept: “application/json;odata=verbose”

},

success: success

};

var self = this;

return $.ajax(options);

},

};

} );

Then create the view. Within the App/views folder, Add/New Item/Web/HTML File. Name the file MyContacts.html and set the content as follows:

<div>

<h2>Customers</h2>

<table>

<tbody data-bind=”foreach: myContacts”>

<tr>

<td data-bind=”    text: Title”></td>

<td data-bind=”    text: FirstName”></td>

<td data-bind=”    text: Email”></td>

</tr>

</tbody>

</table>

</div>

Finally, Add a route to the new  module inside of the activate function in App/viewmodels/shell.js

activate: function ()

{

debugger;

router.map([

{ route: ”, title:’Welcome’, moduleId: ‘viewmodels/welcome’, nav: true },

{ route: ‘contacts’, title: ‘contacts’, moduleId: ‘viewmodels/MyContacts’, nav: true },

{ route: ‘flickr’, moduleId: ‘viewmodels/flickr’, nav: true }

]).buildNavigationModel();

return router.activate();

}

Now if we run the app, the Contacts link works, and displays the contacts stored in the appweb,

The sourcecode can be downloaded here:http://code.msdn.microsoft.com/Sample-Sharepoint-Hosted-723d7a44

Additional info can be found  at the Durandal site, at  SPServices Stories #13: Durandal SP3: Developing SharePoint SPAs Made Easy, and at at  Durandal SP3: Developing SharePoint SPAs made easy

Advertisements
This entry was posted in Durandal, sharepoint and tagged , . Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s