Creating a Simple Autohosted SharePoint App
In the Autohosted cloud app model, as
discussed earlier, part of the application you create is auto-deployed
to Windows Azure and the other part is deployed to SharePoint. To help
illustrate this process, create an Autohosted application in the
following example.
TRY IT OUT: Building Your First Autohosted App (MyFirstAutohostedApp.sln)
To create your first Autohosted app:
1. Open Visual Studio 2012.
2. Select File, and then New Project.
3. Expand the Office/SharePoint node and select Apps, as shown in Figure 3.
4. Type MyFirstAutohostedApp as the project name.
5. Select the App for SharePoint 2013 project, and click OK.
6. In the New
App for SharePoint dialog, enter the name of the app, the SharePoint
site you’ll be using for debugging and deployment, and select
Autohosted in the drop-down box, as shown in Figure 4. When done, click Finish.
7. Right-click MyFirstAutohostAppWeb and select Add New, and then select Class.
8. Call the class People, and then click Add.
9. In the newly added
People class, insert the following bolded code.
...
public class People
{
public string Name { get; set; }
public string Email { get; set; }
public int Age { get; set; }
}
...
10. Press F6 to build the project.
11. Right-click the Default.aspx page and switch to Source view by clicking the tab in the lower part of the main window.
12. Insert the following bolded line of code into the
Default.aspx page.
...
<html >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdViewPeople" runat="server"></asp:GridView>
</div>
</form>
</body>
</html>
13. Press F6 to build the project.
14. Double-click the Default.aspx.cs file. This is the code-behind for the Default.aspx page.
15. Insert the following bolded code into the
Default.aspx.cs file. Leave all the other code that was created by default there.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyFirstAutohostedAppWeb.Pages
{
public partial class Default : System.Web.UI.Page
{
List<People> myPeeps = new List<People>();
protected void Page_Load(object sender, EventArgs e)
{
var contextToken = TokenHelper.GetContextTokenFromRequest(Page.Request);
var hostWeb = Page.Request["SPHostUrl"];
using (var clientContext = TokenHelper.GetClientContextWithContextToken
(hostWeb, contextToken, Request.Url.Authority))
{
clientContext.Load(clientContext.Web, web => web.Title);
clientContext.ExecuteQuery();
Response.Write(clientContext.Web.Title);
clientContext.ToString();
}
GeneratePeepsData();
DataBindPeepsData();
}
private void GeneratePeepsData()
{
People clsPeep1 = new People();
clsPeep1.Name = "John Doe";
clsPeep1.Age = 24;
clsPeep1.Email = "[email protected]";
myPeeps.Add(clsPeep1);
People clsPeep2 = new People();
clsPeep2.Name = "Jane Doe";
clsPeep2.Age = 22;
clsPeep2.Email = "[email protected]";
myPeeps.Add(clsPeep2);
}
private void DataBindPeepsData()
{
grdViewPeople.DataSource = myPeeps;
grdViewPeople.DataBind();
}
}
}
16. Press F6 to build the project.
17. Right-click MyFirstAutohostedApp,
and select Publish. In the Publish Office Apps dialog, select Finish.
This builds and packages the SharePoint app, but does not deploy it.
Windows Explorer automatically opens when the build and package process
is complete. Copy the folder path in Windows Explorer; you’ll need this
later on in this exercise.
18. Navigate to your SharePoint Online Developer Site home page, and click New apps to deploy.
19. In the Deploy App dialog, select the upload link, click Browse when prompted, and then click Deploy.
20. When prompted, click Trust It, as shown in Figure 5.
When the app is installed, click the link to the app. Something similar to Figure 6 appears.
Congratulations! You’ve built your first Autohosted app.
How It Works
In the earlier exercise where you
created a Windows Azure MVC4 application, you used the Windows Azure
Cloud template to create the Windows Azure project. However, when you
create a SharePoint Autohosted app, the deployment and packaging
process automatically manages the deployment of part of the project to
SharePoint and the other part to Windows Azure. Therefore, in this
exercise MyFirstAutohostedApp was packaged and deployed to SharePoint, and MyFirstAutohostedAppWeb was packaged and deployed to Windows Azure automatically.
Within the Default.aspx
page (which is deployed to Windows Azure), you added a simple class
object to represent a person. The person had three properties: a name,
email address, and age.
public class People
{
public string Name { get; set; }
public string Email { get; set; }
public int Age { get; set; }
}
To keep things simple, you then created two helper methods that were called when the default pages were loaded. The first one, GeneratePeepsData, created two instances of the People object, populated the properties, and then added the newly created objects to the List<People> collection object. The second method, DataBindPeepsData, data-bound the List<People> collection object to the data grid you added to the Default.aspx page.
You might be curious to understand how SharePoint
knows to point off to the page you deployed to Windows Azure, and how
it allows the cross-domain access. This is defined automatically for
you in the AppManifest configuration file. You can see the following
XML snippet that shows the default remoteAppUrl token (which is auto-created by Visual Studio) and a pointer to the Default.aspx page. The StandardTokens token then adds some additional information to the URL such as SharePoint host URL and language.
...
<Properties>
<Title>MyFirstAutohostedApp</Title>
<StartPage>~remoteAppUrl/Pages/Default.aspx?{StandardTokens}</StartPage>
</Properties>
...
Let’s now walk through a second example that more
explicitly splits the Windows Azure piece from the SharePoint piece. In
this example, you’ll again use the Autohosted template, but this time
you’ll first publish the Windows Azure application you created earlier
and then use the Client App Web Part to integrate the Windows Azure
application with SharePoint. This is the most lightweight way to
integrate Windows Azure with SharePoint (and is tantamount to an iframe object that registers the Windows Azure application with SharePoint).
This example is composed of two parts:
- An application that has been built and deployed to Windows Azure
- A lightweight configuration application that will be deployed to SharePoint
For the Windows Azure application, you can use
the web page you created and published to Windows Azure in the first
exercise or create a new one using the method described earlier for
creating and publishing an application to Windows Azure. Either way,
you should have a web page that is deployed to Windows Azure. When
deployed, you can see from Figure 7 that the URL in SharePoint includes both the SharePoint site URL and the URL for the Windows Azure application.
