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

12/25/2013 2:13:12 AM
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" ?>
<Peep Name="John Doe" Email="" />
<Peep Name="Jane Doe" Email=""/>
<Peep Name="Cooper McGovern" Email="" />
<Peep Name="Satya Saiid" Email="" />
<Peep Name="Fred Nietzche" Email="" />
<Peep Name="Aaron Schtick" Email="" />
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" 
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"

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)

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;


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.



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=""


<AppPrerequisite Type="AutoProvisioning" ID="RemoteWebHost" />
Right="Read" />
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="">
<ClientWebPart Name="MyAzureApp" Title="MyAzureApp Title"
Description="MyAzureApp Description" DefaultWidth="300" DefaultHeight="200">
<Content Type="html" Src="" />
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.



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



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 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.


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.
  •  Sharepoint 2013 : SharePoint Installation and Configuration - Create a New Subsite
  •  Sharepoint 2013 : Join a Server to the SharePoint Farm, Create a New Web Application, Create a New Site Collection
  •  Sharepoint 2013 : Install Without a Product Key in the Configuration File, Configure a New SharePoint Farm
  •  Sharepoint 2013 : Prepare the Microsoft SharePoint Installation Module , Install SharePoint Unattended
  •  Sharepoint 2010 : Putting Your Site on the Web - Additional Features
  •  Sharepoint 2010 : Putting Your Site on the Web - Key Terms and Architecture , Richer User Experience
  •  Sharepoint 2010 : Putting Your Site on the Web - Web Content Management (part 2) - Web Publishing 101
  •  Sharepoint 2010 : Putting Your Site on the Web - Web Content Management (part 1)
  •  Sharepoint 2010 : Using an External Data Column, Building a Composite Application
  •  ASP.NET 4 in VB 2010 : Page Tracing (part 3) - Application-Level Tracing
    Most View
    Microsoft SharePoint 2010 Web Applications : Presentation Layer Overview - Ribbon (part 1)
    The Cyber-athletic Revolution – E-sports’ Era (Part 1)
    Windows Server 2003 : Implementing Software Restriction Policies (part 4) - Implementing Software Restriction Policies - Creating a Path Rule, Designating File Types
    Sql Server 2012 : Hierarchical Data and the Relational Database - Populating the Hierarchy (part 1)
    Two Is Better Than One - WD My Cloud Mirror
    Programming ASP.NET 3.5 : Data Source-Based Data Binding (part 3) - List Controls
    Windows 8 : Configuring networking (part 5) - Managing network settings - Understanding the dual TCP/IP stack in Windows 8, Configuring name resolution
    Nikon Coolpix A – An Appealing Camera For Sharp Images (Part 2)
    Canon PowerShot SX240 HS - A Powerful Perfection
    LG Intuition Review - Skirts The Line Between Smartphone And Tablet (Part 2)
    Popular Tags
    Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
    Top 10
    Review : Acer Aspire R13
    Review : Microsoft Lumia 535
    Review : Olympus OM-D E-M5 Mark II
    TomTom Runner + MultiSport Cardio
    Timex Ironman Run Trainer 2.0
    Suunto Ambit3 Peak Sapphire HR
    Polar M400
    Garmin Forerunner 920XT
    Sharepoint 2013 : Content Model and Managed Metadata - Publishing, Un-publishing, and Republishing
    Sharepoint 2013 : Content Model and Managed Metadata - Content Type Hubs