Archive for September 17, 2012

SharePoint 2013 Hosted App Part II

In my previous post I had a real simpel App setup to consume some data from a free data-source (Facebook). In this Post I want to take it one step further and show you how we can use that data and save it to SharePoint. Because I also make music, the data-source I chose is Beatport.com one of the greatest (legal) EDM download websites.

Source

On this website I have my own profile and in my Profile I host a Chart of music I like. All this information is accessible using the Beatport API (http://api.beatport.com). For this example I used my latest chart http://www.beatport.com/chart/bar-weinig/102731

Site Columns!

With this App we can add songs from the Beatport Chart to a “Playlist” hosted in SharePoint 2013. First thing to do is to create that Playlist. The SharePoint SPI’s in VS 2012 now come with an SPI called “SiteColumn”! This SPI sets up a Site Column very fast and easy. I added 2 columns “Artist” (Text) and “AudioLink” (URL). The Beatport API delivers a Preview of each track in the Chart. That Preview URL is going to be saved in the Audio Link. Artist is just a text field holding the name of the Artist of a song. I’m going to use the default Title field to store the song’s name.

SharePoint Lists in Apps

Next up is the List Instance. When we add a new “List” SPI to the project, the following dialog pops up.

Schermafbeelding 2012-09-17 om 10.34.13

The difference between a customizable list and a non-customizable list is that the first one is more like creating a List Definition. A non-customizable list is just a List Instance element based on a default SharePoint List Type. Choosing a customizable list will also provide us with a schema.xml to change some advanced settings.

A customizable list can be based on the following SharePoint ListTypes:

  • Default (Blank) – This is a generic list
  • Announcements
  • Calendar
  • Contacts
  • Document Library
  • Links
  • Tasks

The Playlist in our example is a customizable list based on Default (Blank). When the list is created a designer view is there to add Content Types and / or Site Columns. Our custom Site Columns are also available and ready to add to the list.

Schermafbeelding 2012-09-17 om 10.43.09

Script, script, script

Scripting is hot these days. There are some very nice JavaScript libraries available and SharePoint off course has it’s own JavaScript Object Model. In this example I’m using the same combination I used in the previous post. SharePoint Object Model, jQuery and KnockOut JS. A bonus is that when using the SharePoint App SPI, jQuery is deployed by default. So we only have to make a link to the latest version of knockout.

<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js”></script>

Show me the Money

So how does it look and what does it do? When deploying the code, the app will get the Chart in JSON format and renders it using KnockOut. Then for every track in the Chart the user will be able to add it to the SharePoint Playlist using JSOM.

 Schermafbeelding 2012-09-14 om 17.39.11

Schermafbeelding 2012-09-14 om 17.39.42

Schermafbeelding 2012-09-14 om 17.40.16

Schermafbeelding 2012-09-14 om 17.40.41

Conclusion

With pretty easy and standard coding we can get and save data from external websites into our SharePoint Environment using the App Framework.

This example can be downloaded here.