About Me

Having 12 years experience in Microsoft technologies.Since more than 7 years working in SharePoint technologies. Expert in providing consultation for SharePoint projects. Hands on with development and administration.

Thursday, 30 May 2013

SharePoint 2013 - Develop Autohosted app using Office 365 - Example

In previous article i have shown all possible steps to develop your first 'SharePoint - hosted' app. In this article, I will walk you through to develop 'AutoHosted' app in SP 2013.
 
   The Autohosted deployment model is a signifi cant departure from previous SharePoint applications. In this model you build Apps for SharePoint, but the code is seamlessly deployed to Windows Azure in the background — so SharePoint automatically creates the cloud-hosted app for you.
 
   Thus, for all intents and purposes code looks like it’s running on SharePoint, when in fact in the background it’s deployed to a special Offi ce 365 Windows Azure instance (so in effect a different domain) and registered as an authenticated and authorized app with SharePoint.
 
You don’t have complete access to the entire platform capabilities of the Windows Azure platform with the Autohosted deployment model; however, you do have enough of the platform to build some interesting applications.
 
Prerequisites - You should have office 365 site. How do you get... you will get trail version site from office 365 site.
 
and register trail version site for you. (it's self explanatory)
 
To create an Autohosted app, follow these steps:
1. Open Visual Studio 2012 and click File -->New Project
2. Navigate to the Offi ce/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

 
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
 
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 xmlns="http://www.w3.org/1999/xhtml">
<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.The user interface enables you to add a name into a text box and then add the name to the list
box.
 
 
10. 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
{
sring 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.";
 
}
 
}
}
}
 
11. Right-click the top-level SharePoint project and select 'Deploy Solution'. This builds and
deploys your project and creates the .APP & uploads the .app into respective SharePoint
Office 365 site.
 
 
12. Go back to the office 365 site---> Site contents--> and click on newly deployed app
 
 

13. Go back to the office 365 site---> Site contents--> and click on newly deployed app
 
14. Click on app and check the output
 
 
 
15. 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>
 
That's it... very simple right... no worries MS will take care of authentication mechanism using OAuth model
 

3 comments:

  1. Our Research & Development Centre is based in Singapore and we have representative offices in Kuala Lumpur, Malaysia . Our highly skilled workforce is entirely based within Singapore.NET development, ASP development, SharePoint development, Office 365 development Microsoft development , software development, Singapore – Total eBiz Solutions Home

    ReplyDelete
  2. Hi ,
    Error On AutoHostedApp Deployment :
    When i was able to debug ,it was working fine,but I tried to deploy the solution - I am getting the error.

    Correlation Id: 4e2aa7aa-00be-4a4f-83bb-362a567c0e21

    ErrorDetail: The remote hosting service is not configured.

    ErrorType: Configuration

    ErrorTypeName: Configuration

    ExceptionMessage:
    Microsoft.Office.SecureStoreService.Server.SecureStoreServiceTargetApplicationNotFoundException:
    Target application not found (application id:
    __RemoteAppManagementInfo__).

    ReplyDelete