Movie Poster SharePoint App Part

The Idea

I wrote a similar POC application not too long ago for a Microsoft event that was held in Serbia. The code was written in C# for Windows Phone devices. The entire application, including the time spent on registering for the TheMovieDB.org API, was written on a Saturday afternoon. So, as the movie fan that I am – I got the idea of displaying the poster of the film that the user enters into the search box. After the Microsoft “Sinergija” presentation in Belgrade, I published the application on the Windows Phone Store. If you, by any chance, own a Windows Phone 8+, you can download the application here.

Turns out that the realization of said idea is not at all simple, when it comes to SharePoint 2013 App.

Realisation

I immediately conceived that the App should be SharePoint hosted type. The application scope is too small to be provider hosted. There is no need for server-side code, nor special patterns – like MVC. I also didn’t want to go too far from the OOB Visual Studio SP App Template (It was Visual Studio Premium 2013 Update 4).

So I started to write simple HTML code, in the middle of Default.aspx page. More precisely, inside the asp:Content server control. So, really nothing special – a couple of div tags for the layout, two inputs and an img tag. The Ajax call was returning JSON, and within the object, one property is the path of the image from third party provider (TheMovieDB.org) , which is, btw, located on another subdomain.

And that’s when the problems started – CORS, primarily. If you are not familiar with the CORS, please refer to this page.

To solve the problem, I started thinking about the SP.RequestExecutor.js which is intended for the CORS realization for SharePoint 2013 Apps.

A lot of debugs, console watching, alerts…

Interesting, despite the different browsers, the error boiled down to the following – despite the Ajax call being executed SUCCESSFULLY, after a page reload, the picture of the loaded poster would disappear?

The Final Battle

The saving (sanative) idea was born – thanks to me being a SharePoint pioneer since the 2003 version!

WebPart!

Excuse me, App Part, we are in 2015!

All I had to do was “repack” the code from the server tag to the new App Part page – inside the pure HTML tags (which is the default for app part) – and Boom!

Everything was working on the same server, without needing any additional security, or similar problem!

SharePoint App Part

Moral (of the Story)

If you ever want to write a SharePoint App as a SharePoint hosted, I highly suggest you to STAY AWAY from the Aspx extension! It is, from the history point of view – SERVER page, and all you need is JavaScript on the client, when it comes to Apps hosted inside SharePoint.

You could, however, use Aspx pages as a natural choice when writing an App that is provider-hosted, but than you can chose MVC, too.

A complete example can be downloaded from GitHub here.

For more informative content on App Development why not check out this webinar on ‘Publishing Apps for SharePoint 2013 on Windows Azure’. Download webinar now>>

About the Author: Radovan Ostojić is a Software Architect Business Analyst Software developer. Specialties: Sharepoint developer Windows Store Apps MVVM Web API XAML Teaching MEF.

Radovan Ostojić

Radovan Ostojić

 

Share this on...

Rate this Post:

Share: