ECS 19 - Chris O'Brien - The hit list - Office 365 dev techniques you should know
Download as PPTX, PDF1 like311 views
The document discusses various techniques for working with SharePoint, Microsoft Teams, Azure Functions, and the Microsoft Graph from applications such as SharePoint Framework (SPFx) solutions, PowerApps, and Microsoft Flow. Specific techniques mentioned include calling a secured Azure Function from SPFx; using site designs and PnP templates to provision sites; capturing images from PowerApps and storing them in SharePoint; and using the Microsoft Graph SDK within SPFx solutions, Azure Functions, and other applications. The document provides code examples and references to documentation for implementing these techniques.
![[Pinto] Is my SharePoint Development team properly enlighted?](https://cdn.slidesharecdn.com/ss_thumbnails/pfiteaf0tvqlojwipmpj-signature-d4523b3bf020616e67040d2a940ba8bf9aeab187b20da49956548f98de22ea12-poli-180606121949-thumbnail.jpg?width=560&fit=bounds)
![[Collinge] Office 365 Enterprise Network Connectivity Using Published Office ...](https://cdn.slidesharecdn.com/ss_thumbnails/ecs18paulcollingeoffice365enterprisenetworkconnectivityusingpublishedoffice365urlsips-180618091153-thumbnail.jpg?width=560&fit=bounds)
![[Struyf] Automate Your Tasks With Azure Functions](https://cdn.slidesharecdn.com/ss_thumbnails/ibzygut2r9mbbgdi0qzh-signature-d4523b3bf020616e67040d2a940ba8bf9aeab187b20da49956548f98de22ea12-poli-180606121949-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to ECS 19 - Chris O'Brien - The hit list - Office 365 dev techniques you should know (20)
Ad
More from European Collaboration Summit (20)
Ad
Recently uploaded (20)
ECS 19 - Chris O'Brien - The hit list - Office 365 dev techniques you should know
- 2. SharePoint developments SharePoint provisioning service, Site Designs, Page Designs, navigation, web parts etc. New Teams capabilities SharePoint/ Teams integration Templated teams PowerApps/ Flow PowerApps “components” Responsive apps Licensing changes Microsoft Graph Teams provisioning APIs Security APIs More app-only support Other Azure Functions v2 Managed Service Identity PowerShell v2
- 3. SharePoint (e.g. Site Designs, modern web parts, header/nav etc.) SPFx dev – including React, SCSS, security etc. Graph! Azure (e.g. Functions, AAD app registrations, Key Vault etc.) PowerApps and Flow Teams dev – including templating, tabs and bots etc.
- 4. SPFx/ Azure Functions: •- Work effectively with the Graph •- Call AAD-secured function from SPFx (using AadHttpClient) •- Call AAD-secured function from SPFx isolated web part •- SPFx formats: • Application customizer • Web parts • Field customizers • ListView command set SharePoint - Implement custom site design which calls Flow to apply PnP template (with app-only auth) - Implement JSON view/column formatting Azure Functions (general) - Use Managed Service Identity with Azure Functions/Key Vault - Use App Insights in Azure Functions Power platform - Create custom connector to call Azure Function from PowerApps/Flow - Implement offline support in PowerApps - Implement on-premises data gateway for PowerApps/Flow/Power BI - Store image from PowerApps Camera/Pen control into SharePoint Chris O’Brien – www.sharepointnutsandbolts.com
- 5. SPFx/ Azure Functions: •- Work effectively with the Graph •- Call AAD-secured function from SPFx (using AadHttpClient) •- Call AAD-secured function from SPFx isolated web part •- SPFx formats: • Application customizer • Web parts • Field customizers • ListView command set SharePoint - Implement custom site design which calls Flow to apply PnP template (with app-only auth) - Implement JSON view/column formatting Azure Functions (general) - Use Managed Service Identity with Azure Functions/Key Vault - Use App Insights in Azure Functions Power platform - Create custom connector to call Azure Function from PowerApps/Flow - Implement offline support in PowerApps - Implement on-premises data gateway for PowerApps/Flow/Power BI - Store image from PowerApps Camera/Pen control into SharePoint - Flow controller pattern Chris O’Brien – www.sharepointnutsandbolts.com
- 6. Work effectively with the Graph Technique 1
- 7. The answer -
- 8. Create your AAD app reg Grant appropriate app-only/delegated permission scopes and provide admin consent IMPORTANT! Add reply URL to AAD app reg: https://app.getpostman.com/oauth2/callback Import Postman collections from Github Enter Client ID/Client Secret/Tenant ID as Postman variables https://github.com/microsoftgraph/microsoftgraph-postman-collections
- 9. Option 1 – roll your own Option 2 – use “paste JSON as code” https://marketplace.visualstudio.com/items? itemName=quicktype.quicktype Option 3 – use Microsoft Graph TypeScript Types https://github.com/microsoftgraph/msgraph-typescript-typings npm install @microsoft/microsoft-graph-types --save-dev npm install @microsoft/microsoft-graph-types-beta --save- dev
- 11. Get (or create) AAD app details Import collections (URL below) Populate token variables Obtain app access token – paste Obtain user access token – paste Call any Graph method as your AAD app ID https://github.com/microsoftgraph/microsoftgraph-postman-collections
- 12. Call your secure web API (or the Graph) from SPFx Technique 2
- 13. Fundamentals 1. Create an Azure Function, secure with AAD auth 2. Declare permissions in SPFx manifest 3. Use AadHttpClient in code to connect to your API 4. Deploy SPFx package, consent to permissions
- 14. Are you calling direct from TypeScript, or via an Azure Function? Approach How SPFx -> Graph • Use AadHttpClient or MsGraphClient in code • Add WebApiPermissions to SPFx manifest – Calendar.Read, Group.ReadWrite.All etc. • Call Graph endpoint directly from SPFx code SPFx -> Azure Function -> Graph • Implement AAD auth on Function • Add WebApiPermissions to SPFx manifest – user_impersonation • Call Azure Function from SPFx code • Inside the function - exchange passed token for one which can call Graph
- 17. PowerApps to collect images Technique 3
- 18. Some work required to save to SharePoint, but not much.. Use “call Flow from PowerApps” approach – no code required The key – Flow’s ‘dataUriToBinary’ function Signatures (pen input control) are harder Need an Azure Function here – different format URI http://johnliu.net/blog/2017/5/taking-a-picture-with-powerapps-and-sending-to- sharepoint-with-just-flow
- 19. Fundamentals 1. Create a PowerApp which uses the Camera control. Save photo to collection. 2. Create a Flow which has PowerApps trigger – use dataUriToBinary() 3. Call Flow from your PowerApp – pass item from collection to Flow.
- 21. Site Designs and PnP templating Technique 4
- 22. Site settings – theme, logo, regional settings, permissions, external sharing Create lists and libraries (with columns, content types, views etc.) Install SPFx solution (e.g. web part) Register an SPFx extension (e.g. header, footer) Trigger a Flow Join a hub site (when site created from this template) Still big gaps compared to PnP!
- 23. See https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-design-trigger-flow-tutorial Site design Flow Adds item to queue Azure Function runs (queue trigger) Runs code/applies PnP template
- 26. A well-rounded developer has skills across: SharePoint SPFx PnP – provisioning, controls, samples etc. Site Designs Teams SPFx/Teams integration Templated teams App development – tabs, bots etc. PowerApps/ Flow Solution building Use of camera/pen input Extending with Azure Functions Microsoft Graph From SPFx From .NET Use of SDKs Other Azure Functions Azure Dev Ops (boards, pipelines) React Git
- 28. https://sharepointnutsandbolts.com https://github.com/microsoftgraph/micro softgraph-postman-collections https://cob-sp.com/2JeJYS4 Thank you!! Any questions? www.sharepointnutsandbolts.com @ChrisO_Brien
- 29. Reference slides
- 30. Same set-up: BUT – token passed from SPFx cannot call the Graph
- 31. // obtain passed access token from SPFx.. var userImpersonationAccessToken = req.Headers.Authorization.Parameter; UserAssertion userAssertion = new UserAssertion(userImpersonationAccessToken); // use to get new token using AAD app/delegated context.. ClientCredential clientCred = new ClientCredential(clientId, clientSecret); AuthenticationResult authenticationResult = await authenticationContext.AcquireTokenAsync (resourceId, clientCred, userAssertion); string token = authenticationResult.AccessToken; var outputName = String.Empty; var responseString = String.Empty; var phone = String.Empty; using (var client = new HttpClient()) { string requestUrl = $"https://graph.microsoft.com/v1.0/me"; HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, requestUrl); request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token); log.Info("About to request URL " + requestUrl); HttpResponseMessage response = client.SendAsync(request).Result; responseString = response.Content.ReadAsStringAsync().Result; var user = JsonConvert.DeserializeObject<AADUser>(responseString); phone = user.mobilePhone; outputName = user.displayName; }
- 32. Key benefits: Template sites for Microsoft Teams and Office 365 Groups and: Team sites Communication sites Hub sites Integrated into Office 365 UI