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
 

Tuesday 28 May 2013

SharePoint 2013 - Develop SharePoint Hosted Apps-example


I am assuming that our DEV environment is single server farm which includes DNS as well in same machine

Following are very high level steps involved in setting up DEV environment for SharePoint hosted apps

1. Create forward look up zone in DNS server (which is mandatory for apps)
2. Provision SPSubscriptionSettingsService and AppManagementService
3. Configure App Url in SharePoint Central Admin
4. Develop sample SharePoint hosted app

1. Create forward look up zone in DNS server
     1.1  From your VM or server--->All Programs--> Administrative Tools---> DNS
     1.2 ForwardLookUpZones--->New Zone
            
     1.3 Choose Primary Zone and click next
        
       1.4  Choose "To all DNS servers running on domain controllers in the domain" and click
              Next


   1.5 Enter zone name as "spdevapps.com"
    


    1.6  Choose "Do not allow dynamic updates" and click Next & Finish as well
 

   1.7 Upon successful, right click on newly created zone and choose "New Alias (CNAME)"

   1.8 Enter * as Alias name
     
    1.9 Click browse fr FQDN---> Double click on your server name

 

   1.10 Double click on Forward Lookup zones
 

  1.11 Choose your Server name and click OK until you go back to the main screen

 

    1.12 Go to command prompt and flush dns: ipconfig /flushdns


2. Provision SPSubscriptionSettingsService and AppManagementService

    2.1 Create/Configure the App Management Service
    2.2 Ensure that the SPSubscriptionSettingsService and        
         AppManagementServiceInstance services are running with these below cmdlets(if    
         they are not running this cmdlet will make them to run)

        Get-SPServiceInstance | where{$_.GetType().Name -eq       
        "AppManagementServiceInstance" -or $_.GetType().Name -eq 
        "SPSubscriptionSettingsServiceInstance"} | Start-SPServiceInstance
         If already running,
    2.3 If not, check  whether respective services are running or not in CA-->Manage 
          services on server under System Settings category
   2.4 We will have to provision following services along with their proxies, no worries, it's 
         very simple. Run following script @ SP powershell console.

        Note - Replace 'Get-SPManagedAccount' with your respective account 
--------------------------------------------------------------------------------------------------------------------------
$account = Get-SPManagedAccount “xxxx\administrator”(your domain name\user name)



$appPoolSubSvc = New-SPServiceApplicationPool -Name SettingsServiceAppPool -Account $account

$appPoolAppSvc = New-SPServiceApplicationPool -Name AppServiceAppPool -Account $account


$appSubSvc = New-SPSubscriptionSettingsServiceApplication –ApplicationPool $appPoolSubSvc –Name SettingsServiceApp –DatabaseName SettingsServiceDB
$proxySubSvc = New-SPSubscriptionSettingsServiceApplicationProxy –ServiceApplication $appSubSvc
$appAppSvc = New-SPAppManagementServiceApplication -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName AppServiceDB
$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc
--------------------------------------------------------------------------------------------------------------------------

The above script provisions following service applications.

AppManagement Service & SubscriptionSettingsServiceApplication.

Check in CA

Go to Central Administration àApplication Management àManage service applications

3. Configure App Url in SharePoint Central Admin
    3.1 Go to Central Administration---> Apps-->Configure App Urls under App Management

    
     2.2 App domain would be - spdevapps.com
     2.3 App prefix would be - spapp

 4. Develop sample SharePoint hosted app
     4.1. Open Visual studio 2012 and select "App for SharePoint".


   4.2. In the New App for SharePoint wizard, add the SharePoint site URL that you want to 
   debug and then select the SharePoint-hosted model as the way you want to host your    
   app for SharePoint.


4.3. Click Finish.

4.4. After Visual Studio generates the project, double click the AppManifest.xml file, which is located within the SharePoint project.

4.5. In the Scope drop-down list, select Web, which is the scope of permissions that you’re configuring







 
4.6. In the Permission drop-down list, select Read, which is the type of permission you’re configuring.




4.7. Check the default.aspx page & other configurations.


4.8. Double-click the Default.aspx fi le and replace PlaceHolderAdditionalPageHead and
    PlaceHolderMain with the following bolded code.

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,

Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"

MasterPageFile="~masterurl/default.master" language="C#" %>

<%@ Register Tagprefix="SharePoint"

Namespace="Microsoft.SharePoint.WebControls"

Assembly="Microsoft.SharePoint, Version=15.0.0.0,

Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"

Assembly="Microsoft.SharePoint, Version=15.0.0.0,

Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"

Assembly="Microsoft.SharePoint,

Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderAdditionalPageHead"


runat="server">


<script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>


<link rel="Stylesheet" type="text/css" href="../Content/App.css" />

<script type="text/javascript" src="../Scripts/App.js"></script>
 
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderMain" runat="server">

<script type="text/javascript">

function hello() {

var currentTime = new Date();

$get("timeDiv").innerHTML = currentTime.toDateString();

}

</script>

<div id="timeDiv"></div>

<input type="button" value="Push me!" onclick="hello();"/>
</asp:Content>


4.9 Deploy the app..

4.10 You can observe that the url of the app in output window


http://spapp-d61c11acb879cb.sharepoint2013apps.com:50000/SPHostedApp_SimpleDateApp/
Here 
spapp - is the prefix what we have provided
d61c11acb879cb- is the app id dynamically generated one
sharepoint2013apps- is our app domain name
SPHostedApp_SimpleDateApp- is our app name


Now check the app from the SharePoint site (where we deployed our visual studio app solution ) à Site ContentsàCheck our App .



click and check the functionality..
Note: It's very important... above steps are development environment related....when you deploy the app, we are deploying to only one site collection given during when we created project. What if, the app should be available for all site collections in the web application?
No worries, we can do that, by creating 'app catalog site' in CA.
CA-->Apps-->Manage App Catalog
Create new site collection -- no worries it's self explanatory, finally it looks like
click on site collection to check our newly deployed app in CA...

Our app looks likd as..............



we got it........

Please feel free to comment.... :)