An app for SharePoint can be either
SharePoint-hosted, provider-hosted or autohosted. In all of these
cases, you can incorporate one or more Apps for Office into the app for
SharePoint to be delivered as part of a rich composite productivity
solution. This exercise shows the basics for how to build such an app;
follow these steps:
1. Run Visual Studio 2012 as Administrator. Select New Project.
2. In the New
Project dialog, expand the Templates ⇒ Visual C# ⇒ Office/SharePoint ⇒
Apps nodes. Select App for SharePoint 2013 and provide the Name: CompositeOSPAutoHosted. Click OK.
3. In the
Specify the App for SharePoint settings dialog, provide the URL to your
Office 365 developer site and click the Validate button to confirm
connectivity to the site.
4. For the question, “How do you want to host your app for SharePoint?” select Autohosted, and click Finish.
5. Open the
Default.aspx file from the Pages folder and replace everything between the
<body>...</body> elements with the following:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" />
<asp:UpdatePanel ID="PopulateData" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table border="1" cellpadding="10">
<tr><th> App for Office in an app for SharePoint</th></tr>
<tr><td>
<h2>SharePoint Site Accessed</h2>
<asp:Label runat="server" ID="WebTitleLabel"/>
<h2>SharePoint AppWeb, right-click and Open in new tab</h2>
<asp:HyperLink ID="HyperLink1" runat="server">SPAppURL</asp:HyperLink>
<h2>Current logged-in User:</h2>
<asp:Label runat="server" ID="CurrentUserLabel" />
<h2>Users of the Site</h2>
<asp:ListView ID="UserList" runat="server">
<ItemTemplate ><asp:Label ID="UserItem" runat="server"
Text="<%# Container.DataItem.ToString() %>"></asp:Label><br />
</ItemTemplate>
</asp:ListView>
<h2>Lists available on the Host Web</h2>
<asp:ListView ID="ListList" runat="server">
<ItemTemplate ><asp:Label ID="ListItem" runat="server"
Text="<%# Container.DataItem.ToString() %>"></asp:Label><br />
</ItemTemplate>
</asp:ListView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
6. Right-click on the Default.aspx file from the Pages folder and choose View Code.
7. Add the following variables just before the
Page_ Load method:
string siteName;
string currentUser;
List<string> listOfUsers = new List<string>();
List<string> listOfLists = new List<string>();
8. Inside the
Page_ Load method replace all the code with the following:
// The following code gets the client context and site information
// by using TokenHelper.
var contextToken = TokenHelper.GetContextTokenFromRequest(Page.Request);
var hostWeb = Page.Request["SPHostUrl"];
var spAppWeb = Page.Request["SPAppWebUrl"];
using (var clientContext =
TokenHelper.GetClientContextWithContextToken(hostWeb, contextToken,
Request.Url.Authority))
{
//Load the properties for the web object.
var web = clientContext.Web;
clientContext.Load(web);
clientContext.ExecuteQuery();
//Get the site name.
siteName = web.Title;
//Get the current user.
clientContext.Load(web.CurrentUser);
clientContext.ExecuteQuery();
currentUser = clientContext.Web.CurrentUser.LoginName;
//Load the lists from the Web object.
ListCollection lists = web.Lists;
clientContext.Load<ListCollection>(lists);
clientContext.ExecuteQuery();
//Load the current users from the Web object.
UserCollection users = web.SiteUsers;
clientContext.Load<UserCollection>(users);
clientContext.ExecuteQuery();
foreach (User siteUser in users)
{
listOfUsers.Add(siteUser.LoginName);
}
foreach (List list in lists)
{
listOfLists.Add(list.Title);
}
// Display on page
HyperLink1.Text = spAppWeb.ToString()
+ "/Lists/AppCompositeDocLibrary/";
HyperLink1.NavigateUrl = spAppWeb.ToString()
+ "/Lists/AppCompositeDocLibrary/";
WebTitleLabel.Text = siteName;
CurrentUserLabel.Text = currentUser;
UserList.DataSource = listOfUsers;
UserList.DataBind();
ListList.DataSource = listOfLists;
ListList.DataBind();
}
9. Right-click ListCollection and select Resolve using Microsoft.SharePoint.Client. This also fixes the syntax error for UserCollection.
10. To set the permissions being requested of SharePoint by the app, double-click the AppManifest.xml
node in the Solution Explorer. In the manifest designer click the
Permissions tab. Under Permission requests, click just under Scope to
drop down the list, and then select Web. Select Read under Permission.
11. At this point you just have a standard Autohosted app, but press F5 to make sure everything debugs correctly.
12. Provide
your credentials at the various prompts, and when prompted for whether
or not for SharePoint to trust this app, click Trust It.
13. Close the browser to stop debugging.
14. To add a TaskPaneApp to the solution, right-click the CompositeOSPAutoHosted node in the Solution Explorer and select Add ⇒ New Item.
15. In the Add New Item dialog, select App for Office and provide the name AutoHostedTaskPaneApp.
16. In the Create App for Office dialog, select Excel only as the TaskPaneApp and click Finish.
Visual Studio has added all the components
of the TaskPaneApp that you used earlier when building an app for
Office, but has placed them appropriately in either the Web portion of
the solution that will be deployed to the Web server or within the part
of the app that will be deployed as SharePoint artifacts in your remote
site. Notice the AutoHostedTaskPaneApp .html, .js, and .png files are all placed nicely in the web structure and the app for Office manifest .xml
file is within the SharePoint structure for deployment. Visual Studio
also added an OfficeDocuments folder to the SharePoint project that
contains a base Excel document that has a TaskPaneApp associated with
it.
17. To create a document library for the Excel file, right-click the CompositeOSPAutoHosted node and select Add ⇒ New Item.
18. Select List, name it AppCompositeDocLibrary, and click Add.
19. In the
Choose List Settings dialog, click “Create a non-customizable list
based on an existing list type of:” and in the drop-down list select
Document Library. Click Finish.
20. When the list designer opens, click the ...
button under Use this template as the default to browse for a template.
In the dialog open the OfficeDocuments folder and select the Excel AutoHostedTaskPaneApp.xlsx file, click Open.
21. Click
Content Types, and in the Content Type Settings click to highlight the
entire Document row, then right-click and select Delete, and click OK.
22. Press F5,
and respond appropriately to all the prompts as the app for SharePoint
deploys. After your web page appears, right-click the link to the
AppWeb document library and select Open in new tab. Navigate to the
newly opened tab in your browser to see the document library.
23. In the AppCompositeDocLibrary, click the Files tab ⇒ New Document ⇒ AppCompositeDocLibraryContentType1.
24. Excel will open with its TaskPaneApp, but the AutoHostedTaskPaneApp.html web page is now being served up from the Pages directory on your remote server!
A number of steps in creating an app
for SharePoint contain one or more Apps for Office. Here you simply
created an out-of-the-box Autohosted app for SharePoint. You then added
a standard TaskPaneApp to the solution and its web components, CSS,
image, JavaScript and HTML, were added to the web project and the
manifest file was added to the SharePoint project by Visual Studio.
These, too, are then deployed to the Autohosted website. You set
permissions in the Autohosted app’s manifest file so it could be
trusted to read the Host Web. Your app automatically has full
permissions on the AppWeb, but if you want your app to do anything
outside the scope of the AppWeb, then permission must be granted to the
app when it is installed the first time.
Lastly, you ran the app and navigated
from its landing page to the AppWeb document library and opened the
Excel document deployed in your AppWeb that contained an app for
Office. The app for Office, because it is hosted in your AppWeb
context, can reach back into SharePoint and out to the Web to bring
together any mixture of content needed for your business solution. This
is an example of nesting an app for Office inside an autoprovisioned
app for SharePoint. It can also be done coupled with a
SharePoint-hosted or Provider-hosted app.