An introduction on how to develop and deploy apps to Microsoft SharePoint 2013 and Microsoft Office 2013, using the new Microsoft App Model.

1. 05-04-2013 Ottawa IT Camp 2013 – By Devs, For Devs!
Introduction to Developing and Deploying Apps
for Microsoft SharePoint and Office 2013
Antonio Maio
Senior Product Manager, TITUS
Microsoft SharePoint Server MVP
@AntonioMaio2 www.trustsharepoint.com
antonio.maio@titus.com

2.  Introduction
 The New App Model – What is it? Why?
 Platform Goals, Programming Model & Technologies
 Capability Comparison
 Office Applications, SharePoint Models
 Developing Office 2013 Apps
 Manifest, JavaScript API Examples
 Deployment Options
 Developing SharePoint 2013 Apps
 Manifest, JavaScript API Examples
 Deployment Options
2Ottawa Code Camp 2009

4.  New First-Class Microsoft Development Platform
 Purpose: Allow 3rd parties to build custom applications,
capabilities, features that integrate closely with Microsoft
Platforms like:
 Microsoft Office 2013, SharePoint 2013
 Windows 8
 Windows Phone 8
 Why?
4

5.  Standard Web Technologies
 Cross-Device Ready
 Integrate rich web content with Office content
 Include contextual content within apps for Office
Pre-Office 2013
Extending
Office Ribbon COM Add-In
Macro VSTO
Office 2013
Extending
Office Ribbon COM Add-In
Macro VSTO
App for
Office
Document
Template
App for
SharePoint

6. Deployment Options
On-Premise Farm
Installation
Office 365 &
SharePoint Online
Hosted Installation
Development Options
Full-Trust Solution
SharePoint-Hosted App
Provider-Hosted App
Azure Auto-Hosted App
Development Tools
Web Browser (NAPA)
SharePoint Designer
2013
Visual Studio 2012
Eclipse, LAMP, Etc.

8.  Use web content & standard web technologies like HTML5, XML, CSS3,
JavaScript, JQuery, and REST APIs
 Insert an App into a Document
 Cross-Platform – Write Once, Run Everywhere
 Asynchronous Programming Pattern used Heavily – JavaScript API
8
• Apps are saved within the document
• Pre-populating a document with an App requires a new Document Template

9. App for OfficeApp manifest
<XML>
Web page
HTML + JavaScript

13. Pre-Office 2013 Development
Extending Office Ribbon
COM Add-In
Macro
VSTO
Office 2013 Web Apps
Task Pane app
Content app
Mail app
Office 2013 Desktop Apps
Task Pane app
Content app
Mail app

14. Functional area Word Excel/Excel WAC PowerPoint Outlook/OWA Project
Set/Get Data as text,
table, matrix
Set/Get Data as
Html, ooxml
Get whole doc
Bindings
Custom XML Parts
Settings
App Specific API
* *
* Only supportText format

16. App for OfficeApp manifest
<XML>
Web page
HTML + JavaScript

17. <?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ver="http://schemas.microsoft.com/office/appforoffice/1.0"
xsi:type="ContentApp">
<Id>df5b5660-84ce-11e1-b0c4-0800200c9a66</Id>
<AlternateId>en-USWA123456789</AlternateId>
<Version>1.0.0.0</Version>
<ProviderName>Microsoft</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Sample content app" />
<Description DefaultValue="Describe the features of this app." />
<IconUrl DefaultValue="http://contoso.com/ENUSIcon.png" />
<Capabilities>
<Capability Name="Workbook" />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue="http://contoso.com/apps/content.html" />
<RequestedWidth>400</RequestedWidth>
<RequestedHeight>400</RequestedHeight>
</DefaultSettings>
<Permissions>Restricted</Permissions>
</OfficeApp>

18. <?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ver="http://schemas.microsoft.com/office/appforoffice/1.0"
xsi:type="ContentApp">
<Id>df5b5660-84ce-11e1-b0c4-0800200c9a66</Id>
<AlternateId>en-USWA123456789</AlternateId>
<Version>1.0.0.0</Version>
<ProviderName>Microsoft</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Sample content app" />
<Description DefaultValue="Describe the features of this app." />
<IconUrl DefaultValue="http://contoso.com/ENUSIcon.png" />
<Capabilities>
<Capability Name="Workbook" />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue="http://contoso.com/apps/content.html" />
<RequestedWidth>400</RequestedWidth>
<RequestedHeight>400</RequestedHeight>
</DefaultSettings>
<Permissions>Restricted</Permissions>
</OfficeApp>
Basic App description
values like: ID, Version,
Provider, Locale, Display
Name, Description, Icon.

19. <?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ver="http://schemas.microsoft.com/office/appforoffice/1.0"
xsi:type="ContentApp">
<Id>df5b5660-84ce-11e1-b0c4-0800200c9a66</Id>
<AlternateId>en-USWA123456789</AlternateId>
<Version>1.0.0.0</Version>
<ProviderName>Microsoft</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Sample content app" />
<Description DefaultValue="Describe the features of this app." />
<IconUrl DefaultValue="http://contoso.com/ENUSIcon.png" />
<Capabilities>
<Capability Name="Workbook" />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue="http://contoso.com/apps/content.html" />
<RequestedWidth>400</RequestedWidth>
<RequestedHeight>400</RequestedHeight>
</DefaultSettings>
<Permissions>Restricted</Permissions>
</OfficeApp>
<Capabilities>
Workbook
Document
Project
Presentation

20. <?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ver="http://schemas.microsoft.com/office/appforoffice/1.0"
xsi:type="ContentApp">
<Id>df5b5660-84ce-11e1-b0c4-0800200c9a66</Id>
<AlternateId>en-USWA123456789</AlternateId>
<Version>1.0.0.0</Version>
<ProviderName>Microsoft</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Sample content app" />
<Description DefaultValue="Describe the features of this app." />
<IconUrl DefaultValue="http://contoso.com/ENUSIcon.png" />
<Capabilities>
<Capability Name="Workbook" />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue="http://contoso.com/apps/content.html" />
<RequestedWidth>400</RequestedWidth>
<RequestedHeight>400</RequestedHeight>
</DefaultSettings>
<Permissions>Restricted</Permissions>
</OfficeApp>
<DefaultSettings>
Width and Height of Page
URL of App UI Page
Can have default URL and
different URLs per locale.

21. <?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ver="http://schemas.microsoft.com/office/appforoffice/1.0"
xsi:type="ContentApp">
<Id>df5b5660-84ce-11e1-b0c4-0800200c9a66</Id>
<AlternateId>en-USWA123456789</AlternateId>
<Version>1.0.0.0</Version>
<ProviderName>Microsoft</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Sample content app" />
<Description DefaultValue="Describe the features of this app." />
<IconUrl DefaultValue="http://contoso.com/ENUSIcon.png" />
<Capabilities>
<Capability Name="Workbook" />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue="http://contoso.com/apps/content.html" />
<RequestedWidth>400</RequestedWidth>
<RequestedHeight>400</RequestedHeight>
</DefaultSettings>
<Permissions>Restricted</Permissions>
</OfficeApp>
For TaskPane and Content:
Restricted
WriteDocument
ReadDocument
ReadWriteDocument
For TaskPane only:
ReadAllDocument
For Mail only:
ReadItem
ReadWriteMailbox

22. App for OfficeApp manifest
<XML>
Web page
HTML + JavaScript

23. Example API Signature
Office.context.document.setSelectedDataAsync(data, [options], callback);
function setData(data)
{
var options = {coercionType: Office.CoercionType.Text };
Office.context.document.setSelectedDataAsync(data, options);
}
function getFileData(elementID) {
Office.context.document.getFileAsync(Office.FileType.Text,function(asyncResult) {
if(asyncResult.status == ‘succeeded’) {
var myFile = asyncResult.value;
$(elementId).val(myFile.size);
}
});
}

25. //Test for an object in the host application
if (Office.context.document.settings)
{
//Make use of the settings object
}
else
{
//use some other technique for saving custom properties, like
//localStorage, sessionStorage or cookies
{

26.  Several options available for public or internal deployment:
 Office Store (Microsoft Market Place)
 Apps for Office Catalog on SharePoint
 Exchange Catalog
 Network Shared Folder App Catalog
26

28.  SharePoint apps do not “live” on the SharePoint server
 Custom code executes in the client, cloud or on premise
 Apps are granted permissions to SharePoint via OAuth
 Apps communicate with SharePoint via OData / CSOM
 Acquire apps via centralized location
 App Catalog
 Public Store (via submission process)
 APIs for manual deployment

29.  Full Trust Solutions
 Introduced in SharePoint 2007
 Hosted in the same process as SharePoint
 Full server-side SharePoint API access
 Sandbox Solutions (Deprecated)
 For existing SharePoint 2010 solutions only
 SharePoint App Model
 Introduced in SharePoint 2013
 Provides for highest level of app isolation
 Much cleaner & simpler install & upgrade process

30.  New SharePoint App Model is the preferred route for
building app scenarios
 Provides most flexibility in development technologies, capabilities &
infrastructure choices
 Provides highest level of process, user & data isolation
 Full-trust solutions ideal for:
 Deep customizations to SharePoint
 Provisioning custom master pages, page layouts,
branding assets
 Deploying advanced administration scenarios
We do not yet have API parity yet between Full Trust and Apps

31.  A web application
 Registered with SharePoint using an App Manifest
 Within SharePoint Apps are contained within an
iframe
 Contains the Content for apps
 Ribbon and Context menu extensions are also available

34. <?xml version="1.0" encoding="utf-8" ?>
<App xmlns="http://schemas.microsoft.com/sharepoint/2012/app/manifest
(http://schemas.microsoft.com/sharepoint/2012/app/manifest)"
ProductID="{5eccee90-1e41-4ecc-af8c-485facb5c188}"
Version="1.0.0.0"
SharePointMinVersion="15.0.0.0"
Name=“CreateFieldsAndViews">
<Properties>
<Title>Create Fields and Views</Title>
<StartPage>https://localhost:44303/Default.aspx/?{StandardTokens}
</StartPage>
</Properties>
<AppPrincipal>
<RemoteWebApplication ClientId="ca81d876-8525-44a8-8a60-e02ee79a4a6e"/>
</AppPrincipal>
</App>

35. function sharePointReady() {
context = new SP.ClientContext.get_current();
web = context.get_web();
$("#createFieldButton").click(function () {
var fieldName = $("#fieldName").val();
createField(fieldName);
});
$("#createViewButton").click(function () {
var fieldName = $("#fieldName").val();
var viewName = $("#viewName").val();
createView(viewName, fieldName);
});
}
35

36. function createView(viewName, fieldName) {
spHostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
rootClientContext = new SP.ClientContext(spHostUrl);
list = rootClientContext.get_web().get_lists().getByTitle($("#listName").val());
var viewCreationInformation = new SP.ViewCreationInformation();
viewCreationInformation.set_title(viewName);
var viewType = new SP.ViewType();
viewCreationInformation.set_viewTypeKind(viewType.html)
view = list.get_views().add(viewCreationInformation);
view.set_jsLink("viewtemplate.js");
view.get_viewFields().add("Field");
view.update();
rootClientContext.load(view);
rootClientContext.executeQueryAsync(
Function.createDelegate(this, this.onCreateViewSucceeded),
Function.createDelegate(this, this.onCreateViewFailed)
);
}
36

37. App for SharePoint
App for
Office
Rich Web content YouTube Video,
Photo Gallery
Data Visualization,
Analysis & Mashups
Maps, Custom
charts, Lookups
Reference Tools Translation, Definitions,
Dictionary, Help, Research
Content Authoring &
Publishing
Contextual
Content & Services
Workflow and
Collaboration
Doc builders,
Print
services
Business data lookup (CRM),
Contextual forms (surveys)
Project tracking,
Coauthoring
Content Authoring Resumes,
Contracts
Dashboards Data Analysis,
Data Mashups
Forms &
Reports
Legal Forms,
Financial Reports
Business Processes Sales & Marketing,
Finance, HR
Team Collaboration Content & Project
Management
Workflow Document Approval,
Expenses
Document Template
App for
Office
App for
Office
App for
Office
App for
Office
Document Template
App for
Office
App for
Office
App for
Office
App for
Office

39. SharePoint Solution
(*.wsp)
App for SharePoint
(*.app)
Farm Solution Implement custom branding & UX
Custom administration tools
Sandbox Solution Workflow automating business process
available to entire site
Custom site, list, & library templates
SharePoint-Hosted App Expense calculator
Holiday request
Provider-Hosted App Event registration management
Help desk support
Azure Auto-Hosted
App
Product defect tracking database

40.  My Blog: www.TrustSharePoint.com for this presentation
 Office Developer Center: http://dev.office.com
 JavaScript API Wall Poser: http://www.microsoft.com/en-
us/download/confirmation.aspx?id=36850
 Reference for SharePoint App Manifest: http://msdn.microsoft.com/en-
US/library/office/apps/jj992004
 JavaScript API for Office Reference: http://msdn.microsoft.com/en-
us/library/fp142185.aspx
 JavaScript API for SharePoint Reference: http://msdn.microsoft.com/en-
us/library/jj193034.aspx

41.  Q&A?
 Source Code
 Available online at CodePlex
 http://ottawacodecamp.codeplex.com/
 Downloads
 Each year’s source code in one easily download
 Evals = Prize Draws
 Sessions Evals = book draws!
 Event Evals
 LOTS of great things, make sure you’re there to win!
 Thank you!
41Ottawa Code Camp 2009