SharePoint 2013 and Windows Azure (part 3) - Creating a Simple Autohosted SharePoint App - Building A Client App Web Part

TRY IT OUT: Building A Client App Web Part (SPClientAppWebPartForAzure.sln)

To create a Client App Web Part that loads a Windows Azure site, perform the following steps:

1. Open Visual Studio 2012 and create a new solution project called SPClientAppWebPartForAzure.

2. After the solution is created, right-click the solution and click Add ⇒ New Project and select Cloud, .NET Framework 4.0, and Windows Azure Cloud Service.

3. Provide a name for the project (SPAzureClientAppWebPart) and click OK.

4. In the New Windows Azure Cloud Service dialog, select the ASP.NET Web Role and click the right-arrow button.

5. Edit the name of the new project (GetPeople) and click OK.

6. After the project has been created, right-click the App_Data folder and select Add ⇒ New Item.

7. Select Data, and then click XML File. Provide a name for the XML file (People.xml), and click Add.

8. Add the following XML to the People.xml file.

<?xml version="1.0" encoding="utf-8" ?>
<People>
  <Peep Name="John Doe" Email="john@contoso.com" />
  <Peep Name="Jane Doe" Email="jane@fabrikam.com"/>
  <Peep Name="Cooper McGovern" Email="cooper.mcgovern@acme.net" />
  <Peep Name="Satya Saiid" Email="satya@fabrikam.com" />
  <Peep Name="Fred Nietzche" Email="fred.neitzche@postmodern.net" />
  <Peep Name="Aaron Schtick" Email="aarons@postcolonial.com" />
</People>

9. Double-click the Default.aspx page, click the Source tab, and replace the default markup with the following code.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" 
AutoEventWireup="true" 
CodeBehind="Default.aspx.cs" 
Inherits="GetPeople._Default" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent"
>
    <section class="featured">
        <div class="content-wrapper">
            <h2>My Peeps</h2>
            <asp:GridView ID="grdPeopleData" 
                runat="server">
            </asp:GridView>
        </div>
    </section>
</asp:Content>

10. Right-click Default.aspx and select View Code.

11. Replace the default code 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;
using System.Xml.Linq; 
 
namespace GetPeople
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            GetPeopleData();
        }
 
        private void GetPeopleData()
        {
            var xDoc = XDocument.Load(Server.MapPath("App_Data/People.xml"));
            var query = from p in xDoc.Descendants("Peep")
                        orderby p.Attribute("Name").Value
                        select new
                        {
                            Name = p.Attribute("Name").Value,
                            Description = p.Attribute("Email").Value
                        };
            grdPeopleData.DataSource = query;
            grdPeopleData.DataBind();
 
        }
    }
}

12. Press F6 to build the Windows Azure application, and then press F5 to run the application in debug mode.

13. To publish your Windows Azure application, right-click the Windows Azure project and select Publish. Click Finish when you’re ready to publish the app to the cloud.

After you’ve published your Windows Azure application, you’re ready to create the SharePoint application.

14. Create a new Visual Studio 2012 project.

15. Select Office/SharePoint ⇒ Apps ⇒ Apps for SharePoint 2013.

16. Provide a name for the project (AzureClientAppWebPart) and click OK.

17. Leave the defaults, except in the hosting options select Autohosted as shown in Figure 8.

FIGURE 8

18. Click Finish.

19. Right-click the Web Part of the project, and select Remove.

20. Right-click the SharePoint project, and select Add ⇒ New Item.

21. In the Add New Item dialog, select Office/SharePoint and then click Client Web Part (Host Web).

22. Provide a name for the Client Web Part (MyAzureApp) and click Add.

23. Right-click the AppManifest.xml file and select View Designer.

24. Under Permission Requests, select Web as the scope and then Read as the level of permissions.

25. Right-click the AppManifest.xml file and select View Code.

26. Amend the StartPage property so that it points to your Windows Azure website as shown by the following bolded code.

<?xml version="1.0" encoding="utf-8" ?>
<App xmlns="http://schemas.microsoft.com/sharepoint/2012/app/manifest"
     Name="AzureClientAppWebPart"
     ProductID="{50be3f58-ee99-420e-af96-85cf73904fa1}"
     Version="1.0.0.0"
     SharePointMinVersion="15.0.0.0">
  <Properties>
    <Title>AzureClientAppWebPart</Title>
    <StartPage>http://myazuresite.cloudapp.net/?{StandardTokens}</StartPage>
  </Properties>
 
  <AppPrincipal>
    <AutoDeployedWebApplication/>
  </AppPrincipal>
 
  <AppPrerequisites> 
    <AppPrerequisite Type="AutoProvisioning" ID="RemoteWebHost" /> 
  </AppPrerequisites> 
<AppPermissionRequests><AppPermissionRequest 
Scope="http://sharepoint/content/sitecollection/web" 
Right="Read" />
</AppPermissionRequests></App>

27. Right-click the Elements.xml file in the newly added Client Web Part and amend the Content property to include the Windows Azure Web page as show in the following bolded code.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ClientWebPart Name="MyAzureApp" Title="MyAzureApp Title" 
    Description="MyAzureApp Description" DefaultWidth="300" DefaultHeight="200">
    <Content Type="html" Src="http://myazuresite.cloudapp.net" />
  </ClientWebPart>
</Elements>

28. Press F6 to build after you’ve amended these files.

29. When you’ve successfully built the app, right-click the SharePoint project, select Publish, and then click Finish. The result should look something like Figure 9.

FIGURE 9

30. After your project publishes, follow the same steps to upload and deploy the project into your SharePoint developer site as you did in steps 16 onwards in the previous Try It Out.

You should now see the newly published app in SharePoint, as shown in Figure 10

FIGURE 10

How it Works

The Client App Web Part is an alternate way to expose Windows Azure applications in SharePoint. This exercise illustrated how you walk through creating a Windows Azure app and then integrate it with SharePoint using the Client App Web Part. You might think of it as an iframe of sorts.

If you click the deployed app from within Apps in Testing, you won’t see the default SharePoint UI built around the app; it is redirected from SharePoint to load the remotely hosted domain. However, if you copy and paste the URL after the Windows Azure page loads, you should see something similar to http://myazuresite.cloudapp.net/?SPHostUrl=https://myazuresite.sharepoint.com&SPLanguage=en-US. This shows that the Windows Azure website, although remotely hosted in a separate Windows Azure domain, is registered and loaded as a SharePoint application.

However, clicking the Page tab, selecting Edit ⇒ Insert ⇒ App Part, and selecting the Client Web Part you just created and deployed to SharePoint adds the Web part that integrates the Windows Azure application with SharePoint. Figure 11 shows what this integration looks like.

FIGURE 11

With the SharePoint Client App Web Part, you can see that the Windows Azure website or application appears with the SharePoint UI and navigation around it.