RSS
Twitter
LinkedIn

 

2013… a New Year, a New SharePoint Version and a New Set of Challenges - Developing Apps and App Parts

 

One of the new 'big things' that come with SharePoint 2013 are 'Apps'.
They're everywhere and everything within SharePoint is now regarded as an 'App' (... even Lists and Libraries are now referred to as 'Apps')

So my first challenge of the year... developing a SharePoint 2013 App!

There are several good resources already available on the subject, from background info (Ted Pattison's 'Introducing SharePoint Apps' for example) to detailed, in-depth guides ( 'SharePoint 2013 apps - architecture, capability and UX considerations' from Chris O'Brien) as well as the usual tutorials, guides  and videos available from MSDN (Apps for SharePoint overview, What's new for developers in SharePoint 2013, Build apps for SharePoint)

 

Armed with this vast amount of information (along with google/bing) ... how hard can it be?

Well to be honest I've got to hand it to Microsoft, getting my first working 'app' up and running was a relatively quick and painless matter (.. in fact I was able to create two).

 

After setting up my Office 365 Developer site (if you already have an o365 SharePoint site, but can't seem to find the 'Get Tools to Build Apps' link, see 'How to Add a site collection for Office 365 Development Tools' or alternatively you can 'Sign up for a new Office 365 Developer Site'), I simply followed a couple of 'Basic Tutorials' (Introducing Napa - Office 365 Development Tools and How to: Create a basic app for SharePoint by using 'Napa' Office 365 Development Tools) and was pleased to have a couple of working (although limited) SharePoint 2013 Apps to show for my time...

First challenge of the year completed? ... well as it turns out, not quite.

 

 

After publishing the completed Apps to my Developer site...


 

...they became available as anticipated 

 

... and functioned as expected when clicked and accessed (via the App Web)

 

 

However, when I then attempted to add them as 'Web Parts' or rather 'App Parts' onto a Wiki page

 
(... see what I mean, Apps are everywhere!)

 

I was rather disappointed when I was not presented with 'Hello', but the default 'your content goes here' ...

(along with a rather nasty looking blue background)

 

Returning to 'Napa Office 365 Development Tool', it becomes apparent that x5 files are automatically generated at creation, as a starting point for each new SharePoint App:

  1. App.css


  2. AppIcon.png


  3. ClientWebPart.aspx


  4. Default.aspx


  5. App.js


App.css and AppIcon.png are both fairly self-explanatory, whilst at first glance the others may not be.

  1. ClientWebPart.aspx -
    Contains the html code used whenever the App is rendered via an 'App Part'

  2. Default.aspx -
    Contains the html code used whenever the App is rendered via the 'Hosted version' of the App

  3. App.js -
    Contains the js code used by the App (and needs to be specifically referenced in both the Default.aspx and/or ClientWebPart.aspx files


So, in this particular instance, it's clearly the ClientWebPart.aspx file that needed updating...

 

adding a reference to the 'App.js' file

<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>

 


and adding a new '<p id="message">' tag (used in the code of the 'App.js' file to output the 'Hello' message)

// This function is executed if the above call is successful
// It replaces the contents of the 'helloString' element with the user name

function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
}

 

Now you might be thinking 'great... everything's ready to go', but if you try re-publishing the App again at this point, the default 'your content goes here' is still displayed.

 

The problem is due to the fact that that code in the 'App.js' file attempts to make calls to the 'SharePoint Client Object Model'..

 

To get this working there is one more critical step that's required... you need to add a reference to 'SP.js' (http://msdn.microsoft.com/en-us/library/jj246996.aspx).

 

Unfortunately referencing "SP.js" is not as simple as you might think, because before you can get SP.js, you have to get SP.Runtime.js...

Luckily Corey Roth has provided a step-by-step on how to get this done:

How to: Use the SharePoint 2013 Client Object Model (SP.js) from a Client Web Part

 

With this additional JS code added to the 'App.js' file...


and the reference to "jquery-1.6.2.min.js" file added to the ClientWebPart.aspx file..


The much awaited "Hello" message is displayed within the 'App Part'!

 

(...and in case you want to get rid of that 'rather nasty looking blue background'... update the App.css file accordingly)

 

 

Published by aobi

Comments

 

mobilepundits said:

This is the perfect blog for anyone who is looking for topics like this. It has got it all, information, benefits, and overview. A perfect piece of writing. Good job.

Cheers, Ashu

September 5, 2016 6:27 AM