DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks,...
Transcript of DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks,...
![Page 1: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/1.jpg)
![Page 2: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/2.jpg)
DEVELOPMENT WITH
SHAREPOINT FRAMEWORK (SPFX)
Lu HuSenior Engineering Manager
Microsoft
Qianqian LiSoftware Engineer
Microsoft
![Page 3: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/3.jpg)
Microsoft 365 Developer platform: People centric
User-centered Graph of tasks, content, and activities
Cross-team data including teams, conversations, events
Organizational data, with device and security management
We’re building the world’s productivity
cloud—a solution to help people work
smarter together on any device.
![Page 4: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/4.jpg)
The Intelligent WorkspacePowering modern employee experiences
![Page 5: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/5.jpg)
SharePoint news
keep people informed and engaged with
relevant news delivered across apps & devices
SharePoint sites
share news & information, resources & services,
vision and knowledge across the organization
Hub sitesconnect and organize sites based on
department, division, region, or project
Intranet homepagecreate employee experiences and modern
portals that connect the digital workplace
Innovations for intranets and portals
![Page 6: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/6.jpg)
Stay in the know with important and relevant news
across applications and devices
Create compelling communications with multimedia
and dynamic content from Office 365 and beyond
Scale the reach of your story with automatic news
distribution and promotion to your audience
Engage your audience with likes, comments, and
social re-sharing
Schedule, target, publish, distribute and measure
organizational news and communications
Inform and engage your team and your organization
![Page 7: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/7.jpg)
SHARE NEWS & INFORMATION to keep your organization up-to-date with news & pages
SHARE VISION to guide and align your organization with leadership engagement
SHARE RESOURCES & SERVICES across the organization with microsites
SHARE KNOWLEDGE in communities of practice that connect people to exchange expertise & insight
Empower everyone to inform and engage
![Page 8: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/8.jpg)
Associate related sites
Provide a hub for users
Create consistency across sites
Govern site creation
Organize your intranet
![Page 9: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/9.jpg)
Create experiences that connect the workplace
Curate dynamic communications
Deliver personalized, relevant content
Create an actionable experience
Engage employees
![Page 10: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/10.jpg)
![Page 11: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/11.jpg)
![Page 12: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/12.jpg)
SharePoint Framework (SPFx)
![Page 13: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/13.jpg)
Web parts
SPFx Extensionfooter
SPFx Extension
header
Page visuals
![Page 14: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/14.jpg)
Web parts
SPFx Extensionfooter
SPFx Extension
header
Page visuals
![Page 15: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/15.jpg)
SharePoint Framework Architecture
For 3rd party components
Support ALM capabilities
REST APIs and UX
Hosted in SharePoint
Provides context
pre-fetch data
TypeScript libraries
Handles load
Handles execution
Gives access to Web APIs
Serves AAD access tokens
Wraps to ADAL.js
Integrated in Yeoman
IDE agnostic
Uses Node and NPM
![Page 16: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/16.jpg)
IIS Express
Project Templates
Developer Toolchain
SharePoint server side
SharePoint client side
![Page 17: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/17.jpg)
![Page 18: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/18.jpg)
npm i @microsoft/generator-sharepoint -g
Ship?
SharePoint Framework Build Flow
![Page 19: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/19.jpg)
SharePoint Framework web parts
Building blocks of pages that appear on a SharePoint site
Add powerful and customizable functionality to their pages
Designed to be easier to use, mobile-ready, and great looking
Extend the user experience of SharePoint, leveraging the familiar tools and libraries for client-side development coming from the SharePoint Framework
![Page 20: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/20.jpg)
![Page 21: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/21.jpg)
SharePoint Framework extensions
Application customizer Command set Field customizer
Add script to modern pages
Adjust top and bottom sections of page with custom renderings
Extend the modern list command surface with new actions that run custom code
Visualize data inside columns in the list view
Extend the user experience of SharePoint, leveraging the familiar tools and libraries for client-side development coming from the SharePoint Framework
![Page 22: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/22.jpg)
![Page 23: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/23.jpg)
Join the Office 365 Developer Program
https://aka.ms/o365devprogram
Benefits
Free renewable Office 365 E3 subscriptionBe your own admin
Dev sandbox creation toolsPreload sample users and data for Microsoft Graph, and more
Access to Microsoft 365 expertsJoin bootcamps and monthly community calls
Tools, training and documentation Learn, discover and explore about Office 365 development
Blogs, newsletters and socialStay up to date with the community
![Page 24: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/24.jpg)
Resources
SharePoint Look Bookhttps://sharepointlookbook.azurewebsites.net/
SharePoint Framework Traininghttp://aka.ms/spfx-training
SharePoint PnPhttps://github.com/SharePoint/PnP
![Page 25: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/25.jpg)
Tomorrow – SPFx advanced topics
• Provisioning service
• Reusable components
• Theming and section background styling
• Connect to APIs
• Dynamic Data
• Full page application
• SPFx in Teams Tabs
• And more…
Track B9:00 – 9:45
![Page 26: DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational](https://reader031.fdocuments.in/reader031/viewer/2022013021/5ee1a694ad6a402d666c73db/html5/thumbnails/26.jpg)
Thank You!