05-04-2013 Ottawa IT Camp 2013 – By Devs, For Devs!Introduction to Developing and Deploying Appsfor Microsoft SharePoint a...
 Introduction The New App Model – What is it? Why? Platform Goals, Programming Model & Technologies Capability Compari...
 New First-Class Microsoft Development Platform Purpose: Allow 3rd parties to build custom applications,capabilities, fe...
 Standard Web Technologies Cross-Device Ready Integrate rich web content with Office content Include contextual conten...
Deployment OptionsOn-Premise FarmInstallationOffice 365 &SharePoint OnlineHosted InstallationDevelopment OptionsFull-Trust...
 Use web content & standard web technologies like HTML5, XML, CSS3,JavaScript, JQuery, and REST APIs Insert an App into ...
App for OfficeApp manifest<XML>Web pageHTML + JavaScript
Pre-Office 2013 DevelopmentExtending Office RibbonCOM Add-InMacroVSTOOffice 2013 Web AppsTask Pane appContent appMail appO...
Functional area Word Excel/Excel WAC PowerPoint Outlook/OWA ProjectSet/Get Data as text,table, matrixSet/Get Data asHtml, ...
App for OfficeApp manifest<XML>Web pageHTML + JavaScript
<?xml version="1.0" encoding="utf-8"?><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"xmlns:xsi="ht...
<?xml version="1.0" encoding="utf-8"?><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"xmlns:xsi="ht...
<?xml version="1.0" encoding="utf-8"?><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"xmlns:xsi="ht...
<?xml version="1.0" encoding="utf-8"?><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"xmlns:xsi="ht...
<?xml version="1.0" encoding="utf-8"?><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"xmlns:xsi="ht...
App for OfficeApp manifest<XML>Web pageHTML + JavaScript
Example API SignatureOffice.context.document.setSelectedDataAsync(data, [options], callback);function setData(data){var op...
//Test for an object in the host applicationif (Office.context.document.settings){//Make use of the settings object}else{/...
 Several options available for public or internal deployment: Office Store (Microsoft Market Place) Apps for Office Cat...
 SharePoint apps do not “live” on the SharePoint server Custom code executes in the client, cloud or on premise Apps ar...
 Full Trust Solutions Introduced in SharePoint 2007 Hosted in the same process as SharePoint Full server-side SharePoi...
 New SharePoint App Model is the preferred route forbuilding app scenarios Provides most flexibility in development tech...
 A web application Registered with SharePoint using an App Manifest Within SharePoint Apps are contained within anifram...
<?xml version="1.0" encoding="utf-8" ?><App xmlns="http://schemas.microsoft.com/sharepoint/2012/app/manifest(http://schema...
function sharePointReady() {context = new SP.ClientContext.get_current();web = context.get_web();$("#createFieldButton").c...
function createView(viewName, fieldName) {spHostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));rootClientC...
App for SharePointApp forOfficeRich Web content YouTube Video,Photo GalleryData Visualization,Analysis & MashupsMaps, Cust...
SharePoint Solution(*.wsp)App for SharePoint(*.app)Farm Solution Implement custom branding & UXCustom administration tools...
 My Blog: www.TrustSharePoint.com for this presentation Office Developer Center: http://dev.office.com JavaScript API W...
 Q&A? Source Code Available online at CodePlex http://ottawacodecamp.codeplex.com/ Downloads Each year’s source code...
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013
Upcoming SlideShare
Loading in...5
×

Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013

1,182

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,182
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to Develop and Deploy Apps for Microsoft SharePoint and Office 2013

  1. 1. 05-04-2013 Ottawa IT Camp 2013 – By Devs, For Devs!Introduction to Developing and Deploying Appsfor Microsoft SharePoint and Office 2013Antonio MaioSenior Product Manager, TITUSMicrosoft SharePoint Server MVP@AntonioMaio2 www.trustsharepoint.comantonio.maio@titus.com
  2. 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 Options2Ottawa Code Camp 2009
  3. 3.  New First-Class Microsoft Development Platform Purpose: Allow 3rd parties to build custom applications,capabilities, features that integrate closely with MicrosoftPlatforms like: Microsoft Office 2013, SharePoint 2013 Windows 8 Windows Phone 8 Why?4
  4. 4.  Standard Web Technologies Cross-Device Ready Integrate rich web content with Office content Include contextual content within apps for OfficePre-Office 2013ExtendingOffice Ribbon COM Add-InMacro VSTOOffice 2013ExtendingOffice Ribbon COM Add-InMacro VSTOApp forOfficeDocumentTemplateApp forSharePoint
  5. 5. Deployment OptionsOn-Premise FarmInstallationOffice 365 &SharePoint OnlineHosted InstallationDevelopment OptionsFull-Trust SolutionSharePoint-Hosted AppProvider-Hosted AppAzure Auto-Hosted AppDevelopment ToolsWeb Browser (NAPA)SharePoint Designer2013Visual Studio 2012Eclipse, LAMP, Etc.
  6. 6.  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 API8• Apps are saved within the document• Pre-populating a document with an App requires a new Document Template
  7. 7. App for OfficeApp manifest<XML>Web pageHTML + JavaScript
  8. 8. Pre-Office 2013 DevelopmentExtending Office RibbonCOM Add-InMacroVSTOOffice 2013 Web AppsTask Pane appContent appMail appOffice 2013 Desktop AppsTask Pane appContent appMail app
  9. 9. Functional area Word Excel/Excel WAC PowerPoint Outlook/OWA ProjectSet/Get Data as text,table, matrixSet/Get Data asHtml, ooxmlGet whole docBindingsCustom XML PartsSettingsApp Specific API* ** Only supportText format
  10. 10. App for OfficeApp manifest<XML>Web pageHTML + JavaScript
  11. 11. <?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>
  12. 12. <?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 descriptionvalues like: ID, Version,Provider, Locale, DisplayName, Description, Icon.
  13. 13. <?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>WorkbookDocumentProjectPresentation
  14. 14. <?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 PageURL of App UI PageCan have default URL anddifferent URLs per locale.
  15. 15. <?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:RestrictedWriteDocumentReadDocumentReadWriteDocumentFor TaskPane only:ReadAllDocumentFor Mail only:ReadItemReadWriteMailbox
  16. 16. App for OfficeApp manifest<XML>Web pageHTML + JavaScript
  17. 17. Example API SignatureOffice.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);}});}
  18. 18. //Test for an object in the host applicationif (Office.context.document.settings){//Make use of the settings object}else{//use some other technique for saving custom properties, like//localStorage, sessionStorage or cookies{
  19. 19.  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 Catalog26
  20. 20.  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
  21. 21.  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
  22. 22.  New SharePoint App Model is the preferred route forbuilding 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 scenariosWe do not yet have API parity yet between Full Trust and Apps
  23. 23.  A web application Registered with SharePoint using an App Manifest Within SharePoint Apps are contained within aniframe Contains the Content for apps Ribbon and Context menu extensions are also available
  24. 24. <?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>
  25. 25. 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
  26. 26. 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
  27. 27. App for SharePointApp forOfficeRich Web content YouTube Video,Photo GalleryData Visualization,Analysis & MashupsMaps, Customcharts, LookupsReference Tools Translation, Definitions,Dictionary, Help, ResearchContent Authoring &PublishingContextualContent & ServicesWorkflow andCollaborationDoc builders,PrintservicesBusiness data lookup (CRM),Contextual forms (surveys)Project tracking,CoauthoringContent Authoring Resumes,ContractsDashboards Data Analysis,Data MashupsForms &ReportsLegal Forms,Financial ReportsBusiness Processes Sales & Marketing,Finance, HRTeam Collaboration Content & ProjectManagementWorkflow Document Approval,ExpensesDocument TemplateApp forOfficeApp forOfficeApp forOfficeApp forOfficeDocument TemplateApp forOfficeApp forOfficeApp forOfficeApp forOffice
  28. 28. SharePoint Solution(*.wsp)App for SharePoint(*.app)Farm Solution Implement custom branding & UXCustom administration toolsSandbox Solution Workflow automating business processavailable to entire siteCustom site, list, & library templatesSharePoint-Hosted App Expense calculatorHoliday requestProvider-Hosted App Event registration managementHelp desk supportAzure Auto-HostedAppProduct defect tracking database
  29. 29.  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
  30. 30.  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×