DEVELOPMENT WITH · Microsoft 365 Developer platform: People centric User-centered Graph of tasks,...

DEVELOPMENT WITH

SHAREPOINT FRAMEWORK (SPFX)

Lu HuSenior Engineering Manager

Microsoft

luh@microsoft.com

Qianqian LiSoftware Engineer

Microsoft

Qianqian.Li@microsoft.com

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.

The Intelligent WorkspacePowering modern employee experiences

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

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

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

Associate related sites

Provide a hub for users

Create consistency across sites

Govern site creation

Organize your intranet

Create experiences that connect the workplace

Curate dynamic communications

Deliver personalized, relevant content

Create an actionable experience

Engage employees

SharePoint Framework (SPFx)

Web parts

SPFx Extensionfooter

SPFx Extension

header

Page visuals

Web parts

SPFx Extensionfooter

SPFx Extension

header

Page visuals

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

IIS Express

Project Templates

Developer Toolchain

SharePoint server side

SharePoint client side

npm i @microsoft/generator-sharepoint -g

Ship?

SharePoint Framework Build Flow

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

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

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

Resources

SharePoint Look Bookhttps://sharepointlookbook.azurewebsites.net/

SharePoint Framework Traininghttp://aka.ms/spfx-training

SharePoint PnPhttps://github.com/SharePoint/PnP

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

Thank You!