TRY IT OUT: Creating an Autohosted App (AutohostedEmployeeList.zip)
To create an Autohosted app, follow these steps:
1. Open Visual Studio 2012 and click File ⇒ New Project.
2. Navigate to the Office/SharePoint option, select Apps, and then click App for SharePoint 2013.
3. Provide a name for the app (AutohostedEmployeeList) and a location, and then click OK (see Figure 9).
4. In the New
App for SharePoint wizard, add your O365 SharePoint developer site URL.
Click Validate and enter your O365 credentials to cache the developer
site credentials with your project.
5. Select Autohosted from the How do you want to host your app for SharePoint? drop-down list (see Figure 10).
6. Click Finish.
7. Double-click the Default.aspx page and click the Source tab at the bottom of the Visual Studio IDE.
8. Replace the code in the Default.aspx page with the following bolded code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="AutohostedEmployeeListWeb.Pages.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>Employee List</title>
</head>
<body>
<form id="form1" runat="server">
<div>Employee List</div>
<table>
<tr><td><asp:Label ID="lblName" runat="server" Text="Name:"
Font-Names="Calibri"></asp:Label></td>
<td><asp:TextBox ID="txtbxName" runat="server" Width="205px">
</asp:TextBox></td></tr>
<tr><td><asp:LinkButton ID="lnkbtnAddEmployee"
runat="server" Font-Names="Calibri"
OnClick="lnkbtnAddEmployee_Click">Add Employee</asp:LinkButton></td>
<td></td></tr>
<tr><td></td><td><asp:ListBox ID="lstbxEmployee"
runat="server" Width="212px" Font-Names="Calibri"></asp:ListBox></td>
</tr>
<tr><td><asp:Label ID="lblErrorMsg" runat="server" Text=""
Font-Names="Calibri"></asp:Label></td></tr>
</table>
</form>
</body>
</html>
9. Switch to the Design view. You should see something similar to Figure 11. The user interface enables you to add a name into a text box and then add the name to the list box.
10. Right-click the Default.aspx page in Solution Explorer and select View Code. The C# code-behind for the ASP.NET page opens.
11. Replace the code in the Default.aspx.cs page with the following bolded code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AutohostedEmployeeListWeb.Pages
{
public partial class Default : System.Web.UI.Page
{
string strEmployeeName = "";
SharePointContextToken contextToken;
string accessToken;
Uri sharepointUrl;
protected void Page_Load(object sender, EventArgs e)
{
TokenHelper.TrustAllCertificates();
TokenHelper.TrustAllCertificates();
string contextTokenString = TokenHelper.GetContextTokenFromRequest(Request);
if (contextTokenString != null)
{
contextToken = TokenHelper.ReadAndValidateContextToken(contextTokenString,
Request.Url.Authority);
sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
accessToken = TokenHelper.GetAccessToken(contextToken,
sharepointUrl.Authority).AccessToken;
lnkbtnAddEmployee.CommandArgument = accessToken;
}
}
protected void lnkbtnAddEmployee_Click(object sender, EventArgs e)
{
string accessToken = ((LinkButton)sender).CommandArgument;
if (IsPostBack)
{
sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
}
strEmployeeName = txtbxName.Text;
if (txtbxName.Text != "")
{
lstbxEmployee.Items.Add(new ListItem(strEmployeeName));
}
else
{
lblErrorMsg.Text = "Please enter a valid name.";
}
}
}
}
12. Right-click
the top-level SharePoint project and select Publish. This builds your
project and creates the .APP package. At this point, you can follow the
exact same process you did earlier in “Creating a SharePoint-Hosted
App,” using steps 9–16 to upload, deploy, and explicitly trust the
SharePoint app.
13. When you’re
done, click the Site Contents link, and click the tile for the newly
added App for SharePoint. Your Autohosted app loads.
14. Add some
names into the Name field, and then click the Add Employee link to add
the names to the list box. Your app should look similar to Figure 12.
How It Works
The Autohosted app is a lightweight
cloud-hosted application that auto-deploys code into Windows Azure and
then surfaces this code within SharePoint 2013. In this example, you
created a simple employee list app that enables the user to enter and
add some names to a list box. In the code, you used a set of class-level
objects to store key variables such as the name of the employee (strEmployeeName), security token data (contextToken and accessToken), and SharePoint URI (sharepointUri). The key event method (lnkbtnAddEmployee_Click) was triggered by the link button.
A couple things worth noting: With the
new hosted models, the question of how you authenticate your app is an
important one. SharePoint 2013 introduces a new authorization model that
leverages OAuth to register apps and events within that app with
SharePoint. At a high level, a SharePoint App requests permissions when
it is installed — you explicitly trust the app that you’re installing
into your SharePoint instance. If you do not trust the app, it will not
be installed. To facilitate trusting the app, you set the security token
using the TokenHelper class, but then you needed to ensure that token was tied to the object sending the request (LinkButton object). Also, within the lnkbtnAddEmployee_Click
event, you’re configuring the security against the SharePoint URI as
well. Setting trust and security context for the app are two critical
aspects of the new world of cloud apps.
Beyond the security elements, the following code that you used in the exercise is fairly straightforward: you’re assigning the strEmployeeName
string variable with the text the user enters into the Name field.
Then, assuming the text field is not null, you’re adding it to the list
box.
...
protected void lnkbtnAddEmployee_Click(object sender, EventArgs e)
string accessToken = ((LinkButton)sender).CommandArgument;
if (IsPostBack)
{
sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
}
strEmployeeName = txtbxName.Text;
if (txtbxName.Text != "")
{
lstbxEmployee.Items.Add(new ListItem(strEmployeeName));
}
else
{
lblErrorMsg.Text = "Please enter a valid name.";
}
}
...
You might have noticed the new URL for your Autohosted app; it probably looks something like the following:
https://a9d21e97-5c8d-4f75-9804-b548b8df8d21.o365apps.net/Pages/Default.aspx?SPHostUrl=https%3a%2f%myspsite.sharepoint.com%2fsites%2fspdev&SPLanguage=en-US
From this URL, you can begin to see how
the new cloud-hosted app model leverages a GUID specific to your app,
deploys it to Windows Azure (using the O365apps.net domain), and then
appends a set of standard tokens to ensure the application integrates
and maps to your SharePoint site. This is built from the following
element within the AppManifest.xml file.
<StartPage>~remoteAppUrl/Pages/Default.aspx?{StandardTokens}</StartPage>
Of course, many other configuration options are available to you within the AppManifest.xml file, and you can build many interesting apps using the Autohosted deployment model.
