Share this:

Like this:

Was really surprised how easy it is to develop an app for SharePoint online. There are some items that needs a little look at, and these are mostly for the deployment side of things.

SP Dev, The good, the bad and the ugly

I will categorically state, right now, that SP2010 dev, is not really a big requisite to develop for SPOnline. I think this is good. Another good thing, coming from a dev point of view, is that I don’t need to setup SP on my dev machine, so I got that going for me which is nice..

The bad stuff tho.. if you are used to developing for an on premise SP deployment.

You don’t have control over the machine anymore

You don’t have control over the file structure anymore

You don’t have access to SQL Server anymore

Because I am a dev.

So, what will you need?

A dev machine

A sharepoint online subscription

A dev site on the subscription

Dev tools.

Step 1. – install all the dev tools. VS, Office Dev tools etc.

Step 2. Login to your sharepoint online Dev environment

I could show you how to create a Dev site collection but that’s for another blog.

Now open up visual studio.. and do the File – New thingy

Choose the proper app template. If you cannot find this template, then you have not properly installed the Office Dev Tools on your VS.

VS will ask you for the URL of your dev collection

Click finish.

It might ask you for credentials

After signing in, you should already be connected to your SP Dev site.

So.. this is the basic structure of a SPOnline App

Your UX will be at Default.aspx

Now it is time to update the app homepage. Using the Solution Explorer tool window, right-click the Pages/Default.aspx file and select Open. After the existing div, add the following markup

Inside default.aspx, locate the PlaceHolderPageTitleInTitleArea placeholder control and replace the content inside with the title “Hello Keesha!”.

<input type=”button” value=”Push Me” onclick=”hello();” />

<div id=”displayDiv”></div>;

Then

The next step you will update the app script file. Using the Solution Explorer tool window, right-click the Scripts/App.js file and select Open. Add the following function to the bottom of the file that will be called when you click the button.