Downloaded 31 times
![• Apps
• SSL
• DNS
• [PHA] Server to Server (S2S) High Trust or Hybrid Low Trust
Configuration
• [SHA] None
• [PHA] Servers, Networking, Authentication, Admin Access
Resources
•Corporate Catalog
•Developer Site
•Store
Distribution](https://image.slidesharecdn.com/sharepointandoffice365developmentworkshop-181114155107/75/SharePoint-and-Office-365-Development-Workshop-75-2048.jpg)
![• Apps
Configuration
• [SHA] None
• [PHA] Servers, Networking, Authentication, Admin Access
Resources
• Corporate Catalog
• Developer Site
• Store
Distribution](https://image.slidesharecdn.com/sharepointandoffice365developmentworkshop-181114155107/75/SharePoint-and-Office-365-Development-Workshop-76-2048.jpg)
![• Use the spHttpClient wrapper to simplify operations:
• Import { SPHttpClient, SPHttpClientResponse} from
‘@microsoft/sp-http’
• this.context.spHttpClient.get([REST URL + ODATA])
• Simplifies mock testing](https://image.slidesharecdn.com/sharepointandoffice365developmentworkshop-181114155107/75/SharePoint-and-Office-365-Development-Workshop-158-2048.jpg)
![✘• Completely violates
established (best)
practices of separation
of concerns [MVP, MVC,
MVVM]
• Markup is embedded
with logic – no views
whatsoever - JSX is an
abomination
• Virtual DOM is
imprecise and state is
inconsistent.
• It’s fast. So what? (REST
will always be slow)](https://image.slidesharecdn.com/sharepointandoffice365developmentworkshop-181114155107/75/SharePoint-and-Office-365-Development-Workshop-173-2048.jpg)
Uploaded byEric Shupps
SharePoint and Office 365 Development Workshop
The document provides a comprehensive guide on SharePoint and Office Add-ins development, detailing various models such as provider-hosted and SharePoint-hosted environments. It covers essential topics including security frameworks, deployment processes, and API integrations, emphasizing the use of OAuth for authentication and authorization. Additionally, it discusses the tools and technologies involved in building solutions, including the SharePoint Framework, Azure services, and modern development practices.
More Related Content
![[Struyf] Automate Your Tasks With Azure Functions](https://cdn.slidesharecdn.com/ss_thumbnails/ibzygut2r9mbbgdi0qzh-signature-d4523b3bf020616e67040d2a940ba8bf9aeab187b20da49956548f98de22ea12-poli-180606121949-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to SharePoint and Office 365 Development Workshop
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-agenticaiarchitectureredefiningsystemcommunication-251124030838-e6c70cc2-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
SharePoint and Office 365 Development Workshop
- 2. @eshupps sharepointcowboywww.sharepointcowboy.com slideshare.net/eshupps linkedin.com/in/eshupps EricShupps Office Servers & Services MVP
- 4. Introduction SharePoint Add-Ins Office Add-Ins AzureWeb Applications SharePoint Framework
- 5. Hello, everyone! Let’s getgoing That will be just fine Please be quiet This is really good! Howdy, y’all! Lesgitafterit Ayiteden Kwityerjackjawin Cantbeatitwiddastick I am about to get started Imfixintagitrdone
- 6.
- 7. Solution Design Skills andPrerequisites Development Models API’s OAuth
- 9.
- 10. Web Parts App Parts/ Framework WP Application Pages Web Pages Timer Jobs Web Jobs List Templates Code Web Templates Provisioning Event Receivers Webhooks
- 12. • Windows Server •IIS • ASP.NET • SharePoint Server Framework •.NET (C#/VB) •SharePoint Server OM •CAML/XOML Languages and API’s • Visual Studio Tools
- 13. • Browser • Server •Mobile Framework •HTML, JavaScript (JQuery, Knockout, Angular, React, etc.) •CSOM, JSOM, REST, Office JS, Graph, OAuth •C#, VB, Java, PHP, Python, Ruby, Others Languages and API’s • Visual Studio • VS Code • IDE of choice Tools
- 15.
- 21.
- 25. User requests access App requests RequestToken Provider returns Request Token App builds auth link w/ Request Token User requests URL + Request Token Provider returns access token User requests URL + Access Token App validates access token Access token validated User granted access 1 2 3
- 26. User requests access App requests AccessToken Provider returns Access Token App builds auth link w/ Access Token User requests URL + Access Token App validates access token Access token validated User granted access 1 2
- 28. Manages identity informationfor principals (STS)Identity Provider Handles requests for trusted identity claimsSecurity Token Service Identity provider associated with a web applicationIdentity Token Issuer Trusted resource (farm, server, etc.)Security Token Issuer Resource information and signing certificate (JSON)Metadata Endpoint Used to request permission to protected resourceRequest Token Used by App to access resource on behalf of userAccess Token Operation scope for authorizationRealm Cloud-based security token service (IP-STS)Azure ACS
- 32. Client ID AppURL Tenant ID Tenant ID Azure ACS Start End SharePoint Tenant ID User ID + Issuer + App + Realm IP-STS URL Browser or Event Receiver Token sent to IP-STS (Azure ACS)
- 33.
- 35.
- 38.
- 39. • Provider Hosted(External) • SharePoint Hosted (Internal) Environment •CSOM/JSOM •REST/Unified API’s • OAuth • Consent Framework Security •Store •Catalog Deployment
- 42. What Works WhatDoesn’t
- 43.
- 51. HTTP-based web servicearchitecture that uses nouns and verbs to define operations Noun: “Items” Verbs: GET, POST, PUT, DELETE OData provides metadata, object typing and query semantics for underlying data structure (WCF data services) /items(0) Client Object Model service (client.svc) processes queries, interacts with server OM, returns formatted response (JSON, XML) /items/GetByTitle(‘foo’)
- 52.
- 53. http://<site collection>/<site>/_api/sites/features/GetById(guid’<value>’) http://<site collection>/<site>/_api/sites/eventreceivers ViewEvent Receivers http://<site collection>/<site>/_api/web/webinfos/add { 'd' :{ 'parameters': { '__metadata': {'type': 'SP.WebInfoCreationInformation' }, 'Url': 'RestSubWeb', 'Title': 'RestSubWeb', 'Description': 'rest created web', 'Language':1033, 'WebTemplate':'sts', 'UseUniquePermissions':false} }} Create a Site Get Feature
- 55. http://<site collection>/<site>/_api/lists Get AllLists http://<site collection>/<site>/_api/lists/GetByTitle(‘Shared Documents’) Get List http://<site collection>/<site>/_api/lists/GetByTitle(‘Shared Documents’)/items/GetById(0) Get List Item http://<site collection>/<site>/_api/lists/GetByTitle(‘Shared Documents’)/items/ GetById(1)?$select=Title,ID Get List Item with Specific Properties
- 57. http://<site collection>/<site>/_api/search/query?queryText=‘Value’ Simple Term http://<sitecollection>/<site>/_api/search/query?queryText=‘PreferredName: Robert Smith’ Item Property http://<site collection>/<site>/_api/search/suggest?queryText=‘quarterly sales’ Suggestions
- 59. http://<site collection>/<site>/_api/social.following/followed Get FollowedUsers http://<siteCollection>/<site>/_api/social.following/my/followeddocumentsuri Get Followed Documents http://<site collection>/<site>/_api/sp.userprofiles.peoplemanager/getmysuggestions Get Suggestions http://<siteCollection>/<site>/_api/sp.userprofiles.peoplemanager/ getpeoplefollowedby(accountName=@v)?@v='domainuser' Get Followers
- 61.
- 62. http://<site>/_api/web/lists/getbytitle(‘Products’)/items/?$filter=Price gt 30000 Filterwith Comparison http://<site>/_api/web/lists/getbytitle(‘Products’)/items()? $select=Title,Price,Supplier_/Title&$expand=Supplier_/Title&$filter=Supplier_/Title eq ‘Acme’ Join with Filter http://<site collection>/<site>/_api/web/lists('<guid>')/items$top=10 Top ‘N’ Results
- 64. url: http://site url/_api/web/lists/GetByTitle(‘Test')/items method:POST body: { '__metadata': { 'type': 'SP.Data.TestListItem' }, 'Title': 'Test'} headers: Authorization = "Bearer " + accessToken X-RequestDigest = form digest value accept: "application/json;odata=verbose" content-type: "application/json;odata=verbose" content-length:1024 Create a List Item url: http://site url/_api/web/lists/GetByTitle(‘Test')/items(item id) method: POST body: { '__metadata': { 'type': 'SP.Data.TestListItem' }, 'Title': 'TestUpdated'} headers: Authorization = "Bearer " + accessToken X-RequestDigest = form digest value “IF-MATCH”: etag or “*” “X-HTTP-Method”:”MERGE”, accept: "application/json;odata=verbose" content-type: "application/json;odata=verbose" content-length:1024 Edit a List Item
- 65. • Used toprevent replay attacks • Updates will fail without digest value • Local • $("#__REQUESTDIGEST").val() • Remote • POST to /_api/contextinfo
- 69.
- 70.
- 72. App Web • Notprimary user context • Declarative artifacts or code • Iterative deployments destroy content • Only provisioned via SPHA or PHA with declarative artifacts Host Web • Code only – no declarative artifacts • Requires Cross Domain calls • Injection remnants difficult to remove
- 73. • On-Premise • Modifyand manipulate – do not replace Master Pages •PHA: External (CDN) •SPHA: External or App Web Dependencies • On-Premise: Declarative or Programmatic • Online: Programmatic Assets •Do not rely upon remote event receivers •Beware the dangers of injection Retraction
- 75. • Apps • SSL •DNS • [PHA] Server to Server (S2S) High Trust or Hybrid Low Trust Configuration • [SHA] None • [PHA] Servers, Networking, Authentication, Admin Access Resources •Corporate Catalog •Developer Site •Store Distribution
- 76. • Apps Configuration • [SHA]None • [PHA] Servers, Networking, Authentication, Admin Access Resources • Corporate Catalog • Developer Site • Store Distribution
- 78.
- 81. •Provider Hosted (External)Environment •OfficeJS •REST API’s • OAuth • Consent Framework Security •Store •File Deployment
- 83.
- 85.
- 87. • Manifest • App •Content • Images • Scripts
- 90. • Common webstandards • Language & platform agnostic (HTML + JavaScript) • Desktop or Browser • Text • HTML • OOXML • Table • Matrix
- 91. • Base Requirement •Callbacks • Word, Excel, PowerPoint, Access, Outlook, Project • Typed Objects • Promises • Word, Excel
- 92. Capability Word ExcelPowerPoint Outlook Project Get/set data as text, table or matrix All All Text N/A Text Settings All All All Roaming N/A Get file All N/A Compressed N/A N/A Bindings All All N/A N/A N/A Custom XML Parts All N/A N/A N/A N/A HTML and OOXML All N/A N/A N/A N/A Mailbox N/A N/A N/A All N/A
- 96. • Submit toOffice store • Configure licensing • Individual purchase* Store • Upload to Corporate Catalog in Office 365 • Add from Ribbon or Settings Catalog •Copy to network share •Set trusted location in Office client •Add from Developer ribbon File Share
- 97.
- 99.
- 100. • Provider Hosted(External)Environment •CSOM/JSOM •REST/Unified API’s • Azure AD • OAuth • Consent Framework Security •Marketplace •Azure Portal Deployment
- 101.
- 103. What Works WhatDoesn’t
- 104. Bound to singleAD domain Cannot be accessed by other domains Simplified authorization model Owned by single authorizing domain Accessible by any Azure AD domain Authorized by Azure admin for individual domains App owner must manage tenant registration
- 106.
- 107. Developers cannot modifylogin experience User interface is suboptimal Access to resources requires permission definition OAuth tokens for O365 POST to app with user/tenant details App launcher in O365 Users notified of app availability in alerts
- 108. Authorization Exchange authorization codes for accesstokens Refresh tokens enable long-lived sessions Designed for native clients and server-side API’s Client Credential Requires app authorization consent from administrator Shared secrets or certificates used to request tokens Designed for service apps and server-to- server scenarios Implicit Retrieve access tokens directly from single endpoint No refresh tokens (local session management only) Designed for SPA's (requires manifest modification)
- 109. Manifest: oauth2AllowImplicitFlow =true Token and authorization endpoints Tenant ID = “common” for multi-tenant WSFED “common” endpoint Non-customizable consent page in MSFT domain GET: https://login.microsoftonline.com/common/oauth2/authorize?client_id={client ID}& response_type=token&redirect_uri={redirect URI}&prompt=admin_consent
- 110. Application Delegated Minimum: “Sign inand read user profile” Beware permission level restrictions Exchange Yammer Azure AD SharePoint Online Power BI Azure Management O365 Management Skype
- 112.
- 114. Visual Studio templatesare incomplete • Database • Tenants, IssuingAuthorityKeys, SignupTokens • Registration Module • XML Response Parser • Tenant and User Information • Auth Tokens • Federation, Realm and Identity Configuration • HTTPS Redirection • Sign-In Page (optional)
- 117. • AD Apps •SSL • DNS • SSO • Permissions • Multi-tenant Configuration •Servers, Networking, Authentication, Admin Access •Azure AD Premium* Resources • Admin Authorization • User/Group Assignment* Distribution
- 118.
- 120.
- 122. • External orInternal CDNEnvironment •RESTAPI’s • Azure AD • OAuth • Consent Framework Security •App catalogDeployment
- 124. Add-Ins • Standalone • Remotecontext • Framed • Closed toolset • Classic Framework • Integrated • Native context • Inline • Open toolset • Modern
- 126. • Windows Server •IIS • ASP.NET • SharePoint Server Framework •.NET (C#/VB) •SharePoint Server OM •CAML/XOML Languages and API’s • Visual Studio Tools
- 127. • Browser • Server •Mobile Framework •HTML, JavaScript (JQuery, Knockout, Angular, React, etc.) •CSOM, JSOM, REST, Office JS, Graph, OAuth •C#, VB, Java, PHP, Python, Ruby, Others Languages and API’s • Visual Studio • VS Code • IDE of choice Tools
- 128. Skills • HTML +CSS • Adv. JavaScript • OAuth • TypeScript Software • Code Editor (Any) • Node.js/NPM/Gulp • Yeoman Generator Services • SP Online • CDN • Git OS • Windows • Mac • Linux Platform • Cloud • On-Premises
- 129. TypeScript - JavaScriptsuperset w/ typed objects, classes &extension methods Node.js - Web server and component packaging extensions NPM – Packaging and module management utility Gulp – Task runner and build automation Yeoman – Project scaffolding generator CDN – Content delivery network (or location) for hosting source files React – JavaScript library of UI components Office Fabric – Office-centric set of React UI components
- 130.
- 131. • Node.js • NPM •GitHub • Yeoman Generator • VS Code (optional) • Visual Studio Extension • Node.js • NPM • GitHub • Yeoman Generator • Homebrew (optional) • NVM (optional) • VS Code (optional)
- 132. • Developer Site •Workbench • Corporate Catalog • Site collection app catalog • Content Delivery Network (or accessible file location) • Apps (On-Premises)
- 133. Patience Lots of diskspace Love of command-line utilities More patience A good helmet A virtual machine with lots of snapshots Vesa’s email address AC’s mobile number Fond memories of real development in Visual Studio A new career path?
- 134. • Install thev8.x LTM release of Node.js from https://nodejs.org/download/release/latest-v8.x/ • Run the x64 MSI (includes NPM) npm install –g npm@3 nvm use 6.11.0 • Install Yeoman and Gulp: npm install –g yo gulp • Install SPFx Yeoman generator: npm install –g @microsoft/generator-sharepoint • Install code editor (VS Code, Atom, Webstorm, etc.)
- 135. • Install Homebrew:https://brew.sh • Install the v6.x release of Node.js: brew install node@8 brew update node@6 brew install nvm nvm use 6.11.0 • Install Yeoman and Gulp: npm install –g yo gulp • Install SPFx Yeoman generator: npm install @microsoft/generator-sharepoint • Install code editor (VS Code, Atom, Webstorm, etc.)
- 137. Web Part • In-context page component •Customizable property pane • Connectable • Scope: Page Application Customizer • Script injection onto pages • Defined DOM element identifiers • Scope: Site Command Set • Modify list and item menus • Custom dialogs • Scope: List Field Customizer • Change display options for field elements • Scope: List
- 138.
- 139. • Local testenvironment for Framework solutions • No live data integration • Mockup and formatting only • Simulate data operations with mock objects • Launch with “gulp serve” command • Preview changes prior to publication
- 140. • External orwithin O365
- 142.
- 143. • Placeholders • DOMelements • Menus • Data Views • Fields • Global via CSOM/REST • Sites via Feature Framework
- 144. loadSPFX Force loadingof SPFx debugManifestsFile Load extension from localhost componentType Create a mock SP component key Extension GUID location Type of extension properties Extension property collection ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp /manifests.js&customActions={"e5625e23-5c5a-4007-a335- e6c2c3afa485":{"location":"ClientSideExtension.ApplicationCus tomizer","properties":{"testMessage":"Hello as property!"}}}
- 145. • Top • GlobalNavigation! • Bottom
- 146. • Called whenthe extension is activated on the page. Occurs after CONTEXT and PROPERTIES are assigned.
- 148.
- 149. • Only ListViewis currently supported • Shown only on the Command Bar • Size is 16 x 16 • Can be a fixed URL or a ”data” element comprised of MIME Type + Base64-encoded string
- 150. • Called inresponse to command invocation (i.e. the menu item is selected). • Fires for each command in response to changes in the ListView that require re-rendering.
- 152. • Alter text •Display graphics • Custom validation • Concatenate field values • KPI Indicators
- 153. • Called whenthe extension is activated on the page. Occurs after CONTEXT and PROPERTIES are assigned. • Fires when each cell is rendered. • Fires immediately before the dell is deleted. Use to deallocate resources (such as UI elements).
- 155.
- 156. • Fields • SiteColumns • Content Types • List Instances
- 158. • Use thespHttpClient wrapper to simplify operations: • Import { SPHttpClient, SPHttpClientResponse} from ‘@microsoft/sp-http’ • this.context.spHttpClient.get([REST URL + ODATA]) • Simplifies mock testing
- 159.
- 160.
- 161. @microsoft/graph-http • Read andwrite all groups • Read all usage reports https://docs.microsoft.com/en- us/sharepoint/dev/spfx/overview-graphhttpclient
- 162.
- 165. • Kind ofsounds like ASP.NET, doesn’t it? 🤔
- 169. • Do notrely on global parameters • Pass a function as a parameter that gets current values at time of execution • Apply changes to multiple properties individually
- 172.
- 173. ✘• Completely violates established(best) practices of separation of concerns [MVP, MVC, MVVM] • Markup is embedded with logic – no views whatsoever - JSX is an abomination • Virtual DOM is imprecise and state is inconsistent. • It’s fast. So what? (REST will always be slow)
- 175. package-solution.json .sppkg • Change behaviorby setting “includeClientSideAssets” = false
- 176. gulp bundle --ship gulppackage-solution --ship
- 177. * Introduced inSPFx v1.4; If enabled previously, disable and re-enable. Not compatible with on-premises SP 2016 FP2.
- 178. Set-SPOTenantCdnEnabled –CdnType Public Get-SPOTenantCdnEnabled Get-SPOTenantCdnOrigins Get-SPOTenantCdnPolicies NOTE:Provisioning can take 15+ minutes to complete
- 180.
Editor's Notes
- #22 OAuth is an open standard for authorization. OAuth provides a method for clients to access server resources on behalf of a resource owner (such as a different client or an end-user). It also provides a process for end-users to authorize third-party access to their server resources without sharing their credentials (typically, a username and password pair), using user-agent redirections. Grew out of collaboration between Twitter, Google, and other social computing vendors, as a means to provide user access and API integration, primarily via OpenID, without requiring individual accounts.
- #38 Get-SPSecurityTokenServiceConfig S2S_Farm_NoWebApp S2S_Farm_Metadata
- #41 S2S_Server S2S_App_HighTrust
- #50 Get-SPSecurityTokenServiceConfig S2S_Farm_NoWebApp S2S_Farm_Metadata
- #52 Get-SPSecurityTokenServiceConfig S2S_Farm_NoWebApp S2S_Farm_Metadata
- #55 S2S_Server S2S_App_HighTrust
- #57 S2S_Server S2S_App_HighTrust
- #76 S2S_Server S2S_App_HighTrust
- #83 S2S_Server S2S_App_HighTrust
- #89 S2S_Server S2S_App_HighTrust
- #106 S2S_Server S2S_App_HighTrust
- #125 S2S_Server S2S_App_HighTrust
- #154 ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
- #159 ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={”[GUID]":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello world!"}}}
- #160 Debug URL: ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={” a861c815-e425-416d-9520-04bcdf557e27":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}}}
- #163 ?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={”[GUID]":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}
- #167 Debug URL: ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"id":"f2f6825c-fd37-43f7-a99c-5fe6b39dd7fd","properties":{"sampleText":"Hello!"}}}
- #174 Debug URL: ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"6ed4a222-c0c8-441e-ae2e-d2240084deff":{"location":"ClientSideExtension.ApplicationCustomizer"}}
- #176 S2S_Server S2S_App_HighTrust
- #191 S2S_Server S2S_App_HighTrust