Tag Archive for SharePoint Apps

SharePoint Hosted Apps: Targets and Debugging

UPDATE: After I got a nice email from the Office Tools Dev Team I installed Update 2 for Visual Studio 2013. This Update provides a choice of Deployment Target in the Project Properties window (not the pane). On the SharePoint Tab you’re now able to switch between SharePoint 2013 and SharePoint Online. This changes the Target Version and solves the error.

Capture4

Original Post

Today I came across a strange issue when deploying and testing SharePoint Hosted Apps from Visual Studio. When you create a SharePoint Hosted App in VS, you need to specify a debug target for the App in this dialog:

screen1

In this Example I choose to deploy it to my Office 365 Developer site. Deploying and testing this App on my Developer site works perfectly but things go sideways when I change the Deployment Target to my On-Prem server. When I hit Deploy I instantly get the error:

Unknown SharePoint version: 16.0, Parameter name: version

Weird!

Deployment Targets and versioning

The cause of this nasty error is the dialog above where we specify our debug site. For some reason Visual Studio thinks we are never gonna change it after this point. Therefore the TargetOfficeVersion property in the project file is set to the first target of choice. In my case this was my Office 365 Developer Site which is already running on version 16.0. I can easily check this by opening my .csproj file.

<TargetOfficeVersion>16.0</TargetOfficeVersion>

When I create a new App and set my debug site to my On-Prem environment the number in the TargetOfficeVersion property is 15.0. Unfortunately this is something I wasn’t able to find through the Visual Studio UI in project settings or properties.

Conclusion

If you start developing with a Cloud First approach (which I think is the way to go) you might get into trouble testing On-Prem depending on the versioning and updates on Office365. Therefore keep in mind the rapid update cycle on Office 365 and the difference with your On-Prem environment.

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.

SharePoint 2013 Hosted App

This will be my first post on SharePoint 2013. The buzz around the App Model is huge and so I dove in on a very basic level. Just to show how easy an App can be hosted in SharePoint and can consume Data or connect to popular websites. Like Facebook.

No worries, no Authentication is being used. This Post it’s just to show how easy it is to create a SharePoint App and consume “free” data.

First things first

The very first thing we should do is follow the steps described by MS to setup your development machine for App Development.
http://msdn.microsoft.com/en-us/library/office/apps/fp179923%28v=office.15%29

Andrew Connell created a PS Script for this:
http://www.andrewconnell.com/blog/archive/2012/08/07/registering-sharepoint-2013-high-trust-apps-using-s2s-the-easy.aspx

Create a new App

First start Visual Studio 2012 RC. Create a new Project and choose App for SharePoint 2013

Schermafbeelding 2012-08-21 om 17.08.34

Next give your App a name and fill in the Developer Site (created while setting up your app domain). I chose my default webapplication to be a Developer Site.

For this App we choose SharePoint-hosted.

Schermafbeelding 2012-08-21 om 17.09.46

Now we can see the App Template contains some modules for Scripts, Images, Pages and CSS files. Also notice the AppManifest.xml file which holds important info about your App.

Schermafbeelding 2012-08-21 om 17.19.38

Facebook Data

For this app I use the standard Facebook Graph API. We can use jQuery to get JSON data from the url we like. In this example I chose Microsofts Facebook page.

http://graph.facebook.com/microsoft

To simply bind the data on my Default.aspx page I use KnockOut JS. This is a very easy and fast way of binding data.

Result

The project that you can download, results in an App that is displaying Page data from Facebook. It looks like this:

Schermafbeelding 2012-08-21 om 16.58.10

Schermafbeelding 2012-08-21 om 16.57.40

DOWNLOAD MyFBPage.proj