Microsoft 365 Community SharePoint Framework Open Meetings

29 Sep 2023

📺 In this 13 minute developer focused demo, Daniel Turley shows Accelerator Services Framework for reusable services. He starts with a quick overview on the accelerator, followed by an explanation of environments. He walks us through the idea behind the environments.json file to be able to deploy different builds side by side to the same tenant or even the same side while preventing naming collisions and utilizing additional gulp command to package and deploy an environment. He closes with a live demo.

This demo is taken from the Viva Connections and SharePoint Framework community call 24th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
Daniel Turley (Avanade)

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
11 minutes

environments

packages

context

configuration

project

demos

apps

exporting

platform

sharepoint

22 Sep 2023

📺 In this 13 minute developer focused demo, Rishabh shows us his Invoice Generator Web Part he built using PnP JS. It uses Fluent UI and consumes data from a SharePoint list and allows users to create invoices for different clients, manages the calculation, generates PDF versions from the invoices and is fuilly customizable. Rishabh provides a comprehensive code walkthrough and demos the rich features of this SharePoint Web Part.

This demo is taken from the Viva Connections and SharePoint Framework community call 10th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Rishabh Shukla (Marsh McLennan)

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
13 minutes

invoice

invoices

application

generating

client

excel

pdf

pnpgs

spfx

configure

19 Sep 2023

📺 In this 13 minute developer focused demo, Ejaz shows how to use OpenAI in an SPFx Web Part. Using the OpenAI function calling feature to determine user's request and intention and then process relevant function using Azure DevOps API to allow users to view recent tasks, bugs, and commits assigned to them from a project in Azure DevOps.

This demo is taken from the Viva Connections and SharePoint Framework community call 10th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Ejaz Hussain (Content+Cloud) | @EjazHussain_

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
14 minutes

query

ai

apis

processing

function

feature

thinking

spf

open

chat

12 Sep 2023

📺 In this 12 minute developer-focused demo Vesa walks the audience through new capabilities in SPFx 1.18. They start with an overview of building experiences in Microsoft 365 with SPFx (the easiest way to build enterprise soluitions for Microsoft Teams, Microsoft Viva, Outlook, Microsoft 365 app and SharePoint) and then proceed to roadmap outlook. Alex then demoes updated layout options for Viva connections powered by SPFx.

This demo is taken from the Microsoft 365 & Power Platform weekly call – 22nd of August, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
- Vesa Juvonen (Microsoft) | @vesajuvonen
- Alex Terentiev (Microsoft) | @alexaterentiev

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

3 participants
13 minutes

sharepoint

v1

frameworks

microsoft

hosted

configurable

dependencies

projects

updates

trees

24 Aug 2023

📺 In this 14 minute developer focused demo, Hugo shows us a recommended way when to deal with values like URLs or tenant IDs when working in teams or sharing your code/using source control to deal with: Envirohment variables. They are a convenient way to not have always to change values for different teams or different development stages. Hugo contextualizes this approach for SPFx development showing the necessary tools.

This demo is taken from the Viva Connections and SharePoint Framework community call 24th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Hugo Bernier (Microsoft) | @bernierh

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
14 minutes

configuration

sharepoint

project

sharing

devcontainer

developers

operating

presentation

admin

session

10 Aug 2023

📺 As a Viva Connections Admin, you can pin multiple Forms in the dashboard, but don’t. In this 9-minute developer-focused demo, Marcus Castro suggests a way to reduce Viva Dashboard clutter. Cleanly open/respond to multiple forms using Stage View accessed from this single custom ACE card or access multiple Power Apps from this custom ACE. Address process and authentication challenges. The benefits will become clear in demo. How does it work - review supporting list structure, ACE card configuration and deep-link generation.

This community call demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 15, 2023.

✨ Demo Presenter
• Marcus Castro (Microsoft)

📖 Supporting materials
• Documentation - Link to a Form | https://learn.microsoft.com/viva/connections/use-the-link-card#link-to-a-form
• Documentation - Link to PowerApps | https://learn.microsoft.com/viva/connections/use-the-link-card#link-to-powerapps
• Sample - Basic Card - Multiple Forms | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-Multiple-Forms-Apps
• Documentation - Overview of Viva Connections | https://learn.microsoft.com/viva/connections/viva-connections-overview
• Documentation - Create deep links | https://learn.microsoft.com/microsoftteams/platform/concepts/build-and-test/deep-links
• Samples – SPFx ACE Samples | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples
• Documentation – Designing Viva Connections Quick Views | https://learn.microsoft.com/sharepoint/dev/spfx/viva/design/designing-quick-view
• Documentation – Viva Connections Adaptive Card Extension Quick View samples | https://learn.microsoft.com/sharepoint/dev/spfx/viva/design/quick-view-samples
• Repo – TeamsDeeplinkHelper (Deep-link Generator App) | https://github.com/ericsche/TeamsDeeplinkHelper

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
9 minutes

powerapps

sharepoint

dashboard

apps

microsoft

users

card

connections

forms

sso

10 Aug 2023

📺 In this 13 minute developer focused demo, Daniel Turley shows Accelerator Services Framework for reusable services. He starts with a quick overview on the accelerator, followed by a walkthrough of the Services Framework, including several ready-to-use services, plus build your own custom services, ServiceManager class handles initiation, respecting dependencies, Access services from other services through constructor dependency injection or from React components through prop injection or hooks.

This demo is taken from the Viva Connections and SharePoint Framework community call 10th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
Daniel Turley (Avanade)

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
13 minutes

services

sharepoint

provisioner

apps

functionality

sdk

interface

manages

startup

runtime

27 Jul 2023

📺 In this 13 minute developer-focused demo, Dan explains how view formatting and data collection can be hard for end users and walks us through a Web Part he built to ease that workload. He shows how conditional logic may apply within it. After that, he walks us through his code and how to utilize react hooks and more. Closes with an outlook on future iterations.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on July 27, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Dan Toft (Evobis) | @tanddant

📖 Supporting materials
• Sample - JSON form builder: https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/pnp-sp-dev-spfx-web-parts-react-json-form/

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
14 minutes

microsoft

presentation

365

project

submitting

provider

user

sharepoint

debugging

micro

27 Jul 2023

📺 In this 10 minute developer-focused video, Daniel shows the schema provisioning feature of the SPFx Solution Accelerator. He starts with a quick overview on the accelerator, followed by explaining that the idea of the Solution Accelerator is to first define a schema and then provision that. He then walks us through how to define a field, a view, a list with several options and more.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on July 27, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Daniel Turley (Avanade)

📖 Learn more
• SPFx Solution Accelerator sample: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
10 minutes

provisioner

provisioning

schema

sharepoint

apps

implement

interfaces

platform

administrator

advanced

18 Jul 2023

In this 17-minute Maker/Developer focused demo, Paolo Pialorsi shows an end-to-end Microsoft Teams personal app with web parts and widgets created with SharePoint Framework. Solution uses SPFx (v1.17). The Dashboard can be rendered in SharePoint Online, Teams, Microsoft 365 Portal, and Outlook.com. Secured Azure functions in back-end. Solution is deployed in tenant’s app catalog. Thoughts on architecture. Step through code and manifest to understand how solution was built. The addition of an ACE extension will be subject of a subsequent demo.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 6, 2023.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Documentation – PnP/PnPjs home | https://pnp.github.io/pnpjs/
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Article - How to use SPFx powered Microsoft Teams apps in Outlook and Office | https://pnp.github.io/blog/post/spfx-08-spfx-powered-teams-solutions-outlook-office/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
17 minutes

contoso

demo

dashboard

configure

presentation

package

collaboration

sharepoint

model

matters

13 Jul 2023

📺 In this 17 minute developer-focused demo Hugo Bernier walks us through the "My Dashboard" sample of Joao Mendes. Sample looks professional and complete which makes adoption of web parts easier. Utilizing Microsoft Graph Toolkit V3 RC, this SPFx app allows quick access to user agenda, To Do Tasks, Files and News and Relevant People related to user. Hugo also provides an overview on Microsoft Graph toolkit.

This demo is taken from the Viva Connections & SharePoint Framework community call - 13th of July 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Hugo Bernier (Microsoft) | @bernierh & Joao Mendes | @joaomendez

📖 Learn more
• Sample shown in video: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-dashboard
• Getting started with SharePoint Framework: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant
• Building for Microsoft teams: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview
• Use Microsoft Graph in your solution: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
• Publish SharePoint Framework applications to the Marketplace: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development: https://pnp.github.io/
• Fluent UI version 9 - Converged Fluent UI components: https://github.com/microsoft/fluentui/tree/master/packages/react-components

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
17 minutes

webpart

dashboard

browser

user

manage

profile

usability

pmpjs

joao

sharepoint

13 Jul 2023

Jethro Seghers delivers a 10-minute developer-focused demo targeting the student persona. Viva Connections for Education (student’s digital home dashboard with cards for resource access, student-teacher connections, and more), EDU specific code samples (tuition fees, library loans, book a space, internships, scholarships), Adoption Toolkit (Best practices for Viva Connections Adoption, Day in a life for a student using VCE, Communication templates and documentation) what’s next?

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 18, 2023.

Demo Presenter
• Jethro Seghers (Microsoft) | @jseghers

Supporting materials
• Zip file – Viva Connections for Education Adoption Guide | aka.ms/VCEAdoptionToolkit
• Documentation - Overview of Viva Connections for Education | aka.ms/VCE
• Repo - Viva Connection Adaptive Card Extensions (ACEs) sample repository | aka.ms/spfx-aces

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
10 minutes

viva

education

connections

visa

eva

internships

tuition

understand

different

accenture

13 Jul 2023

📺 In this 11 minute developer-focused demo Aimery walks the audience through how to create a web part report in a list or chart from SharePoint using Microsoft Graph API. It's objective is to easily identify the use of custom web parts. It utilizes the pages and webparts endpoints, the MSGraphClient and PnP Reusable React Controls. In the demo and code walkthrough, Aimery gives an overview on functionality like filter, child view, charts, and more. He also shows us the Microsoft 365 Developer Proxy, which is a tool that can mock API responses for testing purposes.

This demo is taken from the Viva Connections & SharePoint Framework community call - 13th of July 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Aimery Thomas (Avanade) | @aimery_thomas

📖 Learn more
• React sample shown in video: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-webpart-report

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
11 minutes

webpart

webpath

sharepoint

web

webcasts

view

application

pane

endpoint

parts

3 Jul 2023

In this 18-minute developer-focused demo, Daniel Turley facilitates an understanding of the “SPFx Solution Accelerator” framework by going deep into the Rhythm of the Business Calendar sample app to see patterns and practices for building enterprise-class apps on SharePoint. This accelerator, inspired by Domain Driven Design, has evolved since SPFx v1.0. Today’s focus is on “Entities” (including class, relationships, validation, categories and states) and the implementation of a rich entity domain model for your application.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 18, 2023.

Demo Presenter
• Daniel Turley (Avanade)

Supporting materials
• Sample - Rhythm of Business Calendar | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar
• Sample - SPFx Solution Accelerator Deep Dive | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar/documentation
• AppSource - Rhythm of Business Calendar | https://appsource.microsoft.com/product/office/WA200004833
• Documentation – Entities | https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-rhythm-of-business-calendar/documentation/entities.md

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
19 minutes

sharepoint

backend

sync

application

entity

maintain

model

associated

tracking

editor

29 Jun 2023

📺 In this 12 minute developer-focused demo, Samir Daoudi walks us through the steps necessary to track SharePoint usage with Google Analytics: Create the Google Analytics property to get the tracking ID, scaffold an #SPFx project, Overwrite the OnInit property to inject the Google Analytics script, bundle and package the SPKKG solution and upload it to App Catalogue to let it shine!

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on June 29, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Demo Presenter
• Samir Daoudi (LogiSam) | @daoudi_samir

📖 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• SharePoint Framework 1.18 preview release notes - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
12 minutes

sharepoint

analytics

users

spfx

project

google

dashboard

generator

microsoft

manager

29 Jun 2023

📺 Microsoft is releasing new template options for the Viva Connections cards with the SharePoint Framework 1.18 release. In this demo, Alex Terentiev is showcasing the different new options and shows how to take advantage of them within your solutions.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on June 29, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
• Alex Terentiev (Microsoft) | @alexaterentiev

📖 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• SharePoint Framework 1.18 preview release notes - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18
• Survey sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Prompt-Survey
• Start a chat sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Start-Chat
• People search sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-PeopleSearch
• Viva Connections sample cards - https://aka.ms/viva/samples

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
5 minutes

cards

card

view

helper

dashboard

input

information

new

showcase

capabilities

29 Jun 2023

📺 In this 11 minute developer focused demo, Daniel Turley shows us React components that are being used in the SPFx Solution Accelerator. He starts with a quick overview on the accelerator, followed by a walkthrough to several components like the Entity Panel Component, the Async Data Component, the User Picker Component, the Validation Component, the Localization Component, the Responsive Grid Component, and more.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on June 29, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Daniel Turley (Avanade)

📖 Learn more
• SPFx Solution Accelerator sample: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
11 minutes

interface

sharepoint

components

app

functionality

demo

react

executing

editing

support

28 Jun 2023

We are excited to introduce new Microsoft Viva Connection card layouts as part of the SharePoint Framework 1.18 release. At the time of this video, we are shipping the 1.18 preview version with new options which customers can partners can take advantage as they design their dashboard experiences and extensibility for Microsoft Viva.

This video is recorded for the first preview version of the SharePoint Framework 1.18 in June 2023. Depending on the customer and partner feedback, there might be changes on what exactly was/will be released around the suggested new layouts.

In this video, you will learn about
- New layout options available with the 1.18 release of SharePoint Framework
- How the layouts are presented in the desktop and in mobile experiences
- Example scenarios with sample code on the use cases
- How to use layouts in the code level

✨ Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

📃 Agenda
0:00 Introduction
3:29 Live demo on the new options in the Viva Connection dashboard
9:34 SharePoint Framework solution code for the showed scenarios
13:48 Next step and future investment areas in this side

📝 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• SharePoint Framework 1.18 preview release notes - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18
• Survey sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Prompt-Survey
• Start a chat sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Start-Chat
• People search sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-PeopleSearch
• Viva Connections sample cards - https://aka.ms/viva/samples

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

2 participants
16 minutes

functionality

layout

users

graphical

view

introduce

dashboards

application

access

extensions

27 Jun 2023

📺 In this 12-minute Maker/Developer focused demo, Paolo Pialorsi delivers the 3rd installment on this end-to-end retail solution scenario that you can build in Microsoft 365. In this particular demo, the focus is on the back-end .NET API relied upon by both the Teams personal app and a Viva Connections card. See in call in Postman and code in SPFx app for how to consume the API in a secure way by providing a token – easily configured.

This community call demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 27, 2023.

✨ Demo Presenter
• Paolo Pialorsi (PiaSys.com) | @PaoloPia

📖 Supporting materials
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Demo - Extend SPFx apps across Microsoft 365 - Contoso Retail scenario (2023-06-06) – Paolo Pialorsi (PiaSys) | @PaoloPia
• Demo (June 13) - Exposing Microsoft Teams apps in Microsoft Viva with SPFx cards – Paolo Pialorsi (PiaSys) | @PaoloPia

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

2 participants
13 minutes

sharepoint

backend

demo

presentation

microsoft

api

leveraging

connection

viva

configuring

15 Jun 2023

In this 13-minute Maker/Developer focused demo, Vesa Juvonen delivers an update on SharePoint Framework and Microsoft Viva - Viva home (desktop) experience and Viva Connections (mobile) experience. Cover off on segments - We’ve built a Teams app, what’s next? Quick operations using the ACE Quick View, Expanding from Teams to Teams+Viva, New partner opportunity – Viva apps in the Microsoft Store, and Future - ACEs, templates, card sizes, and UX capabilities.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 16, 2023.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Article - New experiences for Viva Connections are now rolling out | https://techcommunity.microsoft.com/t5/viva-connections-blog/new-experiences-for-viva-connections-are-now-rolling-out/ba-p/3729071
• AppSource – Microsoft Viva | aka.ms/viva/store

All Developers
• Documentation - Start using Viva Connections | aka.ms/Viva/Connections/GettingStarted
• Documentation - Start a Solution | aka.ms/Viva/Connections/Platform
• Documentation - Design Guidelines | aka.ms/Viva/Connections/DesignGuidelines

Teams Developers
• Documentation - Enable SSO for your Teams App | aka.ms/Viva/Connections/Teams/SSO
• Documentation - Enable deep linking | aka.ms/Viva/Connections/Teams/DeepLinks
• Documentation - Consider Message Extensions | aka.ms/Viva/Connections/Teams/MessagingExtensions
• Documentation - Consider Stage View | aka.ms/Viva/Connections/Teams/StageView

Jump Start Development
• Documentation - Training | aka.ms/Viva/Connections/Platform/Training
• Documentation - OSS Samples | aka.ms/Viva/Connections/Samples
• Documentation - Plug into Community | aka.ms/community/home

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
13 minutes

sharepoint

microsoft

v1

extensibility

applications

version

hosted

viva

evolving

framework

15 Jun 2023

In this 9-minute developer-focused demo, Daniel Turley (Avanade) invites you to see how an activity (form) created by one user is seen by other users, no page refresh needed. Content (field) updates by others are announced in your version of form by visual indicator dots courtesy of Live Update React Component. You have the option to choose best update of many for the field. Uses package called sp-list-subscription. Covers Live Updates implementation (entities and States) and React UI.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 15, 2023.

Demo Presenter
• Daniel Turley (Avanade)

Supporting materials
• Sample - Rhythm of Business Calendar | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar
• Sample - SPFx Solution Accelerator Deep Dive | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar/documentation
• AppSource - Rhythm of Business Calendar | https://appsource.microsoft.com/product/office/WA200004833
• Documentation – Get notified of changes to documents stored in a SharePoint Document Library | https://learn.microsoft.com/sharepoint/dev/spfx/subscribe-to-list-notifications

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
10 minutes

sharepoint

app

demo

showcase

users

live

account

calendar

support

updated

13 Jun 2023

In this 16-minute developer focused demo, Paolo Pialorsi reviews capabilities of cards and rendering devices. QuickView and CardView cards (ACEs) can be created with no-code (configurable), low-code (designable) or pro code (customizable). Step through ACE creation using yeoman generator, creating a CardView card with specific elements (images, text, buttons). Scaffold and explore the code. Discuss getting data from external sources, data binding, deep linking, and usage of secured Azure Functions in back-end. Add a button and register views.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 13, 2023.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Demo - Extend SPFx apps across Microsoft 365 - Contoso Retail scenario (2023-06-06) – Paolo Pialorsi (PiaSys) | @PaoloPia

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
17 minutes

dashboard

application

interface

demo

presentation

advanced

microsoft

sharepoint

configuring

viva

1 Jun 2023

In this 12-minute developer-focused demo, Reshmee Auckloo shares a sample web part that showcases an Instagram feed. Tips on upgrading original web part from SPFx v1.11 to v 1.16. Web part requires a user token. See SPFx code for generating token and rendering Instagram feed. Various methods discussed to bring in Instagram feed. Created an Independent Publisher Connecter (flow template) for a scheduled feed into SharePoint list. Uses the Instagram Basic Display API (graph.Instagram.com).

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 1, 2023.

Demo Presenter
• Reshmee Auckloo (Pension Protection Fund) | @ ReshmeeAuckloo

Supporting materials
• Sample - Instagram Feed | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-instagram
• Article - Instagram Feed in SPFx Web Part – Buse Kara | https://medium.com/arfitect/instagram-feed-in-spfx-web-part-61f76fe1ded4
• Article - INDEPENDENT PUBLISHER CONNECTOR STEP BY STEP - Tomasz Poszytek | https://poszytek.eu/en/microsoft-en/office-365-en/powerautomate-en/independent-publisher-connector-step-by-step/
• IP Connector Repo - Instagram Basic Display | https://github.com/microsoft/PowerPlatformConnectors/tree/dev/independent-publisher-connectors/InstagramBasicDisplay
• API - Instagram Basic Display API | https://developers.facebook.com/docs/instagram-basic-display-api/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
12 minutes

spfx

svfx

feature

software

functionality

refactoring

facebook

support

scaffolding

webpart

1 Jun 2023

In this 7-minute developer-focused demo, Valeras Narbutas shows in his simple sample how to implement the richly capable React SPFx IFramePanel control in a SharePoint Framework web part. Observe very little coding required. Various out-of-box capabilities of the control shown in web part. Also conveyed in this sample was how the presenter happened to create the sample. He identified a “Good First Issue” in the SPFx issues list. Learned about capability, delivered solution + demo!

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 1, 2023.

Demo Presenter
• Valeras Narbutas (Macaw) | @ValerasNarbutas

Supporting materials
• Sample – IFramePanel Control in SPFx Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-spfx-control-iframepanel
• Sample - IFramePanel sample | https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/react-spfx-control-iframepanel/
• Issue with web part or sample - SPFx Issues list | https://github.com/pnp/sp-dev-fx-webparts/issues

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
6 minutes

implementation

software

sharepoint

presentation

micro

complicated

controls

spfx

macomb

pmp

1 Jun 2023

In this 12-minute developer-focused demo, Siddharth Vaghasia shares the output of an explorational Dev experience using OpenAI, Prompt Engineering, ChatGPT, and calling external APIs. ACE with a PrimaryText card view and a quick view using ChatGPT OpenAI API. Card provides user with informational/motivational quotes, tips etc. Configurable options include API key, select prompt/category, max token, card title and description. Uses session storage to limit the number of requests per user. Deliberate UI and Code walk through (Code Tour).

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 1, 2023.

Demo Presenter
• Siddharth Vaghasia | @siddh_me

Supporting materials
• Documentation – OpenAI Rate limits overview | https://platform.openai.com/docs/guides/rate-limits/overview
• Sample - Daily Insights with ChatGPT | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-ChatGPTDailyInsights
• Documentation - CodeTour | https://code.visualstudio.com/learn/educators/codetour

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
12 minutes

insights

ai

api

adaptive

gpt

card

provider

programming

sharepoint

pnp

31 May 2023

Viva Connection is your mobile friendly portal for your employees to stay connected with your company. Viva Connections is part of the Microsoft Viva employee experiences platform, which provides you tools and features for efficient employee engagement and for increasing productivity of your employees.

Viva Connections dashboard can be extending by using SharePoint Framework (SPFx) and you can acquire these solutions directly from the partner ecosystem or by using the Microsoft AppSource/Marketplace directly within your tenant.

In this videos we cover the extensibility options of Viva Connections, talk about the value proposition of the dashboard and walkthrough the process of acquiring Viva apps to your tenant from the Microsoft AppSource.

You can see all Microsoft Viva solutions in Microsoft AppSource (store) using following link - https://aka.ms/viva/store

In this video, you will learn about
- What is Viva Connections and how it's exposed in the Microsoft Teams
- How you can personalize and customize Viva Connections dashboard
- How you can acquire new ISV partner cards for you Viva Connections deployment directly from the Microsoft AppSource

✨ Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:45 Introduction on the Viva Connections experience
2:56 How to edit and customize the Viva Connection dashboard
5:14 Suggested partner cards in the Viva Connection card picker
7:22 Viva solutions in the Microsoft AppSource
9:12 How apps are acquired from the store
10:43 Recap on covered topics

📝 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Set up and launch Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-setup-guide
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/
• Publish SharePoint Framework applications to the marketplace - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
11 minutes

viva

application

apps

microsoft

vivo

navigation

configurable

connection

administrator

foreign

30 May 2023

85% of EDU app interaction happens via mobile phones and Viva Connections is mobile device optimized. In this 14-minute developer focused demo, Jethro Seghers is delighted to share that now all EDU Viva cards (assignments, courses, library loans, tuition loans, internships, etc.) are open source, GA to all EDU customers. Cards simplify resource access connect students and immediately deployable. See the latest cards, look at the samples, build actionable ACE cards for EDU. Future direction suggested. Please let us know.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 30, 2023.

Demo Presenter
• Jethro Seghers (Microsoft) | @jseghers

Supporting materials
• Article – Microsoft Viva Connections for Education – Now Available to all Customers | https://techcommunity.microsoft.com/t5/education-blog/microsoft-viva-connections-for-education-now-available-to-all/ba-p/3832809
• Documentation - Overview of Viva Connections for Education | https://learn.microsoft.com/viva/connections/overview-viva-connections-education
• Web page – Microsoft Viva Learning | https://www.microsoft.com/microsoft-viva/learning
• Previous demo – Creating custom SPFx components for Microsoft Viva Connections for Education – Jethro Seghers (Microsoft) | @jseghers (delivered 18th May)
• Samples - EDU ACE Code samples | https://adoption.microsoft.com/sample-solution-gallery/jesegher/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
13 minutes

connections

fiva

viva

understanding

education

confused

relevant

assignment

internships

new

30 May 2023

In this 20-minute Maker/Developer focused demo, Vesa Juvonen delivers an elemental review of core SharePoint capabilities to showcase how the platform retains its backward compatibility as the UX evolves. Core SharePoint elements are cards, web parts, extensions, app pages and more. GA extension options include Application customizer, Command set, Field customizer, Form Customizer and Search Query Modifier. Glimpse the new UX version of SharePoint Online announced earlier this month at Microsoft 365 Conference.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 30, 2023.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Article - SharePoint in the AI Era: Introducing Copilot in SharePoint & 10 more innovations for creators | https://techcommunity.microsoft.com/t5/microsoft-sharepoint-blog/sharepoint-in-the-ai-era-introducing-copilot-in-sharepoint-amp/ba-p/3806069

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
21 minutes

sharepoint

microsoft

manages

interface

frameworks

domain

backend

extensibility

presentation

modernizing

19 May 2023

In this 16-minute developer-focused demo, Michaël Maillot points out there is no SharePoint Admin REST API documentation as the APIs are not intended for external use. The APIs do provide a means to address admin actions without using external tools, requires no back-end, and uses current user context. The presenter’s AdminSpoWebPart app is used to manage sites in tenant specifically - Site capabilities, CDN, Themes, and External Users. Caution: Use undocumented APIs at your own risk.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 23, 2023.

Demo Presenter
• Michaël Maillot (onepoint) | @michael_maillot

Supporting materials
• Resource - SharePoint REST API Metadata Explorer | https://s-kainet.github.io/sp-rest-explorer
• Library - PnP/PnPjs sp-admin | https://pnp.github.io/pnpjs/sp-admin
• Repo – michaelmaillot / spfx-form-boilerplate | https://github.com/michaelmaillot/spfx-form-boilerplate

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
16 minutes

sharepoint

permissions

api

access

governance

client

peek

rest

undocumented

microsoft

18 May 2023

In this 12-minute developer-focused demo, Eric Overfield shares the latest technology demonstrator solution released 2 months ago. The kit consolidates SharePoint dev and provisioning into one piece. Full bundle of capabilities includes webparts, extensions, library, PnP and customizable SharePoint provisioning templates for sites, pages, content + documentation. Uses SPFx v1.16.1, Fluent UI, PnPjs v3.11. Normalized coding approaches. Integrations with related products. Stand up an example site in less than 10 minutes. All open-source.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 18, 2023.

Demo Presenter
• Eric Overfield (PixelMill) | @EricOverfield

Supporting materials
• Repo - SharePoint Starter Kit v3 | https://github.com/pnp/sp-starter-kit
• Repo - SharePoint Starter Kit v3 | https://github.com/pnp/sp-starter-kit/tree/v3

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
12 minutes

sharepoint

v3

version

tweak

provisioning

v1

upgradeable

proprietary

manageable

ppjs

9 May 2023

Solutions created for Teams are also available automatically in Outlook and Microsoft 365 app. In this 18-minute Developer focused demo, Vesa Juvonen relates how SPFx uses Teams SDK v2.9.1 by default and a custom or auto generated manifest to deliver this extensibility. See simple steps to onboard a SharePoint web part into Microsoft Teams. The Teams SDK is natively available in context and Teams Toolkit supports SharePoint Framework. Also, improved debugging for SPFx provided by Teams Toolkit v5.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 9, 2023.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Documentation - Overview of the SharePoint Framework | https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview
• Documentation – Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals
• Marketplace – Microsoft Teams Toolkit for Visual Studio Code | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
19 minutes

sharepoint

toolkit

microsoft

accessible

v1

applications

host

deployments

sdks

developers

4 May 2023

In this 19-minute developer-focused demo, Siddharth Vaghasia and Kunj Sangani show a modified out-of-box form customizer that will get you up and running in no time. The presenter essentially walks viewers through his form customizer article, UI and code while delivering tips for fine tuning and debugging along with a historical reference. One time saver is the ability to toggle between form customizer, list and Item on form. Works only if running SPFx v1.15 or greater.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 4, 2023.

Demo Presenters
• Siddharth Vaghasia (BinaryRoots) | @siddh_me
• Kunj Sangani | @sanganikunj

Supporting materials
• Sample - Teams Tab Conversation View | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-sp-dev-spfx-web-parts-react-teams-conversationview/
• Documentation - Build Microsoft Teams tab using SharePoint Framework – Tutorial | https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab
• Documentation - Build your first app with SPFx | https://learn.microsoft.com/microsoftteams/platform/sbs-gs-spfx

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
19 minutes

collaborating

project

sharing

conversation

sharepoint

client

context

teamstep

webpart

spfx

4 May 2023

In this 11-minute developer-focused demo, Dan Toft shares a way to expose content search almost natively in mobile. In this ACE see implementing the Search API client and exposing the setQuery method, creating an adaptive card with input and search button, creating an adaptive card to present the results (template by João Mendes), and adding navigation events. You can use SharePoint Search API or Graph Search API, use the quickViewNavigator.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 4, 2023.

Demo Presenter
• Dan Toft (Evobis ApS) | @tanddant

Supporting materials
• Sample – Quick Links | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links
• Blog – Dan Toft | https://blog.dan-toft.dk/
• Documentation - Office URI Schemes | https://learn.microsoft.com/office/client-developer/office-uri-schemes

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
11 minutes

webpart

users

link

sharepoint

microsoft

site

ui

drag

pane

github

3 May 2023

In this 14-minute developer-focused demo, Daniel Turley first grounds us on what is the open-source SPFx Solution Accelerator and its features, then he steps us though his Rhythm of the Business (RoB) Calendar app sample built with the accelerator to highlight the features, functions and code. Features include: Guidelines, services framework, dynamic provisioning, react components, tooling and Live Update. The SPFx web part app helps users to manage a team’s events and can be added to SharePoint site or as a Teams tab.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 6, 2023.

Demo Presenter
• Daniel Turley (Avanade)

Supporting materials
• Sample - Rhythm of Business Calendar | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar
• Sample Documentation - SPFx Solution Accelerator Deep Dive | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar/documentation
• AppSource - Rhythm of Business Calendar | https://appsource.microsoft.com/product/office/WA200004833

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
14 minutes

workflow

application

sharepoint

provisioner

projects

manage

services

platform

model

spfx

24 Apr 2023

In this 10-minute developer-focused demo, Yves Habersaat delivers an introduction to the Graph Presence API, API methods, presence sessions, presence sessions with SPFx, a setPresence method example, and suggestion to use Graph Explorer to experiment with API. This ACE demonstrates how to use the Presence Graph API endpoints (beta) to set and retrieve a presence status message for a user. Set/update a user’s presence – their availability and a message to viewers. Sample contains wide range of capabilities.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 23, 2023.

Demo Presenter
• Yves Habersaat (Sword Group) | @yhabersaat

Supporting materials
• Sample - BasicCard-StatusMessage | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-StatusMessage
• Tool – Graph Explorer | aka.ms/ge

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
10 minutes

session

presence

client

api

interface

users

microsoft

v1

query

foreign

20 Apr 2023

In this 9-minute developer-focused demo, Harminder Singh shares a SPFx web part that uses the Graph API to display the health status for all Microsoft 365 services as seen only by Admins in Admin Center, presently. The web part delivers a similar appearance and drill down functionality as in Admin center. Web part broken into multiple sub-components with separate styling for code manageability/reuse. Many of the components are stateless.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 20, 2023.

Demo Presenter
• Harminder Singh (Nagarro) | @Harminder_Sethi

Supporting materials
• Sample - Service Health for Microsoft 365 | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-services-health

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
10 minutes

microsoft

manage

admin

api

advisory

helper

ui

services

365

nagaro

20 Apr 2023

In this 12-minute developer-focused demo, Sergej Schwabauer’s Interactive Map web part delivers the ability to add custom markers, map layers and has a host of configuration options. “Bing Maps” has few configuration options comparatively speaking. Review creator’s idea and highlights, technology/packages used, demo, and resources. See property pane customization options (add marker, category, update legend) and general settings (define layers, plug-ins, categories). All markers are stored in web part. Sample available today. Uses many PnP Controls, looks like out of box SharePoint web part.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 23, 2023.

Demo Presenter
• Sergej Schwabauer (Aurum) | @spfxappdev

Supporting materials
• Sample - SharePoint Interactive Map Webpart | https://github.com/SPFxAppDev/sp-map-webpart
• Article - My interactive maps app for Microsoft Teams/SharePoint | https://spfx-app.dev/my-interactive-maps-app-for-microsoft-teamssharepoint

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
13 minutes

map

webpart

sharepoint

webpack

configure

continent

interactive

package

microsoft

world

19 Apr 2023

In this 16-minute developer-focused demo, Davide Mauri and Paolo Pialorsi integrate a ToDo list into an existing application without writing any code with an open-source tool Microsoft just released called Data API Builder for Azure Database. For a new/existing database, specify a table, and let tool create a REST API or GraphQL endpoint that’s then consumed by your application – an ACE in this case! Step through ACE code for managing security and tasks.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 23, 2023.

Demo Presenters
• Davide Mauri (Microsoft) | @mauridb
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Tool - Data API builder for Azure Databases | https://mcr.microsoft.com/product/azure-databases/data-api-builder/about
• Repo - data-api-builder | aka.ms/dab
• Demo - Data API builder and Microsoft 365 | https://github.com/yorek/dab-microsoft365-demo
• Builder - ace-dab-spfx (SPFx consuming DAB Demo) | https://github.com/pnp/sp-dev-fx-aces/tree/main/scenarios/ace-data-api-builder/spfx

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
16 minutes

datapia

database

demo

microsoft

sharepointing

azure

apis

hosted

interface

execute

6 Apr 2023

In this 16-minute developer-focused demo, Markus Möller shows how with this Microsoft 365 SPFx app, you can generate template-based Offer documents with custom meta data from within Teams, Outlook, Office, and SharePoint. The “Offer Creation” app shows up in the Add Apps menu within M365 products because it was installed as a personal app in Microsoft Teams. Templates created from M365 apps are stored in the same “Offerings” document library. Review key code elements and configuration.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 6, 2023.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article – A SharePoint document generator as Microsoft 365 app II (SPFx) | https://mmsharepoint.wordpress.com/2022/12/28/a-sharepoint-document-generator-as-microsoft-365-app-ii-spfx/
• Article – A user configured Teams personal app with SPFx web part | https://mmsharepoint.wordpress.com/2023/01/02/a-user-configured-teams-personal-app-with-spfx-web-part/
• Sample - Offer Creation | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-office-offer-creation
• Documentation - Extend Outlook and Office with the SharePoint Framework | https://learn.microsoft.com/sharepoint/dev/spfx/office/overview
• Demo - Extend Microsoft Teams apps across Microsoft 365 (Outlook and Office) - Markus Möller (Avanade) | @Moeller2_0

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
16 minutes

sharepoint

toolkit

microsoft

office

document

application

generate

foreign

provisioning

host

28 Mar 2023

In this 15-minute developer focused demo, Luca Bandinelli and Alex Terentiev deliver a directional update on SPFx and extensibility platform for Microsoft 365. SPFx v1.17 capabilities reviewed include: Use TeamsJS SDK v2.9.1, OS variable now in serve.json configuration, web part TopActions, Sync to Teams, Action handler for ACE, focus parameters in ACE quick view, and Adaptive Cards v1.5 schema support. Beyond v1.17 capabilities also described.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 28, 2023.

Demo Presenters
• Luca Bandinelli (Microsoft)
• Alex Terentiev (Microsoft) | @alexaterentiev

Supporting materials
• Article – Announcing SharePoint Framework 1.17 release candidate - Vesa Juvonen (Microsoft) | @vesajuvonen

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
15 minutes

sharepoint

connections

framework

access

virtual

microsoft

host

viva

applications

teamstab

15 Mar 2023

How to use the Viva Connections Toolkit extension to debug your SharePoint Framework solutions directly in the Visual Studio Code.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=OmFKAw0g61w&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=6
⬅️ Previous video on this series - https://www.youtube.com/watch?v=jXQFgGlId00&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=4

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Getting started on using debugging features in the Viva Connections Toolkit
- Review launch.json configuration for debugging
- How debugging works in the Visual Studio Code
- Adding breakpoints and debugging the code

✨ Demo Presenter
• Hugo Bernier (Microsoft)

📃 Agenda
0:00 Introduction
0:19 Debugging your code in Viva Connections Toolkit
1:30 Review launch.json configuration
2:20 Starting debugging (F5)
3:40 Adding breakpoint to your code

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
8 minutes

debugging

debug

execute

configure

console

launch

browser

toolkit

user

connections

15 Mar 2023

In this video we focus on showing how you will package and deploy your Viva Connections solutions to production tenant. We use the Viva Connections Toolkit to simplify the packaging and then perform the manual steps to deploy our solution to the tenant app catalog to be used in the tenant specific Viva Connections deployment.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=UlB3c6-8g_A&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=8
⬅️ Previous video on this series - https://www.youtube.com/watch?v=OmFKAw0g61w&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=6

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Package and deploy your existing Viva Connection solutions to production
- Different settings and configuration options
- Using solution in production mode without running localhost

✨ Demo Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:25 Configuration options for packaging
2:23 Packaging your solution for production usage
4:12 What does solution packages contain
5:15 Deploying solution to production tenant
6:02 Moving to admin center and app catalog
6:44 Deploying solution to the tenant
8:03 Using deployed solution in the Viva Connections dashboard

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
9 minutes

outsource

deploying

package

automation

production

enables

transcompiled

executed

simplicity

javascript

15 Mar 2023

In this video we focus on the introduction around the Viva Connections Toolkit VS Code extensions which is available for developers to improve their productivity when creating new extensibility for Viva Home and Viva Connections.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=Fs9r4dvSxU4&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=2

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Introduction
- Why SharePoint Framework (SPFx) is the easiest way to build extensibility for Microsoft 365
- Benefits on using SPFx for Microsoft 365
- Extensibility options in Microsoft Viva Connections
- Why Viva Connections Toolkit exists?
- Features and capabilities in the Viva Connections Toolkit
- What if you are already familiar with the SPFx?
- Additional resources

✨ Demo Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:52 SharePoint Framework as the extensibility model for Viva Connections
04:18 SharePoint Framework experiences in Microsoft 365
05:37 Microsoft Viva Extensibility options for ACEs
07:22 Why Viva Connections Toolkit?
08:47 What's in the Viva Connections Toolkit?
10:40 Viva Connections Toolkit for existing SPFx developers
11:30 Capabilities and features in Viva Toolkit
12:33 How to get started
13:29 Outro

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
14 minutes

sharepoint

adapter

applications

connection

isvs

viva

vmware

setup

framework

dependencies

9 Mar 2023

Learn how to easily incorporate this search capability in your Microsoft 365 environment during this 16-minute developer-focused demo delivered by Nico De Cleyre. Review prerequisites - get OpenAI API key, install the web part, add web part to a site and add your API key to Properties. Code deep dive – install OpenAI package, configure chatGPT and API response parameters. Review 4 Open AI language models, options for concealing your API key and token usage optimization.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 9, 2023.

Demo Presenter
• Nico De Cleyre (Ordina) | @NicoDeCleyre

Supporting materials
• Key – platform.openai.com/account/api-keys
• Sample - Chat GPT inside SPFx | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chat-gpt
• Article - Integrate ChatGPT into SPFx solutions | https://nicodecleyre.com/2023/02/08/integrate-chatgpt-into-spfx-solutions/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

3 participants
16 minutes

openai

openia

chatibility

access

ai

api

sharepoint

key

shotgpt

foreign

9 Mar 2023

In this 11-minute developer-focused demo, Luis Mañez delivers a clear overview of DALL-E capabilities and billing model. Access Open AI API of DALL-E 2, create an account, generate an API key. Next create an image first by calling image API from Postman, then via the SPFx web part. Save image to document library. Step through the web part code – uses SPFx to call API, PnPjs to save image to library, base64 encoding.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 9, 2023.

Demo Presenter
• Luis Mañez (ClearPeople) | @luismanez

Supporting materials
• Sample - Image generation using DALL-E API | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dall-e-image-generation

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
11 minutes

ai

configure

images

ui

openai

rendering

modeling

spfx

package

generated

23 Feb 2023

In this 9-minute developer-focused demo, Matteo Serpi delivers a web part that enables SharePoint site users to provide feedback on various sections of site pages. The web part renders a button in the right sidebar that calls up a general form containing a text field, rating stars, and button to send feedback to back-end. The form can be appended to any web part(s) on page. Uses PnPjs findControl, and Feedback Sidebar function - buildFeedbackConfigFromPage.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 23, 2023.

Demo Presenter
• Matteo Serpi (Avanade)

Supporting materials
• Sample - Feedback Sidebar | https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/pnp-sp-dev-spfx-web-parts-react-feedback-sidebar/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
9 minutes

webpart

view

pmpjs

feedbacks

users

sharepoint

component

backend

demo

sidebar

23 Feb 2023

In this 10-minute developer-focused demo, Marcin Wojciechowski shares the what, why, and how for using React queries. Implement ContextProvider, pass http client to context provider, wrap root component with ContextProvider, implement hook returning useQuery method, and consume your hook in any child component of your context. Tips: use mgwdev-m365-helpers for auto-batching, use pnp.js context in your hook, pass ootb spHttpClient or msGraphClient to ContextProvider, common query reuse, and Use useMutation for posting data!

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 23, 2023.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Article - How to use React hooks with the SharePoint Framework (SPFx) | https://www.voitanos.io/blog/how-to-use-react-hooks-with-sharepoint-framework-spfx-projects/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

1 participant
10 minutes

api

react

hooks

functionality

component

dependencies

backend

abstracted

binding

caching

10 Feb 2023

In this 7-minute developer-focused demo, Markus Möller’s solution enables users to perform actions on selected list items. Add a context menu to the list item like it’s available in the default modern experience of lists and like the “edit control block” in the classic experience. Does not physically insert a column inside the SharePoint list view. Uses the ECB (Edit Control Block) control custom render option. Review core code and solution alternatives.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 26, 2023.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article - Extend PnP SharePoint Framework React ListView Control with a context menu | https://mmsharepoint.wordpress.com/2018/03/11/extend-pnp-sharepoint-framework-react-listview-control-with-a-context-menu/
• Sample - Employee ListView Contextual Menu | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-listview-context-ecb
• Documentation - ListView: Add a contextual menu | https://pnp.github.io/sp-dev-fx-controls-react/controls/ListView.ContextualMenu/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

2 participants
7 minutes

sharepoint

view

customizer

controls

pmp

render

implement

demo

row

hands

9 Feb 2023

In this 12-minute developer-focused demo, Marcin Wojciechowski shares a method to expose content search almost natively in mobile. In this ACE see implementing the Search API client and exposing the setQuery method, creating an adaptive card with input and search button, creating an adaptive card to present the results (template by João Mendes), and adding navigation events. You can use SharePoint Search API or Graph Search API, use the quickViewNavigator.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 9, 2023.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Sample - primary-text-card-search | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Search
• npm Package - MGWDEV M365 Helpers | https://www.npmjs.com/package/mgwdev-m365-helpers
• Code snippet - sp-browser-utils | https://github.com/mgwojciech/sp-browser-utils/blob/main/utils.js

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
12 minutes

adaptive

navigation

query

cards

quest

user

recommend

api

push

natively

9 Feb 2023

In this 18-minute developer-focused demo, Michaël Maillot delivers a modified out-of-box form customizer that will get you up and running in no time. The presenter walks viewers through his form customizer article, UI and code while delivering tips for fine tuning and debugging along with a historical reference. One time saver is the ability to toggle between form customizer, list and Item on form. Works only if running SPFx v1.15 or greater.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 9, 2023.

Demo Presenter
• Michaël Maillot (onepoint) | @michael_maillot

Supporting materials
• Documentation - Build your first Form Customizer extension | https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
• Article - [SPFx] Form Customizer Boilerplate | https://michaelmaillot.github.io/tips/20221223-spfx-form-boilerplate/
• Repo - spfx-form-boilerplate | https://github.com/michaelmaillot/spfx-form-boilerplate
• Controls - Dynamic Form | https://pnp.github.io/sp-dev-fx-controls-react/controls/DynamicForm/
• Demo - Episode #223 - Advanced SPFx Form Customizers with DynamicForm | Paolo Pialorsi (PiaSys.com) @paolopia | https://www.youtube.com/watch?v=fuVrosr-NgQ

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
18 minutes

customization

sharepoint

version

adjust

users

ago

deploying

wsp

backend

think

6 Feb 2023

In this 26-minute developer focused demo, Luca Bandinelli introduces viewers to the 36-member Team focused on the evolution of SPFx. Then he quickly reviews what’s available in SPFx v1.16 and deep dives into what may be shipped in v1.17, i.e., Adaptive Cards v1.5 schema support for Viva ACE Cards, bump to Teams manifest v1.13 and more, more. Hear about aspirations beyond v.1.17 like Bot driven ACEs, notifications in Viva Connections, move Cache APIs to GA and still more!

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 24, 2023.

Demo Presenter
• Luca Bandinelli (Microsoft) | @BandinelliLuca

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

2 participants
26 minutes

sharepoint

connections

vivacondaction

software

users

dashboard

v1

host

extensions

configuring

31 Jan 2023

In this 22-minute developer focused demo, the Microsoft presenters share the latest details for Viva Connections on desktop Viva Home, presently in targeted release. Broad overview on current Viva Connections experience – app in Teams with mobile and desktop experiences. Updated Connections desktop with new default home experience. Deep-dive into Viva Home – Desktop and Mobile. See branding, feeds, card templates. Easy for Admins to maintain and create content. Extensibility options and resources. Start with Dashboard and optionally add homesite.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 31, 2023.

Demo Presenters
• Tejas Mehta (Microsoft) | @tpmehta
• Anshuman Gaur (Microsoft) | @_AnshumanGaur
• Luca Bandinelli (Microsoft)

Supporting materials
• Article - More options coming soon for the Viva Connections desktop experience | https://techcommunity.microsoft.com/t5/microsoft-viva-blog/more-options-coming-soon-for-the-viva-connections-desktop/ba-p/3644419
• Sample - Adaptive Card Extension Design Gallery | aka.ms/viva/ace/design/gallery/sample
• Repo - ace-designtemplate-gallery | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-designtemplate-gallery
• Learn - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn
• Documentation - Customize and edit the Viva Connections home experience | https://learn.microsoft.com/viva/connections/edit-viva-home
• Article - See what you can do in the Viva Connections desktop experience | https://support.microsoft.com/office/see-what-you-can-do-in-the-viva-connections-desktop-experience-e1f53887-f3cc-4ec4-bdbd-2e2f673089b6
• Documentation - Overview of Viva Connections | https://learn.microsoft.com/viva/connections/viva-connections-overview
• Documentation - Choose the default landing experience for Viva Connections desktop | https://learn.microsoft.com/viva/connections/edit-viva-home#choose-the-default-landing-experience-for-viva-connections-desktop

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

4 participants
22 minutes

viva

microsoft

connections

admin

users

introduction

standpoint

exciting

advantages

journey

29 Jan 2023

In this 10-minute developer focused demo, Waldek Mastykarz delivers a solution for simulating your app’s resilience under heavy load using SharePoint Workbench, in your tenant of 1, and keeping you’re app code as is. For example: Test specifically for 429 errors. See configuring Proxy for scenario and then see how Proxy simulates/identifies 429s on a Microsoft Graph API. Proxy works for other APIs as well. Once issue is identified, remediate - add a sleep function, use PnPjs that handles 429s for you, etc.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 10, 2023.

Demo Presenter
📺 Waldek Mastykarz (Microsoft) | @waldekm

Supporting materials
• Tool - Microsoft Graph Developer Proxy v0.3.0 | aka.ms/graph/proxy/download
• Demo - Introduction to Microsoft Graph Developer Proxy - Sébastien Levert (Microsoft) @sebastienlevert

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

2 participants
10 minutes

sharepoint

api

graph

web

proxies

client

endpoint

microsoft

apps

errors

26 Jan 2023

When you need to quickly test a query, as an alternative to PowerShell, this simple web part allows the user to input a CAML (Collaborative Application Markup Language) Query. In this 10-minute developer-focused demo, Dan Toft selects a list and runs the query. Uses PnPjs behind scenes to map out item. Several custom CAML queries ship with sample – for example: to query things based on SharePoint Groups. Post Demo, there is a PnP CAML overview.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 26, 2023.

Demo Presenter
• Dan Toft (Evobis ApS) | @tanddant

Supporting materials
• Sample - CAML to Table | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-caml2table
• Documentation - Collaborative Application Markup Language (CAML) schemas | https://learn.microsoft.com/sharepoint/dev/schema/collaborative-application-markup-language-caml-schemas
• Controls - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Repo – CAMLjs | https://github.com/andrei-markeev/camljs
• chrome web store - CamlJS Console | https://chrome.google.com/webstore/detail/camljs-console/ohjcpmdjfihchfhkmimcbklhjdphoeac
• library - Camlex.NET.dll | https://www.nuget.org/packages/Camlex.NET.dll/
• PnP Repo - CAML-Designer | https://github.com/pnp/CAML-Designer

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

3 participants
10 minutes

sharepoint

tasks

query

camera

user

collaborative

provisioning

preview

endpoint

export

26 Jan 2023

In this 13-minute developer-focused demo, Nikolay Belykh delivers a SharePoint web part that replaces the classic Visio diagram AND Diagram Frame web parts (for embedding Visio drawings in your page) with equivalent and better functionality. The modern File Viewer web part does not offer the interactivity options previously available the classic web part. The open-source web part accesses the Visio Online API. Available from AppSource and tips on publishing in AppSource.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 26, 2023.

Demo Presenter
• Nikolay Belykh (unmanagedvisio)

Supporting materials
• Documentation - Visio JavaScript API overview | https://learn.microsoft.com/office/dev/add-ins/reference/overview/visio-javascript-reference-overview
• Controls - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Pipeline - nbelyh.VisioOnlineSpfxWebPart | https://dev.azure.com/unmanagedvisio/UV-GitHub-Public/_build?definitionId=18&_a=summary
• VS Marketplace - SPFx Localization | https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-spfx-localization
• Documentation - Publish SharePoint Framework applications to the marketplace | https://learn.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview
• Repo - Diagram Frame sharepoint Visio web part | https://github.com/nbelyh/VisioOnlineSpfxWebPart
• AppSource - Diagram Frame WebPart | https://appsource.microsoft.com/product/office/wa200002491
• Article - Diagram Frame sharepoint Visio web part | https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/
• Website - https://unmanagedvisio.com | https://unmanagedvisio.com

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

1 participant
13 minutes

sharepoint

visual

visplan

presentation

version

downloadable

navigation

microsoft

localization

embedding

24 Jan 2023

In this 20-minute developer focused demo, Vesa Juvonen recaps Viva Connections and Adaptive Card Extensions (ACEs). Andrew Connell steps through creation of an SPFx ACE with the Primary Text Card template that uses the geo location capabilities in Viva Connections. Scenario - campus shuttle service. The ACE is for shuttle diver with mobile device. Book a trip, indicate travel status – on route, pick up, drop off. All details stored in a SharePoint list. Push and Pop QuickView Card (activities) in stack. Exercise 3, Viva Connections learn module.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 24, 2023.

Demo Presenters
• Vesa Juvonen (Microsoft) | @vesajuvonen
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn
• Learn Exercise - Exercise - Create an SPFx ACE with geo-location capabilities | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/7-exercise-ace-geo-location-actions.
• Demo (#1 in this series) - Introduction to Microsoft Viva ACE development learn module - Getting started – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell
• Demo (#2 in this series) - Create an SPFx Image Card ACE displaying image carousel - ACE learning module – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

2 participants
20 minutes

v1

viva

module

interface

implement

navigators

access

toolkit

sharepoint

home

17 Jan 2023

In this 22-minute developer focused demo, Vesa Juvonen opens with basics on ACEs and underlaying SPFx and Adaptive Cards technologies for building experiences in Microsoft Viva. Then Andrew Connell delivers a session geared for people with SPFx, but no experience building Adaptive Card Extensions. See UI for card that displays dynamic images from an external service, namely NASA. Configure Property pane for the ACEImageViewer component, look at the code for this web part. References Exercise 2 - Create ACEs for Microsoft Viva Connections Learn module.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 17, 2023.

Demo Presenters
• Vesa Juvonen (Microsoft) | @vesajuvonen
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn
• Learn Basics - Basics of ACEs: card templates, CardViews, properties, and states | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/2-adaptive-card-extension-basics
• Learn Exercise - Exercise - Create an SPFx Image Card ACE displaying image carousel | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/5-exercise-ace-image-card
• Demo (#1 in this series) - Introduction to Microsoft Viva ACE development learn module - Getting started – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

2 participants
22 minutes

ace

applications

extensibility

viva

ac

card

sharepoint

access

office

replica

12 Jan 2023

In this 14-minute developer-focused demo, Alex Clark shares a brief overview of Viva Connections Dashboard and Cards along with the Adaptive Card samples repo. Add an Adaptive Card template to a Dashboard page. Populate template with JSON from Adaptive Card Designer. Learn about Card JSON (the design) and Data JSON file (static data). Not shown is building out more robust “custom” cards – full SPFx ACE extensions that connect various end points, LOB systems, etc. Develop basic cards in Adaptive Card Designer or in VS Code.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 12, 2023.

Demo Presenter
📺 Alex Clark (Microsoft) | @sharepointalex

Supporting materials
• Templates - Adaptive Card templates - design examples | https://github.com/pnp/AdaptiveCards-Templates
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Learn - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types
• Documentation - Adaptive Cards Template Language | https://learn.microsoft.com/adaptive-cards/templating/language
• Tool – Adaptive Cards Designer | https://www.adaptivecards.io/designer/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

2 participants
14 minutes

connections

sharepoint

viva

intranet

accessed

overview

repository

dashboards

microsoft

fever

12 Jan 2023

What is the hTWOo UI library (hTWOo – Core, – React, – Icons)? In this 19-minute developer-focused demo, permit Julie Turner to take you through the installation and creation of an SPFx solution using hTWOo assets. See setting up theme support, initializing icons, creating a class/function component, and importing hTOWo assets into an SPFx project. Extensibility is built in at the core. Uses Atomic Design to organize components. Components minimize bundle sizing. Teams theming for use in SPFx Teams solutions.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 12, 2023.

Demo Presenter
📺 Julie Turner (Sympraxis) | @jfj1997

Supporting materials
• Site - hTWOo Design Studio | https://lab.n8d.studio/htwoo/
• Repo - HTWOO UI framework | https://github.com/n8design/htwoo

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

1 participant
19 minutes

h2o

interface

themesport

webpart

component

props

repo

dependencies

root

submit

11 Jan 2023

In this video, you'll learn more about QuickViews, view navigators, and some common optimization techniques and scenarios you can use in your card views.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=kefrLAS2DRw&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=2
➡️ Next vide on this series - https://www.youtube.com/watch?v=-Eb4KIMtwt0&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=4

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/4-quickview-view-navigators
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

1 participant
7 minutes

cardview

cards

adaptivecard

card

quickview

ace

rendering

views

slide

generator

11 Jan 2023

This module introduces you to creating custom Adaptive Card Extensions (ACEs) with the SharePoint Framework (SPFx) that can be used in Viva Connections or in Viva Home.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

➡️ Next video on this series - https://www.youtube.com/watch?v=kefrLAS2DRw&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=2

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/2-adaptive-card-extension-basics
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

1 participant
11 minutes

customizers

customize

application

extensions

configurable

cards

accessible

viva

generator

sharepoint

11 Jan 2023

In this video, you'll create an Adaptive Card Extension (ACE) with the Primary Text Card template that uses the geo-location capabilities in Viva Connections.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=P4x2-xd3QbU&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=5

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/7-exercise-ace-geo-location-actions
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

1 participant
35 minutes

provisioning

configuring

exporting

shuttle

project

location

sharepoint

navigator

launch

campus

11 Jan 2023

In this video, you'll create an Adaptive Card Extension with the Image Card template that displays images taken by one of the cameras on the selected Mars Rover.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=plePKkwZU-c&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=3
➡️ Next vide on this series - https://www.youtube.com/watch?v=P4x2-xd3QbU&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=5

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/5-exercise-ace-image-card
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

1 participant
16 minutes

launching

creating

demo

provisioning

generator

nasa

downloading

sharepoint

api

npm

11 Jan 2023

In this video, you'll create an ACE with the Basic Card template that displays items in a SharePoint list and enables the user to add items to the list.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=plIXeRPR92Y&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
➡️ Next vide on this series - https://www.youtube.com/watch?v=plePKkwZU-c&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=3

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/3-exercise-ace-basic-card-rest
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

1 participant
30 minutes

sharepoint

generator

adapter

create

tools

configuring

project

adaptive

demo

card

10 Jan 2023

See the new learn module in general and do the 1st Exercise in this 20-minute developer focused demo, delivered by Vesa Juvonen and Andrew Connell. Create a SPFx Basic Card ACE showing SharePoint list data. This ACE reads and writes to a SharePoint List. In hands-on lab, open your Workbench and website and add ACE to page. Look at operation of Card View, Quick View and at the target SharePoint list. Step through the AdaptiveCardExtension.ts, CardView.ts and QuickView.ts files.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 10, 2023.

Demo Presenters
• Vesa Juvonen (Microsoft) | @vesajuvonen
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• Exercise - Exercise - Create SPFx Basic Card ACE showing SharePoint list data | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/3-exercise-ace-basic-card-rest
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

2 participants
20 minutes

adapter

applications

adaptive

accessible

ace

setup

sharepoint

akms

asus

exported

3 Jan 2023

In this 11-minute developer focused demo, Waldek Mastykarz’s shares his build once, use anywhere dashboard recipe. To your SPFx app, add 3 lines of code (3 calls to Microsoft Graph Toolkit) + 1 line for auth, then adjust scope to access APIs and add a manifest to the TeamsSPFxApp.zip file created with CLI to your package. Renders one dashboard built in SPFx that can be exposed in SharePoint, Teams, Outlook, Microsoft 365 app (Office.com) that displays data stored across Microsoft 365 in one place, where you work!

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 6, 2022.

Demo Presenter
• Waldek Mastykarz (Microsoft) | @waldekm

Supporting materials
• Repo - One Productivity Hub powered by SharePoint Framework | https://github.com/waldekmastykarz/spfx-productivity-dashboard
• Repo - spo app teamspackage download | https://pnp.github.io/cli-microsoft365/cmd/spo/app/app-teamspackage-download/
• Repo - waldekmastykarz/spfx-productivity-dashboard | https://issueantenna.com/repo/waldekmastykarz/spfx-productivity-dashboard
• Documentation - Build a “One Productivity Hub” solution using Microsoft Teams and Microsoft Graph Toolkit | https://github.com/OfficeDev/M365Bootcamp-TeamsOneProductivityHub
• Documentation – Providers (MGT) | https://learn.microsoft.com/graph/toolkit/overview?WT.mc_id=m365-80548-wmastyka#providers

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
11 minutes

dashboard

sharepoint

office

microsoft

tasks

sync

graph

toolkit

intranet

collaborate

29 Dec 2022

In this 16-minute developer-focused demo, Sergej Schwabauer delivers two solutions - Password Vault web part (encrypted password protected page and data) and SharePoint Quicklinks extension (dynamic quick links to site contents, site settings, etc.). For each – go from idea and design criteria to installation and configuration. Create and publish a password protected page. Open/close the vault (page) with password. Look at the code – focusing on PasswordValueService for web part and on a single file for extension. Available soon as SPFx samples.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 29, 2022.

Demo Presenter
• Sergej Schwabauer (AURUM GMBH)

Supporting materials

Password vault web part
• Repo – SPFx Password Vault Webpart | https://github.com/SPFxAppDev/sp-passwordvault-webpart
• Article - A simple password vault webpart for Microsoft SharePoint/Teams | bit.ly/3Ww67gC

Chrome Extension “SharePoint Quicklinks”
• Chrome web store - SharePoint Quicklinks | https://chrome.google.com/webstore/detail/sharepoint-quicklinks/ehmphjkdhndbdpfhhckemmhapfahlbhe
• Article - Browser extension for (dynamic) quick links for SharePoint Online | bit.ly/3Ww67gC
• Repo - sp-quicklinks-browser-extension | https://github.com/SPFxAppDev/sp-quicklinks-browser-extension

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
16 minutes

sharepoint

passwords

encrypted

secure

insecure

port

permissions

problem

spfx

presentation

19 Dec 2022

In this 11-minute developer-focused demo, Niklas Wilhelm steps through this SPFx web part built to help Admins visualize data in a SharePoint site using an Entity Relationship Diagram (ERD). PnPjs pulls all data from SharePoint and GoJS generates the ERD visualization. Install the web part as an app page web part. Loads all sites, lists, fields, relationships, then dumps data into GoJS, add alerts for threshold limits. Uses SPFx, PnPjs and GoJS. Practical use case – understand your site’s data model / list structure. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 17, 2022.

Demo Presenter
• Niklas Wilhelm (NetForce 365) | @NiklasWilhelm4

Supporting materials
• npm - gojs-react | https://www.npmjs.com/package/gojs-react
• Tools – GoJS - Build Diagrams for the Web in JavaScript and TypeScript | https://gojs.net/latest/index.html
• Sample - SP Site ER Diagram | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
11 minutes

hubsite

microsoft

sharepoint

visualization

entity

project

model

interfaces

germany

365

15 Dec 2022

In this 5-minute developer-focused demo, Kunj Sangani delivers an Adaptive card extension that displays prices of US stocks, forex and crypto in real time with the help of finnhub APIs. Simple change in property pane to see pricing in local currency. Code walkthrough. Uses finnhub APIs and WebSocket for fetching real-time data and Viva dashboard to target audience inside an organization. Samples available now and feedback greatly appreciated.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 15, 2022.

Demo Presenter
• Kunj Sangani (Cognizant) | @sanganikunj

Supporting materials
• Resource - Finnhub Stock API | https://finnhub.io/
• Sample - primary-text-card-stock-bitcoin-feed |https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-StockBitcoinFeed

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
5 minutes

cryptocurrency

bitcoin

ethereums

card

coinbase

forex

adaptive

stock

exchange

finhub

15 Dec 2022

In this 13-minute developer-focused demo, Luis Mañez shows how to use a Kiota generated client in an SPFx Teams webpart. Review what is Kiota, the OpenAPI Initiative (OAI), a Teamified SPFx web part, and architecture overviews on working with Graph and on Azure and Kiota client authentication in SPFx. Dive into the code to see how the SPFx TypeScript web part calls the API using Kiota and how Kioto can list off all dependencies for your project.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 15, 2022.

Demo Presenter
• Luis Mañez (ClearPeople) | @luismanez

Supporting materials
• Sample - Using Kiota to generate a client to your AzureAd API and use it from a SPFx webpart | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kiota-custom-api-client
• Documentation - Welcome to Kiota | https://microsoft.github.io/kiota/
• Repo - Project Kiota | https://github.com/microsoft/kiota
• Library – Project Kiota TypeScript | https://github.com/microsoft/kiota-typescript
• Article – Using Microsoft Kiota tool to generate Atlas API SDKs | https://www.clearpeople.com/blog/microsoft-kiota-tool-to-generate-atlas-api-sdks
• Article - Using a Kiota client for your API in a SharePoint framework solution | https://www.clearpeople.com/blog/howto-kiota-client-api-sharepoint-framework-solution

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
13 minutes

kyota

sdk

sdks

apis

foreign

java

japanese

tool

context

repositories

13 Dec 2022

In this 10-minute developer focused demo, Patrick Rodgers shares a technique for generating/adding dynamic SVGs (interactive images) to Adaptive Card Extensions in a way that fits into the Adaptive Card mind-set (small, dynamic, performant). Run through the code for adding a simple mathematically derived geometric graphic to a CardView and a more complex bar chart sample (image graphic bound to data) in a QuickView card. Follow this approach to create your own SVG generation functions. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 13, 2022.

Demo Presenter
• Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials
• Sample - ace-chart | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-chart
• Article - What Is an SVG File? SVG Image and Tags Explained | https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them
• Article - Everything You Need To Know About SVG | https://css-tricks.com/lodge/svg/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
10 minutes

cards

card

graphics

interactive

images

dynamically

sharepoint

adaptive

dashboard

svg

6 Dec 2022

In this 15-minute developer focused tour, Vesa Juvonen highlights synergies between Viva Toolkit & SharePoint Framework (SPFx) – community created pro-code developer tooling that simplifies development, validation, and publishing of custom Microsoft Viva experiences. Toolkit features include connection between Visual Studio Code and tenant, environment validation, installation of technical dependencies, solution update with CLI for Microsoft 365, start from scenario or sample, CodeTour, and it works on any SPFx project! Create a Viva Connections project from scratch, from a scenario or from an ACE sample. Alignment to Teams Toolkit. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 6, 2022.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Marketplace - Viva Connections Toolkit (Preview) | aka.ms/viva/code
• Repo - Viva Connections Toolkit for Visual Studio Code | https://github.com/pnp/vscode-viva
• Feedback – vscode-viva/issues | https://github.com/pnp/vscode-viva/issues

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
15 minutes

sharepoint

microsoft

setups

toolkit

application

viva

extensibility

version

benefits

docs

1 Dec 2022

In this 15-minute developer-focused demo, David Mehr opens with an overview on Microsoft search vs SharePoint search capabilities and on PnP Modern Search web parts. Then delivers his From Zero To Find (people) demo. Create a new SharePoint page, add and configure PnP Search web parts (Search Box, Search Filters, Search Results and Search Verticals), choose layout options (show your People Results with relevant information about the person), test queries using SharePoint Search Query Tool v2.10, Done! This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 1, 2022.

Demo Presenter
• David Mehr (IOZ) | @davemehr

Supporting materials
• Presentation - Introduction to Search #M365VM | https://www.slideshare.net/kkhipple/introduction-to-search-m365vm
• Documentation - Overview of search in SharePoint | https://learn.microsoft.com/sharepoint/overview-of-search
• Repo - PnP Modern Search Solution (v4.8.0) | https://github.com/microsoft-search/pnp-modern-search/
• Documentation - PnP Modern Search v4.0 | https://microsoft-search.github.io/pnp-modern-search/
• Documentation - Create a useful People Search | https://microsoft-search.github.io/pnp-modern-search/scenarios/Create-a-useful-People-Search/
• Tool - SharePoint Search Query Tool | https://github.com/pnp/PnP-Tools/tree/master/Solutions/SharePoint.Search.QueryTool

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
14 minutes

microsoft

users

query

search

profile

sharepoint

manage

site

project

m365

22 Nov 2022

In this 17-minute developer focused demo, we may appreciate the increased number of SPFx integrations in Teams Toolkit on Visual Studio Code. Vesa Juvonen focuses here on the ease of building a tab project and then adding an additional tab to the project. See how Teams Toolkit encapsulates the SPFx solution to its own sub-folder. All development, testing and debugging is done live in TypeScript and use F5 for hot reloads. Azure integrations, code samples, etc. are just around the corner. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 22, 2022.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Documentation - Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code
• Documentation - Install Teams Toolkit | https://learn.microsoft.com/microsoftteams/platform/toolkit/install-teams-toolkit?tabs=vscode&pivots=visual-studio-code

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
17 minutes

sharepoint

workflows

hosted

microsoft

proprietary

browser

framework

enables

foreign

apis

17 Nov 2022

In this 11-minute developer-focused demo, Siddharth Vaghasia delivers a tutorial on a React based utility web part for managing the SPFx form customizer for your SharePoint List and libraries. The web part allows the user to associate a form customizer to a list/library. The web part has a simple interface to associate/remove, can be used across site collections, ability to Select Site, List, Content Type, and ability to choose form type (view/edit/new). CodeTour for walk through. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 17, 2022.

Demo Presenter
• Siddharth Vaghasia (Tata Consulting) | @siddh_me

Supporting materials
• Sample - Add Form Customizer to List | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-formcustomizer-to-list
• Package - package for formcustomizer utility webpart | https://github.com/siddharth-vaghasia/public-docs/blob/master/react-add-formcustomizer-to-list.sppkg

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
11 minutes

customizer

configuration

configurable

sharepoint

interface

deploying

client

utility

powertratform

spfx

17 Nov 2022

In this 14-minute developer-focused demo, Martin Lingstuyl delivers a solution that copies views from one list/library to another using either his new web part or extension. Copy columns, sorting, group by, view formatting and filtering. Web part displayed on specific site/page for view management purposes. Extension is a dialog opened by ListView Command set extension on any list/library - tenant wide or site scoped. Code - see component structure and PnPjs copy functionality. Explanation of what’s currently not supported and why. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 20, 2022.

Demo Presenter
• Martin Lingstuyl (I4-YOU) | @martinlingstuyl

Supporting materials
• Sample – react-copy-views | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-copy-views
• Library – PnPjs - @pnp/sp/views | https://pnp.github.io/pnpjs/sp/views/
• Documentation – DOMParser | https://developer.mozilla.org/docs/Web/API/DOMParser
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
14 minutes

sharepoint

sharepoints

copying

copy

sharing

views

users

manage

pmpgs

spf

17 Nov 2022

In this 14-minute developer-focused demo, Nick Brown shows viewers the new Fluent UI version 9 controls and theme provider in a SharePoint Communication site and Teams site. The UI framework has native theming for Teams, SharePoint and Windows. What is Fluent and Fluent UI 9, how are Fluent UI components configured. Fluent UI 7 currently ships with SPFx. UI 9 – Windows 11 styled react based, merges 8 and Northstar (Teams) into 1 library. Controls and source-code are available to you now. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 17, 2022.

Demo Presenter
• Nick Brown (Jisc) | @techienickb

Supporting materials
• Sample - react-fluentui-9 | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9
• Components - Fluent UI React Components v9.7.0 | https://react.fluentui.dev/?path=/docs/concepts-introduction--page

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
14 minutes

ui9

ui7

uis

ui

fluent

version

microsoft

native

sharepoint

platform

3 Nov 2022

In this 21-minute developer-focused demo, Paolo Pialorsi steps through how capabilities in SPFx v1.15 make it easy (as in automate) for your customer to register, manage consent and deploy your SaaS app/ACE in their tenant. Step through configuration for managing a multi-tenant deployment including app registration in Azure AD, hosting multi-tenant aware back-end services on Azure, consent, permissions, etc. Understand architectural challenges and see an ACE on multiple tenants interact with the back-end multi-tenant API. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 3, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Sample - Contoso Orders ACE | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-ace-pnp-contoso-orders/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
21 minutes

sharepoint

setup

hosting

manage

software

implementation

require

registrations

tenancy

isv10

3 Nov 2022

In this 18-minute developer-focused demo, Julie Turner delivers an overview on files/code in a PnPjs v3.x sample. Items called out - changes between v2 and v3, dependencies, pnpjsConfig file (importing only selected bits of functionality libraries), chaining behaviors together, establishing global context for factory interfaces, caching, loadUser method (get information from Graph), rendering, creating a batched instance for grouped updates, discussion on approach to structure of production vs sample code. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 3, 2022.

Demo Presenter
• Julie Turner (Sympraxis Consulting) | @jfj1997

Supporting materials
• Library - Getting Started PnPjs Library | https://pnp.github.io/pnpjs/getting-started/
• Sample - SharePoint Framework sample using @pnp/js and ReactJS | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-sample
• Sample – @pnp/js and ReactJS Functional Components | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-hooks

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
18 minutes

pmp

pmpj

project

demo

version

package

v3

sharepoint

documentation

execute

25 Oct 2022

In this 9-minute developer focused demo, Microsoft presenters Alex Terentiev and Vesa Juvonen show how you can host Teams personal apps (developed with SPFx v1.16) in Outlook and in Microsoft 365 app (previously known as office.com). The same code in SharePoint, Teams, Viva, Viva Connections, Outlook and Microsoft 365 app. You will need to create a custom manifest.json file shown in demo. In the next SPFx v1.16 beta release, the typings are changing to teams-js-v2. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 25, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Article - Announcing SharePoint Framework 1.16 release candidate | https://devblogs.microsoft.com/microsoft365dev/updated-preview-of-the-sharepoint-framework-1-16/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
9 minutes

sharepoint

microsoft

proprietary

hosted

domain

applications

v2

access

framework

outlook

20 Oct 2022

In this 24-minute developer-focused demo, Paolo Pialorsi delivers an overview of On-Behalf-Of (OBO) flow, tokens, permissions and use in SharePoint Framework. OBO is great for when you need a background task running (in middleware that needs to consume another back-end service like Microsoft Graph) on-behalf-of a user that triggers the middleware from a SharePoint Framework app. 2 OBO scenarios shown - get my personal data via OBO and send Teams chat message via OBO. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 20, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Documentation - Microsoft identity platform and OAuth 2.0 On-Behalf-Of flow | https://learn.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow
• Sample - SPFx On-Behalf-Of flow | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-spfx-obo/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

3 participants
25 minutes

flow

middleware

backend

sharepoint

endpoint

authorization

api

delegated

leveraging

idea

6 Oct 2022

In this 15-minute developer-focused demo, Derek Cash-Peterson showcases 2 new Helpdesk related ACE samples - Help Ticket and Pending Helpdesk Tickets (for tracking tickets assigned to support person) to demonstrate how to leverage multiple quick card views, geo-location functionality, media upload functionality, and movement between cards. Walk through ACE code in Visual Studio Code and wrap with Q&A and supporting resources. On card, collect incident type, priority, location and images. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 6, 2022.

Demo Presenter
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials
• Samples - ace-designtemplate-gallery | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-designtemplate-gallery
• AppSource - Adaptive Card Extension Design Gallery | https://appsource.microsoft.com/product/office/wa200003929?tab=overview
• Repo - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
15 minutes

sharepoint

demo

showcase

app

dashboard

user

attachments

upload

card

help

6 Oct 2022

In this 22-minute developer-focused demo, Joel Rodrigues heartily recommends you use PnP controls for web parts and web part property panes. Step through where to find and how to install controls in your project. As easy as copy code from library, paste in web part, and tweak default control configuration as needed. Fork the Repo to get started. Controls shown PropertyFieldEnterpriseTermPicker, PropertyFieldInconPicker, PropertyFieldRoleDefinitionPicker, PropertyFieldCollectioonData, MyTeams and WebPartTitle. Test controls using the Controls Test web part. All controls well documented. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 6, 2022.

Demo Presenter
• Joel Rodrigues (Storm Technology) | @JoelFMRodrigues

Supporting materials
• Tools - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

3 participants
22 minutes

controls

configure

controller

remote

spx

configurations

prs

sharepoint

user

import

27 Sep 2022

In this 25-minute developer/designer focused demo, Vesa Juvonen starts with overview on how developers can more efficiently extend Microsoft 365 apps for SharePoint Online, Microsoft Teams, Microsoft Viva, and more (to be announced soon) with SharePoint Framework (SPFx). Alex Terentiev shows the latest steps for getting started with SPFx development from installing prerequisite tools to SPFx project creation, packaging, and simple deployment to production. See the same solution being added to SharePoint Online and to Teams. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 27, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
25 minutes

sharepoint

frameworks

workflow

hosted

microsoft

accessible

package

v1

globally

sdks

22 Sep 2022

In this 12-minute developer-focused demo, Alex Terentiev delivers an overview on available PnP React controls and Property pane controls you can leverage in your SPFx solutions. The assignment: Create a carousel web part that will display images stored in a document library. The web part should work on site across tenant. A complex endeavor if starting from ground zero. See how controls (WebPartTitle, TreeView and Carousel) are plugged into a web part delivering a native experience in short order. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 22, 2022.

Demo Presenter
• Alex Terentiev (Microsoft) | @alexaterentiev

Supporting materials
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Tools - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
12 minutes

controls

control

sharepoint

configured

functionality

interfaces

reusable

properties

hover

pmp

22 Sep 2022

In this 14-minute developer-focused demo, Nanddeep Nachan and Ravi Kulkarni deliver a thorough UX and code walkthrough on an Adaptive Card Extension (ACE) with a card view and multiple quick views to display the public holidays for user based on their detected or selected office location. Uses an ACE component type and ImageCard template in SharePoint Framework (SPFx) v1.15.0. Relies on a SharePoint list with simple schema (title, location, date, image) in back-end. See upcoming holidays in Quick view. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 22, 2022.

Demo Presenters
• Nanddeep Nachan | @NanddeepNachan
• Ravi Kulkarni (Microsoft) | @RaviKul16a87

Supporting material
• Sample – Public Holidays | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-PublicHolidays

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

3 participants
14 minutes

card

users

presents

holidays

public

dashboard

viva

views

sharepoint

pnpsp

22 Sep 2022

In this 14-minute developer/designer focused demo, Vesa Juvonen opens with recently released SPFx v1.16 features - Top Actions support for web parts (demoed today), Teams JavaScript SDK v2 native support in SPFx solutions, and Asynchronous support for Viva Connections ACEs rendering. Alex Terentiev shows Top Actions support that allows developers to add custom buttons or custom dropdowns to the web part’s command bar. Like property pane controls but based on cleaner UI approach. Also review features in development and tentative release dates. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 6, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Web page - Microsoft Viva Learning | aka.ms/VivaLearning
• Documentation - SharePoint Framework v1.16 release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.16
• Article - Public preview of SharePoint Framework 1.16 – First release of upcoming features | https://devblogs.microsoft.com/microsoft365dev/public-preview-of-sharepoint-framework-1-16-first-release-of-upcoming-features/
• Repo - SharePoint Framework v1.16 release notes | https://github.com/SharePoint/sp-dev-docs/blob/main/docs/spfx/release-1.16.md
• Feedback – sp-dev-docs issues list | https://github.com/SharePoint/sp-dev-docs/wiki/Issue-List

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
14 minutes

sharepoint

share

version

demoing

connect

microsoft

vmware

dashboard

alex

hosted

8 Sep 2022

In this 15-minute developer-focused demo, Hugo Bernier shows how a pre-built ACS composite chat component is used in a SPFx web part sample called RoomChat – created by João Mendes. After an overview of ACS, create a Communications Service. Visit the ACS UI Library (sandbox) – and pick up a chat component. Step through core code elements of the web part. Use property panes or SharePoint Online tenant properties for storing information used by your web part. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 8, 2022.

Demo Presenter
• Hugo Bernier (Microsoft) | @bernierh

Supporting materials
• Documentation - What is Azure Communication Services? | https://docs.microsoft.com/azure/communication-services/overview
• Tools – ACS UI Library | aka.ms/acsstroybook
• Sample - Room Chat - João Mendes | @joaojmendes | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-roomchat
• Documentation - SharePoint Online tenant properties | https://docs.microsoft.com/sharepoint/dev/spfx/tenant-properties?tabs=sprest
• ACS Quick Start - Get started with the calling hero sample | https://docs.microsoft.com/azure/communication-services/samples/calling-hero-sample

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
15 minutes

azure

communication

sharepoint

services

presentation

microsoft

sample

understand

advanced

stuff

8 Sep 2022

Working back from the final UI to the code behind the scenes, in this 13-minute developer-focused demo, Ejaz Hussain shows viewers how to create a custom form component. Steps include create a list or library structure using content types, create a Form Customizer extension project using SPFx, configure and debug, deploy solution to App Catalog, and finally associate the custom component to the content type. This capability is available only from SPFx v1.15. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 8, 2022.

Demo Presenter
• Ejaz Hussain (Content & Cloud) | @EjazHussain_

Supporting materials
• Documentation - Getting Started with SPFx Form Customizer | https://www.office365clinic.com/2022/07/11/getting-started-with-spfx-form-customizer/
• Repo - cc-formcustomizer-playground | https://github.com/ejazhussain/spfx-projects/tree/main/react-formcustomizer-customers
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
13 minutes

spfx

application

customizer

model

configure

demo

project

feature

form

starting

25 Aug 2022

In this 18-minute developer-focused demo, Waldek Mastykarz dives into a new feature (extension) introduced in SPFx v1.15 for customizing the form experience of a list. Focus on 3 behaviors – create, view, and edit items in a list. Render one or more behaviors on a form. Starting with required tools, create a SPFx extension project, review provisioned components/code, 2 MUST use methods, overriding behaviors, creation and rendering options and finally deploying a form to production. Call REST to add or update items. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 25, 2022.

Demo Presenter
• Waldek Mastykarz (Microsoft) | @waldekm

Supporting materials
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

3 participants
18 minutes

sharepoint

customize

project

provisioning

version

create

packages

tool

prerequisite

components

25 Aug 2022

In this 18-minute developer-focused demo, Tony Philips delivers an option for those using the Assignments capability in Microsoft Teams for Education, to render an aggregated list of assignments in SharePoint. This is now possible using the My Assignments web part carefully explained here. Learn about the education related APIs in Microsoft Graph. EDU specific end points shown: /education/me, /ms/joinedTeams, /education/me/classes, /education/me/assignments. Review API permissions, caching service, refresh technique and capability limitations. Requires Education tenant. Separate student and teacher views of assignments. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 25, 2022.

Demo Presenter
• Tony Philips (Cloud Design Box) | @TonyMSTeams

Supporting materials
• Documentation - Education API overview | https://docs.microsoft.com/graph/education-concept-overview
• Repo – My Assignments Web Part by Cloud Design Box | https://github.com/CloudDesignBox/CDBAssignments
• Documentation - Overview of School Data Sync | https://docs.microsoft.com/schooldatasync/overview-of-school-data-sync
• Documentation - Assignments in Teams for Education | https://docs.microsoft.com/microsoftteams/expand-teams-across-your-org/assignments-in-teams

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
18 minutes

sharepoint

assignments

endpoints

demo

preview

overview

education

graph

editor

api

11 Aug 2022

In this 15-minute developer-focused demo, Markus Möller shows viewers how they may easily render and manipulate files (Drag&Drop), folders, sub-folders organized in a hierarchical view, based on managed metadata. Web part built with SPFx v1.15 and PnPjs. One can Move, Copy and/or Link to files in folders and also enables moving documents into library from an external location. Uses PnPjs to retrieve terms. File hierarchy is collapsible. Step through React component structures including the master TaxonomyFileExplorer component. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 11, 2022.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article - A SharePoint File Explorer based on Managed Metadata and SPFx | https://mmsharepoint.wordpress.com/2021/12/23/a-sharepoint-file-explorer-based-on-managed-metadata-and-spfx/
• Samples Repo - React Taxonomy File Explorer | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomy-file-explorer
• PnPjs taxonomy – getAllChildrenAsOrderedTree | https://pnp.github.io/pnpjs/sp/taxonomy/#getallchildrenasorderedtree

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
16 minutes

sharepoint

folder

drag

subfolder

metadata

view

11 Aug 2022

In this 17-minute developer-focused demo, Elio Struyf unveils after months of work, the preview Viva Connections toolkit, available now. Streamline your development process. See how to access and install the pre-release version of this new toolkit. Create a Viva project from a clean slate, from a scenario with CodeTour guidance or from an example (sample). Check for and install dependencies (Node.js., npm, and npm dependencies). Please try out the toolkit and give us your feedback please. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 11, 2022.

Demo Presenter
• Elio Struyf (Struyf Consulting) | @eliostruyf

Supporting materials
• Tools - Viva Connections Toolkit for Visual Studio Code | https://github.com/pnp/m365-hosted-apps-vscode
• VisualStudio Marketplace - Viva Connections Toolkit (Preview) | https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
17 minutes

vivia

introduction

connections

viva

toolkits

fifa

explorer

config

app

elio

28 Jul 2022

In this 19-minute developer-focused demo, Paolo Pialorsi shows the ease of customizing forms using the new SPFx React FormCustomizer component extension delivered in SPFx v1.15. Form enables add, edit and display items. Customize using modern JavaScript tools and libraries. Works with lists, libraries, Document Sets, and PnP DynamicForm (control). Perfectly suited for enterprise-level custom solutions. In demo, scaffold the FormCustomizer using Yeoman Generator. Extend/override the BaseFormCustomizer. code and debug your Form Customizer, step through form item editing capabilities, package and deploy using PowerShell. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 28, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys.com) | @paolopia

Supporting materials
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
• SPFx Controls - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• SPFx Controls - Dynamic Form | https://pnp.github.io/sp-dev-fx-controls-react/controls/DynamicForm/
• Samples - spfx-list-forms | https://github.com/PiaSys/Conferences-Samples/tree/master/spfx-list-forms

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
19 minutes

customizable

customize

customizers

customizer

editing

sharepoint

customized

extensions

configuration

create

27 Jul 2022

In this 9-minute developer-focused demo, Marcin Wojciechowski relates how with complex ACE’s, handling many conditional quick view onActions (many if action.id statements), can seriously complicate code. Example scenario – exposing news items with next and previous actions, options to like and comment, and the ability to post news in a Teams channel. See how to move from many onActions to a single action with refactoring. See how actions are handled/combined by the ActionExecutor! Easily add new actions and zero impact to QuickView code. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 30, 2022.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Sample - ace-strategy-pattern | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/ace-strategy-pattern
• Wikipedia - Strategy pattern | https://wikipedia.org/wiki/Strategy_pattern

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
9 minutes

adaptive

strategy

testable

implement

patterns

difficulty

important

extensions

quickview

interacts

26 Jul 2022

In this 8-minute developer-focused demo, Luis Mañez’s web part displays awards courtesy of the recently released beta Microsoft Graph profile endpoint. Awards is an example of new information (skills, projects, languages…) you can attach to a user’s profile using Graph. Sample shows title, description, badge and link to more information about award. Luis uses Postman to add an award and uses the me endpoint to get list of awards. Future update - enabling users to add their own awards in UI. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 30, 2022.

Demo Presenter
• Luis Mañez (ClearPeople) | @luismanez

Supporting materials
• Documentation - profile resource type | https://docs.microsoft.com/graph/api/resources/profile?view=graph-rest-beta
• Sample - My Awards | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-profile-awards

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
8 minutes

profile

users

display

endpoint

awards

microsoft

introduce

graph

spfs

beta

14 Jul 2022

In this 17-minute developer-focused demo, Emanuele Bartolesi opens with a great premier on GitHub Codespaces cloud-based development environment. What it is, what can you do with it, limits during beta, and cost. Step through creating and configuring a basic Codespaces container for a project. Then learn about the presenter’s template - SPFx GitHub Codespaces Container, click the “Use this template” button, and step through setting up a new container pre-configured for your SPFx project in minutes! This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 16, 2022.

Demo Presenter
• Emanuele Bartolesi (SoftwareONE) | @kasuken

Supporting materials
• Repo - SPFx GitHub Codespaces Container | https://github.com/kasuken/SPFxGitHubDevContainer
• Site – GitHub Codespaces - Blazing fast cloud developer environments | https://github.com/features/codespaces
• Documentation - GitHub Codespaces overview | https://docs.github.com/codespaces/overview
• Repo - GitHub Codespaces (Default Linux Universal) | https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux
• Documentation - devcontainer.json reference | https://code.visualstudio.com/docs/remote/devcontainerjson-reference
• Repo - VS Code Remote / GitHub Codespaces Container Definitions | https://github.com/microsoft/vscode-dev-containers
• Register - Sign up for the Codespaces beta | https://github.com/features/codespaces/signup

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
17 minutes

cospaces

sharepoint

repository

developer

mac

space

configuration

project

gitapco

topic

14 Jul 2022

In this 5-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0. You created a centralized config file in the previous session, now initialize and import the _sp variable into your project. In a React web part, call getSP() function within a component with no parameters and get back the previously stored _sp instance located in your pnpjsConfig.ts file. In your web part set the local instance this.sp = getSP() inside your component. Reusing a centrally configured (global) variable across all your components is just simple and clean. This is part 3 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
5 minutes

configure

configuring

configured

config

configuration

sharepoint

sp

context

pjs

recreating

14 Jul 2022

In this 6-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0 and specifically using a single batching call (batchedSP.web.lists) to update list items rendered in a table. They show using an onClick event to call the private updateTitles method. Results state gets updated and a table containing a list of documents shows updated document title names. Check out the code in the PnPjs Example linked below. This is part 5 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
6 minutes

batchesp

batching

batched

batch

execute

pmpjs

updated

preview

react

tuple

14 Jul 2022

In this 7-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0 by passing properties to and using the sp object to render a component (table) on screen. Create your own unique instance of the sp object by extending the sp object without modifying it! Create a new sp object that includes caching behavior. Calls made with the sp cache instance will cache the content of the call into session storage. Map through items and create a file item that will be render files details in a nicely formatted table. This is part 4 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
7 minutes

v3

setup

spfi

pjs

initializing

interface

context

version

pmp

caching

14 Jul 2022

In this 20-minute developer-focused demo, Siddharth Vaghasia delivers a single ACE component to show multiple cards and items from a SharePoint list. Each list row is rendered separately in a Card view. Card view format based on schema and data stored in list row. Additional information in row rendered in Quick View card or link to external resource. Display and rotate card on Dashboard by time and date. Navigate through card items with Prev/Next. Update CardJSON and CardData in list with Power Automate. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 14, 2022.

Demo Presenter
• Siddharth Vaghasia | @siddh_me

Supporting materials
• Sample Repo - Dynamic Announcements | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Dynamic-Announcements
• Sample Repo - Event schedule and registration | https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/event-schedule

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
20 minutes

card

adapter

cards

extensions

adaptive

display

users

sharepoint

updates

suggestion

12 Jul 2022

In this 9-minute developer-focused demo, Siddharth Vaghasia shows calling a Microsoft Graph API from an ACE and using Graph to store/read user’s preferences on user’s OneDrive. Uses card view (to display logged in user’s immediate upcoming Shift on a team) and quick view cards to display additional shifts, other teams (with open shifts) and team selection confirmations. Delivers a Personalized Experience on the user’s Viva Connections dashboard. Follow the logic by clicking through the CodeTour in this ACE sample. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 16, 2022.

Demo Presenter
• Siddharth Vaghasia | @siddh_me

Supporting materials
• Sample - My Upcoming Shifts | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-MyShifts
• Article - The easiest way to store user settings of your Microsoft 365 app | https://blog.mastykarz.nl/easiest-store-user-settings-microsoft-365-app/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
9 minutes

configurable

adaptive

card

settings

users

display

option

dashboard

shift

loading

12 Jul 2022

In this 9-minute demo, Julie Turner and Patrick Rodgers show viewers how to get started on creating a very basic SharePoint Framework React JS web part using the PnPjs v3 library. Scaffold out a SharePoint Framework project, install libraries (@pnp/sp and @pnp/logging libraries), inspect dependencies in the package json, verify using rush-stack-complier 4.2 and gulpfile.js. Set up the pnpjsConfig.ts files (selectively import parts of library needed for project and GetSP function that includes spfi (Fluent interface) and PnPLogging behavior. These activities centralize and simplify the setup and configuration for the PnPjs library. This is part 2 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
9 minutes

pmpjs

logging

v3

logger

sharepoint

version

webpart

dependencies

julie

ahead

11 Jul 2022

In this 17-minute developer-focused demo, Don Kirkham shows how to cleanly update your web part functionality that was built using prior version of SPFx. In this 0 to Done demo – upgrade a SPFx project to v1.15.0 in 10 minutes using the CLI’s spfx project upgrade command. Set up environment, clone a project, and upgrade dependencies and files in project following steps detailed by CodeTour or Markdown in VS Code. Gulp build and done! Addresses all SPFx dependencies and most other dependencies. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 14, 2022.

Demo Presenter
• Don Kirkham (DMI) | @donkirkham

Supporting materials
• PnP Tool - CLI for Microsoft 365 | aka.ms/cli-m365
• Article (11July2022) - SharePoint Framework (SPFx) v1.15 and the attack of ESlint – Andrew Connell (Voitanos) | @andrewconnell | https://www.andrewconnell.com/blog/sharepoint-framework-v1.15-and-the-attack-of-eslint/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
17 minutes

upgrades

upgrading

sharepoint

spfx

sharing

installations

project

consultant

feature

discussion

4 Jul 2022

In this 17-minute developer-focused demo, the question - what happened to the CEWP/SEWP’s in the move from classic to modern? Thanks to SPFx and presenter, the content web part is back. Built with a Governance, not a technical approach to address security and governance issues. Meet the Cherry-Picked Content web part. Uses only snippets (ships with 16) from approved libraries hardcoded in web part focusing user’s selections. Inject code directly into page or into an iFRame. Code uses a ContextualFragment. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 16, 2022.

Demo Presenter
• Christophe Humbert | @Path2SharePoint

Supporting materials
• Sample - Cherry picked content | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cherry-picked-content
• Article - Aiming for a safer Content Editor Web Part | https://blog.pathtosharepoint.com/2022/04/19/aiming-for-a-safer-content-editor-web-part/
• Sample - dangerous-content-web-part | https://github.com/PathToSharePoint/dangerous-content-web-part
• Issue - Make React-Script-Editor more secure #2228 | https://github.com/pnp/sp-dev-fx-webparts/issues/2228
• Tool – MGT | mgt.dev
• Sample - Script editor web part for modern pages built in React | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
17 minutes

sharepoint

webpart

content

topic

editor

sharing

users

refreshes

connectors

copy

30 Jun 2022

In this 9-minute developer-focused demo, Arun Kumar Perumal shows how this web part allows users to create and manage content laid out in tabbed or accordion view format for both desktop and mobile. Switch between views using Property Field Collection Data and edit content with tinyMCE Rich Text Editor for SharePoint Online. Uses Custom Accordion components and Custom Tab components included in the code. Also uses primary colors and themes from host site.. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 30, 2022.

Demo Presenter
• Arun Kumar Perumal (Wipro) | @arun_perumal16

Supporting materials
• Sample - Tab Accordion Web Part with Property Field Collection Data and tinyMCE for Rich Text Editing | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
9 minutes

tinymc

accordions

accordion

tabs

themes

demo

editor

module

sme

terminal16

15 Jun 2022

In this 9-minute developer-focused demo, follow along as Arun Kumar Perumal configures the FAQ web part’s layout in property pane - selects accordion or tab, colors and themes. Create categories and sort conditions. Subject matter editors use the rich text editor to easily answer questions. Uses Office UI Fabric Search Box - search by question, searched term highlighted in results. See code for the 2 components (FAQ and Accordion) in web part. Accordion is a custom component. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 2, 2022.

Demo Presenter
• Arun Kumar Perumal | @arun_perumal16

Supporting materials
• Sample - Frequently Asked Questions with Property Field Collection Data | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faqs
• Article - Community Sample: React FAQs webpart | https://pnp.github.io/blog/post/community-sample-faqs-with-propertyfieldcollectiondata/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
9 minutes

faq

functionality

topics

vipro

property

editor

tabs

sme

collection

sharepoint

15 Jun 2022

In this 10-minute developer-focused demo, Fabio Franzini knowledgeably introduces viewers to the “Enhanced Theme Provider” control, what problem it solves (lack of support for Teams high contrast theme and basic styles), how it’s implemented, and how to use it in SPFx. Extends functionality of the Fluent UI ThemeProvider control by adding some logic and considered as a sort-of wrapper for all react and non-react controls that you want to add to the web part. Control available in next version of PnP React controls. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 2, 2022.

Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio

Supporting materials
• Documentation - SharePoint Framework v1.15 preview release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.15
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
• Control - Dynamic Form | https://pnp.github.io/sp-dev-fx-controls-react/controls/DynamicForm/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
11 minutes

sharepoint

control

provider

rendered

inprovider

ui

version

themecontext

html

style

9 Jun 2022

In this 9-minute developer focused topic overview – Gloria Sánchez and Vesa Juvonen announce a new set of benefits (20 of them) for ISV partners publishing Microsoft Viva solutions to AppSource or to SharePoint/Viva Connections store. Microsoft’s committed to the Employee Experience Platform (EXP), a.k.a., Microsoft Viva Platform and Ecosystem. Hear about the new Microsoft 365 ISV Benefits program, go-to-market benefit highlights and how to enroll in the program. This “platform” is built for extensibility. Benefits include marketing support, technical support, monetary incentives, guidelines for IT Admins and more. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 24, 2022.

Demo Presenters
• Gloria Sánchez (Microsoft)
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Program - Build apps for Teams and Viva and take advantage of the Microsoft 365 ecosystem | aka.ms/modernworkisv

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
9 minutes

365

viva

microsoft

collaboration

vesa

having

users

isvs

webinars

switching

8 Jun 2022

In this 15-minute developer-focused demo, Fabio Franzini quite completely shows off the new control to be included in the next version of the PnP Reusable React controls library. The control facilitates the use of Designer inside a SPFx web part. Essentially, the Host renders a single Adaptive Card in a web part and on the selected Adaptive Card now is a superimposed button ‘Open Designer’ that brings up the new and SPFx optimized, Designer control. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 19, 2022.

Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio

Supporting materials
• Tools – Adaptive Cards | https://adaptivecards.io/
• SPFx Controls - Adaptive Card Host | https://pnp.github.io/sp-dev-fx-controls-react/controls/AdaptiveCardHost/
• Samples - Adaptive Card Host control | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-card-host-control

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

1 participant
15 minutes

controls

control

controller

card

manage

adaptive

host

sharepoint

gmp

car

2 Jun 2022

In this 15-minute developer-focused demo, Alex Terentiev and Vesa Juvonen introduce a new component type in v1.15 called Form customizer that enables development of custom modern forms with custom edit experience. Delivering API level support for content types with 6 new properties for separately configuring new form, edit form and display form. Look at how to debug your form customizer and how form customizer will work in your production environment. Changes to JSON configuration, use of DynamicForm control. List extensibility roadmap reviewed. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 2, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• PnP Tool - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• PnP Tool - PropertyFieldListPicker control | https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
15 minutes

sharepoint

framework

customizer

versions

configuration

edit

render

evolving

view

microsoft

23 May 2022

In this 12-minute developer-focused demo, Adam Wójcik questions – where are you storing user personal data generated by your SPFx app located within SharePoint and Teams? Options: Hidden SharePoint List, Dataverse, user profile property? See how to manage data stored in a json file in the application’s personal folder on the user’s OneDrive. Three Microsoft Graph endpoints are used in this solution. Graph conveniently creates the data file on your OneDrive for you. Step through the web part code. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 5, 2022.

Demo Presenter
• Adam Wójcik (Hitachi) | @Adam25858782

Supporting materials
• Sample - Save to User Application Personal Folder in OneDrive | https://adoption.microsoft.com/sample-solution-gallery/pnp-sp-dev-spfx-web-parts-react-save-to-onedrive-app-personal-folder
• Article - Save data to app personal folder | https://pnp.github.io/blog/post/save-data-to-app-personal-folder/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

1 participant
12 minutes

sharepoint

provisioning

dataverse

users

save

downloads

personal

demoing

support

spfx

19 May 2022

In this 20-minute developer-focused demo, Anoop Tatti acclimates viewers to his Office locations ACE starting in the property pane. See configuring this ACE with multiple card views showing details of geographically distributed offices for an organization. Key solution properties: Multiple data sources (local properties, taxonomy, or SharePoint list), Bing and Google for maps, PnP JS v3, OpenWeather API to get weather, Temporal API to get local time, Geolocation action type and Caching. Uses new Show location action. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 19, 2022.

Demo Presenter
• Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials
• Sample - Office locations | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-OfficeLocations
• Demo - Getting started on building Microsoft Viva Connection adaptive card components using SPFx – Patrick Rodgers (Microsoft) | @mediocrebowler | https://www.youtube.com/watch?v=KQGsY5fvLaY
• Ignite session - Get started with Microsoft Viva Connections Extensibility | aka.ms/CONLL112
• YouTube Channel - PiaSys Tech Bites | https://www.youtube.com/c/PiaSysTechBites
• Documentation - Location capabilities in Adaptive Card Extension | https://docs.microsoft.com/sharepoint/dev/spfx/viva/get-started/actions/geolocation/geolocationdocumentation
• Overview - JavaScript Temporal API Cheatsheet | https://temporal-api-cheatsheet.rodneylab.com/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pn

2 participants
20 minutes

adapter

dashboard

demo

setup

cards

office

developer

user

location

sharepoint

17 May 2022

In this 15-minute developer-focused demo, Derek Cash-Peterson’s solution delivers 12 beautiful and very usable Adaptive Card Extensions (ACEs) and a personal app that shows the ACEs and how related deep links surface in Teams. Each ACE (Event scheduling, café menu, Calendar…) showcases functionality like collapsing menus, scrolling through articles, conditional formatting, UI design, etc. From the Teams app click to see ACE in Adaptive Cards Schema Explorer and alter card as desired. Step through code for Event Scheduler ACE. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.

Demo Presenter
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials
• Samples - ace-designtemplate-gallery - https://symp.info/ACEDesignGallery
• App Store: From App Catalog - SharePoint Store - https://appsource.microsoft.com/en-US/product/office/WA200003929

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
15 minutes

designs

projects

application

demos

showcase

aces

presenting

cards

gallery

dashboard

17 May 2022

In this 18-minute developer focused demo – Waldek Mastykarz and Paolo Pialorsi confirm the benefits of using a common set of back-end APIs to provide enterprise level functionalities to a host of UIs - Teams, Outlook, Office.com, Viva and ACEs built with SPFx components. The example scenario – An office desk booking app. Security and API hosting from Azure, data in SharePoint lists. Reports in Power BI, Booking cards in Teams and Viva Connections Dashboard. Notifications in Outlook. Thorough code walkthrough. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 17, 2022.

Demo Presenters
• Waldek Mastykarz (Microsoft) | @waldekm
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Sample – PnP.SafeDesk365 | https://github.com/pnp/PnP.SafeDesk365

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

3 participants
18 minutes

apps

microsoft

office

workplace

users

manage

imagine

enterprise

365

sharepoint

10 May 2022

In this 9 minute demo, Julie and Patrick show how to get started building a simple SPFx React Web part using the PnPjs library. This is part 2 of a 5 part series.

Presenters:
📽️ Julie Turner (Sympraxis) | @jfj1997
📽️ Patrick Rodgers (Microsoft) | @mediocrebowler

Resources:
✔️ https://pnp.github.io/pnpjs
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog

2 participants
9 minutes

pmpjs

logging

logger

v3

sharepoint

setup

dependencies

webpart

julie

ahead

5 May 2022

In this 16-minute developer-focused demo, Hugo Bernier suggests how to avoid making your users feel bad through poor information collection design. In this 6th and final installment on property panes, use proven PnP property pane controls and validation methods in your reusable SPFx solutions. Step through installing the propertypane library in your VS code environment, then add and configure a control in a web part. Session wraps with design (error message) etiquette recommendations. Design apps your users will love! This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 5, 2022.

Demo Presenter
• Hugo Bernier (Microsoft) | @bernierh

Supporting materials
• PnP Tool - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• PnP Tool - PropertyFieldListPicker control | https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

1 participant
16 minutes

configuration

mywebpart

blog

validations

editing

users

property

maintenance

getpropertypane

refresher

2 May 2022

In this 18-minute developer-focused demo, Christophe Humbert shows makes it very clear just how you can add any control - HTML, MGT, Northstar, PnP to the Property pane. Get the lay-of-the-land with a Property Pane Portal Architecture drawing. See how controls from library are called into a web part and how the control’s properties are configured in the Property Pane. Install npm property pane host and portal. Create portal - ReactDOM.createPortal(child, container). Push child (control) to container (Property pane). This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.

Demo Presenter
• Christophe Humbert | @Path2SharePoint

Supporting materials
• Tool - NPM packages (property-pane-portal, property-pane-wrap) | https://www.npmjs.com/~pathtosharepoint
• Sample - Property Pane Portal PnP Controls | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ppp-pnp-controls
• Library - @fluentui/react-northstar | aka.ms/fluent-ui
• Controls - Reusable React controls for your SharePoint Framework solutions |
aka.ms/pnp-react-controls
• Tools - Microsoft Graph Toolkit Playground | https://mgt.dev

Learn more
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
18 minutes

sharepoint

property

configuration

manage

portal

host

edit

presenting

ppp

toolkit

26 Apr 2022

In this 22-minute developer focused demo – Waldek Mastykarz and Alex Terentiev introduce you to the SPFx project doctor! The new CLI command that validates the correctness of an SPFx project – dependencies in sync and correct versions, appropriately placed in the code, correct gulp, PnPjs, rush stack compiler, code redundancies, etc., all based on SPFx version project is using. Report generated in json, markdown or CodeTour. Run fix commands one by one or all together from a single script. Get the full tour here. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 26, 2022.

Demo Presenters
• Waldek Mastykarz (Microsoft) | @waldekm
• Alex Terentiev (Microsoft) | @alexaterentiev

Supporting materials
• Tool - CLI for Microsoft 365 | https://pnp.github.io/cli-microsoft365/
• Documentation - spfx project doctor | https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-doctor/
• Video - Validate SharePoint Framework project easily using CLI for Microsoft 365 - Rabia Williams (Microsoft) | @williamsrabia | https://www.youtube.com/watch?v=qo8ZSIlb_pU
• Extension - CodeTour | https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
22 minutes

dependencies

package

project

cli

analyzes

compiler

manage

tooling

issue

valdec

21 Apr 2022

In this 16-minute developer-focused demo, Aleksandr Sapozhkov defines a developer scenario: I work for many customers, and I’m asked to fix bug or contribute to a project. I don’t have dependency tools on my machine, nor am I interested in accessing potentially unsafe code. Virtual options – create VMs or use containers. See how easy it is to open a project in a safe, provisioned, light weight container located on your machine or in the cloud. Docker is only app required on your machine. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 24, 2022.

Demo Presenter: Aleksandr Sapozhkov (Sopra Steria) | @shurick81

Supporting materials:
• Documentation - Getting started with Docker | https://docs.docker.com/
• Documentation - Run CLI for Microsoft 365 in a Docker Container | https://pnp.github.io/cli-microsoft365/user-guide/run-cli-in-docker-container/
• Repo - SharePoint Framework Docker images | https://github.com/pnp/docker-spfx
• Repo - personal-assistance | https://github.com/shurick81/spfx-demo-01

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
16 minutes

dependencies

npm

software

provisioning

repository

modules

virtualization

consistency

spfix

optimal

21 Apr 2022

In this 8-minute developer-focused demo, Paolo Pialorsi focuses very specifically and concisely on how you can manage navigation inside ACEs with SPFx. Every ACE has navigation properties (Navigators) that can be used to navigate across Card View(s) and Quick View(s). Functionality includes Read the current item ID, Register and Push, Pop & Replace. You can rely on these objects to precisely manage the ACE navigation flow and stack. Code for functionality including Start and Restart logic shown. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Tools - Adaptive Cards Schema Explorer | https://adaptivecards.io/explorer/
• Documentation – ViewNavigator | https://docs.microsoft.com/sharepoint/dev/spfx/viva/get-started/advanced-quick-view-functionality#viewnavigator
• Sample - aces-navigation-demo | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-navigation-demo

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
8 minutes

adapter

cards

card

push

quickview

navigate

pop

rendering

adaptive

initialization

21 Apr 2022

In this 13-minute developer-focused demo, Fabio Franzini educates viewers on the control by stepping through implementation of the "AdaptiveCardHost" PnP React component using the Adaptive Card SDK. The host control delivers the ability to change UI at runtime without having to recompile the SPFx solution. Simple configuration in property pane - select a card to render and apply a theme aligned to SharePoint or Teams environment. Uses Fluent UI. Walk through code and proposed future updates. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.

Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio

Supporting materials
• Tools – Schema Explorer | adaptivecards.io/
• Controls - Adaptive Card Host | https://pnp.github.io/sp-dev-fx-controls-react/controls/AdaptiveCardHost/
• Sample - Adaptive Card Host control | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-card-host-control

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
13 minutes

controls

card

implementation

components

sdk

adaptive

pmp

host

demo

aces

20 Apr 2022

In this 7 minute developer-focused demo, Hugo shows how to take an old version of an SPFx solution and update it with CLI for Microsoft 365. He also provides guidance on when to do this and why. 💡

🚀 Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
✔️ https://pnp.github.io/cli-microsoft365/
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog

1 participant
8 minutes

sharepoint

upgrade

downloading

version

spfx110

cloud

installation

microsoft

project

package

14 Apr 2022

In this 10-minute developer focused demo, Sébastien Levert shows viewers just how easy it is to add Graph to an SPFx project - create a new yo project, install the mgt-spfx package (includes mgt library component that goes into your app catalog), and if using React, install the mgt-react component. Coding time! Import the SharePointProvider from mgt-spfx (handles authentication and connection to SPFx library component). Fast track SPFx projects with MGT components. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 15, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Build a SharePoint web part with the Microsoft Graph Toolkit | aka.ms/mgt/spfx
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k

Learn more:
• Learn more about the Microsoft 365 Platform Community community at: http://aka.ms/m365/community
• Visit the Microsoft 365 Platform Community YouTube channel: https://aka.ms/m365/videos

2 participants
10 minutes

toolkit

sharepoint

mgtspfx

mgt

graph

ngtspfx

microsoft

applications

users

craft

14 Apr 2022

In this 5 minute developer-focused demo, Hugo shows which template options are available to you when scaffolding your SPFx Web part using Yeoman Generator 1.14: Minimal, no framework or React and highlights the differences.

Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
https://aka.ms/spfx-yeoman-info
https://aka.ms/m365pnp
https://pnp.github.io/blog

1 participant
5 minutes

templates

webparts

generator

version

framework

component

configured

sharepoint

contrast

spfx114

12 Apr 2022

In this 17-minute developer focused demo – Waldek Mastykarz and Anoop Tatti share the latest fully documented and available sample highlighting an end-to-end Microsoft 365 solution. Includes 2 ACEs, Viva Connections Dashboard, a list, an SPFx web part - Teams personal app using Microsoft Graph and MGT for data. See the app in action – initiate wellbeing request in ACE Card View with Quick View, then see details, approve, or reject in Teams Personal App. Step through code and view supporting resources. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 12, 2022.

Demo Presenters
• Waldek Mastykarz (Microsoft) | @waldekm
• Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials
• Sample - Wellbeing days requests and reminder - Adaptive Cards Extensions and Teams personal app | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-wellbeing
• Demo - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY&AB_channel=Microsoft365Community
• Ignite session - Get started with Microsoft Viva Connections Extensibility | https://aka.ms/CONLL112

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

3 participants
18 minutes

applications

demo

microsoft

users

adaptive

connections

insights

viva

sharepoint

idea

12 Apr 2022

In this 4 minute developer-focused demo, Hugo walks through how to install the Remote Development extension pack for Visual Studio Code and then uses Docker for desktop to connect to the remote container so that you can easily switch between development environments reflecting that you need different development dependencies for Teams, SPFx, Power Platform etc.

Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
https://code.visualstudio.com/docs/remote/remote-overview
https://aka.ms/m365pnp
https://pnp.github.io/blog

1 participant
8 minutes

sharepoint

remote

toolkit

docker

configure

workstation

project

dependencies

developer

launch

8 Apr 2022

In this 12-minute developer-focused demo, Siddharth Vaghasia shows an Adaptive Card Extension (ACE) that displays emails for the currently logged in user. Presenter steps through the code to show viewers how to get the current user’s email message from the Graph and render it in SPFx ACE Card View with previous and next buttons to navigate between emails. Demonstrates how to modify Quick View to display email details on click of any Email from Card View. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Siddharth Vaghasia | @siddh_me

Supporting materials:
• Article - How to call and show Graph API data in SPFx Adaptive Card Extensions (ACEs) | https://siddharthvaghasia.com/2022/01/02/how-to-call-and-show-graph-api-data-in-spfx-ace/
• Article - Create your first Adaptive Card Extensions (ACEs) with SPFx | https://siddharthvaghasia.com/2021/12/29/create-your-first-adaptive-card-extension-with-spfx/
• Sample - My Emails | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-MyEmails

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
13 minutes

card

cardview

adapter

users

adaptive

preview

associated

generator

loading

sharepoint

7 Apr 2022

In this 18-minute developer-focused demo, Nanddeep Nachan delivers an inside view on building an ACE component with Card View and multiple Quick View cards to display Microsoft 365 (Unified) groups in a tenant of which user is owner or member. The Card View button allows the user to browse to groups. The Quick View card shows group details with buttons to visit associated SharePoint and or Teams sites. Card templates used were Basic, Image and Primary. Developed on SharePoint Framework v1.13.1. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.

Demo Presenter
• Nanddeep Nachan | @NanddeepNachan

Supporting materials
• Sample - My Microsoft 365 Groups | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-My-M365-Groups
• Article - Build ACE for Microsoft 365 Groups Membership | https://nanddeepnachanblogs.com/posts/2022-01-27-ace-m365-groups-membership/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
18 minutes

users

microsoft

card

adaptive

sharepoint

admin

access

associated

benefits

nanda

7 Apr 2022

In this 6 minute developer-focused demo, Hugo walks through how to scaffold an SharePoint Framework web part using Yeoman Generator.

Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
https://aka.ms/spfx-yeoman-info
https://aka.ms/m365pnp
https://pnp.github.io/blog

1 participant
6 minutes

configure

spfxwebpartwebpart

spfx

creating

setup

generator

project

cloud

scaffolding

workstation

7 Apr 2022

In this 7-minute developer-focused demo, Paolo Pialorsi shews viewers how to use Quick View in an ACE to collect data. Using the Adaptive Cards JSON syntax/schema, you can request data, define rules to validate collected data, and define actions to submit data. In the Quick View class, you handle the onAction method with custom actions, i.e., view, edit, save, submit, close. Systematically create complex forms in Quick View with the Adaptive Card syntax. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Tools - Schema Explorer | https://adaptivecards.io/explorer/
• Documentation - Adaptive Cards Template Language | https://docs.microsoft.com/adaptive-cards/templating/language
• Sample - aces-submit-data | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-submit-data
• Sample - aces-actions | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-actions

Learn more
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
7 minutes

cards

card

interactive

adaptive

hpfx

adapter

demo

input

generator

quick

5 Apr 2022

In this 17-minute developer focused demo, Vesa Juvonen shares list extensibility capabilities that will be rolled out incrementally April through June 2022 within the next SharePoint Framework (SPFx) version 1.15. The early April preview release supports creation of modern custom forms for – viewing, creating and editing individually selected list items. SPFx forms are associated to a list/content type. If a list item is returned in a search result, then it is rendered and editable within the custom form associated to the item. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 5, 2022.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Documentation - Overview of the SharePoint Framework | aka.ms/spfx

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
17 minutes

sharepoint

version

microsoft

framework

maintenance

configuration

hosting

editing

customizer

extensions

29 Mar 2022

In this 10-minute developer focused demo – Patrick Rodgers points out previously delivered demos addresses managing “state” inside an ACE. This demo is about efficiently sharing state/data across multiple ACEs. In a card, state is updated when run a query, display returned data. Instead, store data in local storage (cache), in a shared library that can be included in many cards, web parts, Application Customizers, pages and more. Get data once, deliver faster to cards/pages. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 29, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Documentation - Using library component type in SharePoint Framework | https://docs.microsoft.com/sharepoint/dev/spfx/library-component-overview
• Repo - Sharing State Across ACEs | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-shared-state
• Docs & Videos - Search Results for: library components | https://warner.digital/?s=library+components
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions | https://youtu.be/vcSM5PUgn0I - Paolo Pialorsi (PiaSys) | @PaoloPia
• Demo - Creating engaging and dynamic Viva Connections mobile experiences | https://youtu.be/e3CUtjIwW80 – Patrick Rodgers | @mediocrebowler https://youtu.be/e3CUtjIwW80

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

3 participants
10 minutes

sharing

sharepoint

cards

storing

loading

interface

server

demos

deploying

capability

29 Mar 2022

In this 10-minute developer-focused demo, João Ferreira delivers an SPFx extension that allows you to add Clarity page activity tracking capabilities to your Modern SharePoint site pages for gaging user interaction with elements on page. The extension is added to the site’s App Catalog and injects a Microsoft Clarity JavaScript into site pages. Setup: 1) Create account and setup a new project on Clarity site and 2) Deploy extension to your SharePoint site. From Clarity, get heatmap and BI-like dashboard reporting by page. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 24, 2022.

Demo Presenter: João Ferreira (Beezy) | @joao12ferreira

Supporting materials:
• Website - Microsoft Clarity – Free Heatmaps & Session Recordings | https://clarity.microsoft.com/
• Repo - Microsoft Clarity for modern SharePoint | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-microsoft-clarity
• Samples - SharePoint Framework Client-Side Extension Samples | https://pnp.github.io/sp-dev-fx-extensions/
• Documentation - Application Customizers | https://adoption.microsoft.com/extensibility-look-book/products/sharepoint/extensibility-spfx-application-customizer
• Article - How to add Microsoft Clarity to modern SharePoint | https://sharepoint.handsontek.net/2020/12/06/add-microsoft-clarity-modern-sharepoint/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
10 minutes

sharepoint

monitoring

tracking

users

clarity

microsoft

dashboard

analytics

snapshot

project

24 Mar 2022

In this 11-minute developer-focused demo, Greg Hitchon shows a task-based workflow framework for business and technical work, i.e., create technical report, vacation request, new hire onboarding. Securely accesses protected resources, uses Microsoft stack - Graph, Adaptive Cards (low code forms), React Hooks (code forms), SPFx, Fluent UI, etc. Initiate tasks, get/respond to Adaptive Card form in email, SharePoint, and Teams. Capably delivers the expected validations, approvals, status tracking. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 24, 2022.

Demo Presenter: Greg Hitchon (Corrosion Service Co)

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
•Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
11 minutes

workflows

workflow

software

tasks

sharepoint

server

techniques

developer

ui

form

24 Mar 2022

In this 13-minute developer-focused demo, Paolo Pialorsi steps viewers through the setup and consumption of a 3rd party/custom API (Azure Functions, ASP.NET REST APIs) in an ACE. Start with registering the API in AAD as an AAD app, consenting the AAD app in target tenant, granting permissions to the app via SPO Admin UI to consume the API via SPFx context and AadHttpClient. After setup, see the code for calling and rendering stock values acquired via the third-party API. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 24, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Documentation - Connect to Azure AD-secured APIs in SharePoint Framework solutions | https://docs.microsoft.com/sharepoint/dev/spfx/use-aadhttpclient
• Documentation - AadHttpClient class | https://docs.microsoft.com/javascript/api/sp-http/aadhttpclient?view=sp-typescript-latest
• Sample - Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-3rd-party-api

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
13 minutes

api

application

demo

backend

client

card

adapter

advanced

sharepoint

configure

10 Mar 2022

In this 30-minute Developer-focused demo, Fabio Franzini relates how customers commonly want same functionality, different UI. The objective was to enable customers to change UI layout at runtime (no recompiling required). Mission accomplished! This SPFx solution contains a web part that hosts an AdaptiveCardhost control. The web part that can be used in a SharePoint page, Teams tab and Teams personal app. See/hear the rationale behind this React control, why use the Adaptive Cards SDK, Fluent UI, and how control is implemented. Includes Q&A. This demo is taken from the Adaptive Cards community call – March 2022, recorded on March 10, 2022.

Demo Presenter: Fabio Franzini (Apvee Solutions) | @franzinifabio

Supporting materials:
• SPFx Controls - Adaptive Card Host | https://pnp.github.io/sp-dev-fx-controls-react/controls/AdaptiveCardHost/
• SPFx Samples - SharePoint Framework Client-Side Web Part Samples (Demo will be posted here when complete) | https://pnp.github.io/sp-dev-fx-webparts/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

4 participants
30 minutes

controls

manage

functionality

card

adaptive

sharepoint

configuration

pmp

explain

sdk

10 Mar 2022

In this 11-minute developer-focused demo, Yves Habersaat articulates how the Microsoft Graph Toolkit (MGT) together with SharePoint Framework (SPFx) and custom templates work together to display agendas, files, tasks, messages and more. To set up your environment - install mgt-spfx, mgt-spfx npm, and mgt React components packages. Instantiate the SharePointProvider. Finally, import selected MGT React components into your web part and grant permissions to SPO. See how presenter uses GET component and renders results in custom templates. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Yves Habersaat (Sword Group) | @yhabersaat

Supporting materials:
• Repo – Microsoft Graph Toolkit - v2.4.0 | https://github.com/microsoftgraph/microsoft-graph-toolkit/releases
• Demo - Using the Microsoft Graph Toolkit Get Component in your solutions – Sébastien Levert (Microsoft) | @sebastienlevert – https://youtu.be/9w2L3-7sCDI?t=2432
• Documentation - Get component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/get
• MGT Playground – mgt-get | https://mgt.dev/?path=/story/components-mgt-get--get-email

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
11 minutes

toolkit

configure

sharpen

mgtx

npm

microsoft

graph

advanced

v1

manage

10 Mar 2022

In this 16-minute developer-focused demo, Paolo Pialorsi guides viewers on how to consume Microsoft Graph APIs within ACEs. Use Graph in an ACE to read from and write to calendar. Step through configuring webApiPermissionRequests in package-solution.json file, granting permissions via SPO Admin UI and consuming Microsoft Graph via SPFx context object (MSGraphClient) and binding the data to the UI of CardView(s) and/or QuickView(s). Deploy solution with sppkg package with stated permissions requirements. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Documentation - List events | https://docs.microsoft.com/graph/api/user-list-events
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions – Paolo Pialorsi (PiaSys) | @PaoloPia | https://youtu.be/WkFVkFKPDMc?t=1297

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/vide

2 participants
16 minutes

card

micrograph

microtestify

sharepoint

graphclient

dashboard

adapter

advanced

client

create

8 Mar 2022

In this 17-minute developer focused demo – Vesa Juvonen shows off the completely Modernized App Catalog with Modernized app request process and Modernized app catalog experiences. One place to upload, manage (app request and approval) and deploy SPFx solutions (custom components) in an organization. Existing catalog UX will be updated (aligned to typical Admin UX), no action on your part and no impact on existing catalog functionality. Demo and Roadmap for the SPFx store and app catalog delivered. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 8, 2022.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
18 minutes

sharepoint

modernizing

hosted

updates

vmware

manage

provisioning

present

app

connections

1 Mar 2022

In this 16-minute developer focused demo – Microsoft continues to evolve SPFx experiences in Microsoft 365 that span SharePoint, Teams and Viva Connections canvases. The engineering team reviews capabilities delivered in SPFx v1.14 and on new capabilities being built for v1.15 to be released in phases. Two work-in-progress items shared are Command Set API update for ListViewAccessor (update asynchronously for list state changes) and a new action called VivaAction.SelectMedia providing media upload capabilities on an Adaptive Card Extension. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 1, 2022.

Demo Presenters:
• Luca Bandinelli (Microsoft)
• John Nguyen (Microsoft)
• Alex Terentiev (Microsoft) | @alexaterentiev
• Siddharth Gulati (Microsoft) | @sidvaani

Supporting material:
• Documentation - SharePoint Framework v1.14 release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.14

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

5 participants
16 minutes

sharepoint

framework

share

version

dashboard

access

streamlined

tweaking

host

quickviews

25 Feb 2022

In this 13-minute developer-focused demo, Hugo Bernier delivers custom properties (part 4). Help users give you the right information for best and most secure user experience. Best error messages are non-dramatic and helpful. Validate inputs using onGetErrorMessage attribute. Avoid throttling issue by not validating user’s every key stroke, give user time to type using deferredValidationTime attribute, then validate. Validation often requires checking on the existence of list or data before validation can occur. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Documentation - Validate web part property values | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/validate-web-part-property-values
• Documentation - Make your SharePoint client-side web part configurable | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane
• Documentation - Integrate web part properties with SharePoint |
https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint

Previous demos from Hugo Bernier (Microsoft) | @bernierh, on SPFx Design Patterns series
• SharePoint Framework Design Patterns – Custom Web Part Properties (Part 3) – 13 January
• SPFx Design Patterns – Custom Properties (Part 2) – 30 December
• SPFx Design Patterns – Custom Properties (Part 1) – 4 November
• SPFx Design Patterns – Property Panes - 21 October

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
13 minutes

validation

users

configuration

editing

documentations

developer

html

property

aspects

concerns

24 Feb 2022

In this 6-minute developer-focused demo, Sudharsan Kesavanarayanan – simplifies changing SPO site page layout for one or multiple site pages from article to home or home to article. The Command targets pages in the Site Pages list. Updates pages with supported layouts and pages not presently checked-out by others. Essentially remove/add page title placeholder on page. With extension installed, select pages to change, change layout dialog comes up, select pages, click Save and done. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 24, 2022.

Demo Presenter: Sudharsan Kesavanarayanan (NTT) | @sudharsank

Supporting materials:
• Sample - Change Page Layout Command Extension | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-change-page-layouttype

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
6 minutes

layout

sharepoint

extensions

page

updated

modified

registration

xml

pspfx

configuring

24 Feb 2022

In this 25-minute developer-focused demo, Hugo Bernier shares the latest developments making it easier to access and use PnP code samples found in the consolidated Samples Solution Gallery and individual PnP samples repositories. View code structure, complete with syntax highlighting, directly within GitHub without downloading it. Download individual samples as a ZIP instead of cloning the entire repository. Samples now have remote containers, allowing you to run and build in a portable environment pre-configured with all necessary dependencies unique to each. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 24, 2022.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Universal Samples Gallery - Sample Solution Gallery | https://adoption.microsoft.com/sample-solution-gallery
• SPFx Webpart Samples - Samples by Framework | aka.ms/spfx-webparts
• The Matrix - SPFx Compatibility Matrix | https://tahoeninjas.blog/2019/12/30/spfx-compatibility-matrix/
• Documentation - Visual Studio Code for the Web | https://code.visualstudio.com/docs/editor/vscode-web
• Documentation - SharePoint Framework development tools and libraries compatibility | https://docs.microsoft.com/sharepoint/dev/spfx/compatibility
• Tools - Remote – Containers (Preview) | https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
• Documentation - Remote development in Containers | https://code.visualstudio.com/docs/remote/containers-tutorial

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
25 minutes

samples

spfx

git

repositories

project

package

demo

debugging

warning

stuff

22 Feb 2022

In this 12-minute developer focused demo – Patrick Rodgers addresses the question: Do I build a web part or an ACE? Consider Lightweight (mobile first), Immediate (single idea, actionable) and Personal (provide direct value to user). Link out to richer experiences – Teams apps, SharePoint page, SaaS solutions. ACE use cases include – to solicit feedback, track task status, check paystub, clock in/out, to book travel... ACEs can be location based, allow audience targeting, and deliver an organization’s mobile portal experience. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 25, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• PnP JS Library - @pnp/odata/caching | https://pnp.github.io/pnpjs/odata/caching/
• Repo - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Demo - Deep dive on Viva Connections Adaptive Card Extension development – State management – Patrick Rodgers (Microsoft) | @mediocrebowler – 18 January 2022

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
12 minutes

aces

ace

important

dashboard

actionable

applications

basic

reviewing

personal

thinking

10 Feb 2022

In this 9-minute developer-focused demo, David Warner takes information from a list or library, grouped by metadata and displays it in an interactive way. Resources used in the web part created by João Mendes includes PnP React Controls (Accordion, Carousel, File Picker…) and PnPjs (Fluent API, Batching, Caching…). Configure the web part – select library, content type… Simple, elegant, native appearing UI. Desktop and mobile experiences. Powerful as web part reuses existing controls to accelerate development and benefits community when shared. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 10, 2022.

Demo Presenters:
• David Warner II (Catapult Systems) | @DavidWarnerII
• João Mendes (Valo) | @joaojmendes

Supporting materials:
• Sample - Documents Links Accordion | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-document-links-accordion
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react
• Tools – PnP/PnPjs – https://aka.ms/pnpjs

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
9 minutes

presentation

view

preview

pmpjs

interactive

shareable

resources

pdfs

expose

joao

10 Feb 2022

In this 22-minute developer-focused demo, Hugo Bernier shows it is now possible to build and test samples built in any version of SPFx without worrying about dependencies with remote container support in VS Code. Uses Docker Desktop and the Remote containers VS Code extension (Preview). Understand benefits of using containers, and the solution including manifests, certificate trust, rebinding ports. Find out how to tell if sample supports containers, documentation and more. All SPFx samples being containerized, starting with v1.13, then v1.12 … This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 10, 2022.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Documentation - SharePoint Framework development tools and libraries compatibility | https://docs.microsoft.com/sharepoint/dev/spfx/compatibility
• Site - Get Started with Docker | https://www.docker.com/get-started
• VS Marketplace - Visual Studio Code Remote – Containers | https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
• Documentation - VS Code Remote Development | aka.ms/vscode-remote
• Docker Hub - m365pnp/spfx | https://hub.docker.com/r/m365pnp/spfx
• Guidance - Opening a sample using a development container | aka.ms/spfx-devcontainer
• Documentation - Set up your SharePoint Framework development environment | https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
22 minutes

sharepoint

spfx113

vfx

sharing

project

compatible

package

node

repositories

testing

10 Feb 2022

In this 10-minute developer-focused demo, Paolo Pialorsi show viewers 2 simple, quick and powerful examples of how to get and render a list of items from a Microsoft List/SharePoint list either using native SharePoint support in SPFx or using PnPjs into an ACE QuickView card. Uses Type arrays and SP object in PnPjs to get items. Key points to remember – ACEs are built on top of SPFx, also can use PnPjs, and data binding works as usual with Adaptive Card syntax. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 10, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions – Paolo Pialorsi (PiaSys) | @PaoloPia | https://youtu.be/WkFVkFKPDMc?t=1297

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
10 minutes

sharepoint

adapter

card

share

adaptive

packages

loading

consume

data

pmpjs

8 Feb 2022

In this 11-minute developer focused demo – Patrick Rodgers builds on his previous 2 ACE demos by combining the principles of State and Lightweight/Immediate/Personal to make dynamic (live tile-like) experiences in cards. Three ACE's highlight capabilities - text updates, dynamically created SVG images, and rotating content as simple ways to liven up the appearance of your ACE's. Observe code similarities across cards (set a state, use a timer, update state, render result). By design each ACE maintains its own state, autonomous cards. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 8, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Sample - ace-dynamic-card | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-dynamic-card
• Documentation - Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections
• Samples - Viva Connection Adaptive Card Extensions (ACEs) sample repository | https://github.com/pnp/sp-dev-fx-aces

Previous demos from Patrick Rodgers | @mediocrebowler - Adaptive Card Extensions series
• When to build Viva Connections Adaptive Card Extensions – 25th of January | https://youtu.be/F5JcbIlxSpo?t=1562
• Deep dive on Viva Connections Adaptive Card Extension development – State management – 30th of January | https://youtu.be/YG16snk1fJU?t=1718

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
11 minutes

cards

dynamically

adaptive

simulation

demos

functionality

manipulate

ideas

updated

represented

27 Jan 2022

In this 8-minute developer-focused demo, Derek Cash-Peterson shows Creating, Reading, Updating, and Deleting data through an Adaptive Card Extension (ACE) that handles (reformats as necessary) data formatting (strings, arrays, time) from all field types in a SharePoint list. On CardView, there are buttons for “view items” in list and “add item” to list. From a QuickView card, call separate Display, Edit, New cards. Appreciate code for navigating between cards and for data reformatting. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.

Demo Presenter: Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials:
• Sample - basic-card-sharepoint-crud | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-SharePoint-CRUD
• Samples - ace-cardgallery | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ace-cardgallery

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
8 minutes

card

sharepoint

user

sample

display

pmpgs

creating

adaptive

consulting

editing

27 Jan 2022

In this 20-minute developer-focused demo – Paolo Pialorsi cites the fundamentals – data is stored in properties and state, CardView renders a limited set of information, and QuickView renders as much data as you like (many formatting options including conditional and JSON parsing). Step through various samples showing the many functions, keywords, properties in the Adaptive Card syntax used for dynamically formatting and rendering data. Last sample shows rendering user data from Graph into a QuickView card. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Documentation/Tools - A whole new way to deliver UI | https://adaptivecards.io/
• Documentation - Adaptive Cards Template Language | https://docs.microsoft.com/adaptive-cards/templating/language
• Samples - Conferences-Samples | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
20 minutes

adaptive

interactive

adapter

cards

demos

functionality

extensions

view

data

schema

25 Jan 2022

In this 12-minute developer-focused demo, Ejaz Hussain’s ACE sample shows all Microsoft Planner tasks (consolidated view) for logged-in user’s associated plans, deep links to specific tasks directly in Planner, and filters tasks based on selected plan. Uses aysnc dropdown property pane field to fetch current user's associated plans and Microsoft Graph to get plans and tasks. Submit action handling in ACE and Quick View, view multiple tasks within a single Adaptive Card. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 30, 2021.

Demo Presenter: Ejaz Hussain (Content and Cloud) | @EjazHussain_

Supporting material:
• Sample - Planner Tasks | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-PlannerTasks

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
12 minutes

planner

plans

plan

demo

preview

tasks

user

presenting

adaptive

graph

18 Jan 2022

In this 12-minute developer focused demo – Patrick Rodgers answers what is State in SPFx ACEs and how to use State in SPFx apps to maximize initial load times, UI performance, and limit network traffic. State is shared across all views in SPFx ACES. Be mindful of tradeoffs between state and storage. Load as little as you need into State at any given time but load enough to optimize network calls. Cache previous states. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 18, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• PnP/PnPjs Library - @pnp/odata/caching | https://pnp.github.io/pnpjs/odata/caching/
• Samples - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Demo - State referenced in Introduction to Adaptive Card Extensions (ACEs) for Microsoft Viva Connections – Paolo Pialorsi (PiaSys) | @PaoloPia

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
12 minutes

state

react

aces

views

shared

set

demo

conceptually

boilerplate

spfx

4 Jan 2022

In this 13-minute developer focused demo – Vesa Juvonen delivers a quick review of the 3 key experiences in Microsoft Viva Connections, the 3-layer Viva Connections Adaptive Card Extension architecture specifically for mobile, and finally Card design templates created in the last month that you can paste into the Dashboard Card designer or Adaptive Card Designer to create refined mobile experiences in a short time. Step through Viva Connections adaptive cards designs guidance, samples and several modification options. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 4, 2022.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Samples - Adaptive Card templates - design examples | https://github.com/pnp/adaptivecards-templates
• Documentation - Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections
• Tools – Adaptive Cards Designer | https://adaptivecards.io/designer/
• Documentation – Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections
• Documentation - Extend Microsoft Viva Connections | https://docs.microsoft.com/learn/paths/m365-extend-viva-connections/
• Documentation - Designing Viva Connections custom cards for your dashboard | https://docs.microsoft.com/sharepoint/dev/spfx/viva/design/design-intro

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
13 minutes

connect

mobilis

support

completed

application

compare

liked

treatments

miss

customers

30 Dec 2021

In this 17-minute developer-focused demo, Hugo Bernier centers on Property Pane Field types and defining those types. Look at Property Pane fields, helpers, binding, property interface, attributes, indexing attributes, preconfigured/default values and dynamic values. Ways a user can edit a web part – rich text or through properties. Adding methods to first party web parts and defining attributes that enable people to browse, search, subscribe to your web part content. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 30, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Demo - SPFx Design Patterns – Custom Properties (Part 1) | Hugo Bernier (Microsoft) | @bernierh, November 4 | https://youtu.be/8QrZOw4UmL0
• Documentation - Make your SharePoint client-side web part configurable | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane
• Documentation - Integrate web part properties with SharePoint |
https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
17 minutes

configuration

property

pane

presentation

users

sharepoint

helpers

webpart

interface

getpropertypen

30 Dec 2021

In this 12-minute developer-focused demo – Paolo Pialorsi delivers an overview on three ACE CardView types - BaseBasicCardView, BasePrimaryTextCardView and BaseImage CardView. All extensions you create in scaffolding tool rely on these 3 card types and rendering is predefined by Microsoft. In this session, look at properties, capabilities, and code for each type. Essentially BaseBasic (one text field, title and icon), BasePrimary (two text fields, title and icon), BaseImage (one text field, title, icon, image and buttons). This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 30, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Blog – Viva blog | aka.ms/viva/blog
• Documentation - Overview of Viva Connections Extensibility | aka.ms/viva/connections/extensibility
• Samples - Viva Connection Adaptive Card Extensions (ACEs) sample repository | aka.ms/spfx-aces

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
12 minutes

overview

adapter

cardview

card

options

generator

adaptive

extensions

sharepoint

user

16 Dec 2021

In this 5-minute developer-focused demo, Zach Roberts walks viewers through a web part with a single text field that enables search using Microsoft Graph for groups in your tenant and allows users to view the details of a selected group, view a list of group members and the option to export the list of members to a CSV file. Concise code walkthrough. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 16, 2021.

Demo Presenter: Zach Roberts | @ZachSPODev

Supporting materials:
• Sample Repo - Graph Group Viewer | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-groupviewer

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
5 minutes

view

select

populate

group

loading

users

demo

click

microsoft

graph

16 Dec 2021

In this 14-minute developer focused demo, Paolo Pialorsi and Vesa Juvonen step through a new reference (Order management) solution that shows surfacing relevant partner hosted business data from a secured API hosted through Azure AD and how to consume a multi-tenant API within a set of Microsoft Viva Connections Adaptive Card Extensions (ACEs) developed with SharePoint Framework (SPFx). ACE front-end, Azure functions back-end, and Azure AD secures communications. The API needs to be consented and API permissions approved to be called in the customer’s tenant. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 30, 2021.

Demo Presenters:
• Paolo Pialorsi (PiaSys) | @PaoloPia
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Article - Guidance for implementing partner offerings for Viva Connections with ACEs and custom APIs | https://devblogs.microsoft.com/microsoft365dev/guidance-on-implementing-partner-offerings-for-viva-connections-with-aces-and-custom-apis/
• Sample - Consume a multi-tenant API within a set of Microsoft Viva Connections Adaptive Card Extensions (ACEs) | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
14 minutes

sharepoint

viva

manage

connections

adapter

access

multitenant

introduction

providing

possibility

16 Dec 2021

In this 21-minute developer-focused demo – Paolo Pialorsi opens with a high-level overview of Microsoft Viva with full integration with Microsoft Teams for developers. Developers extend Viva Connections with SPFx, exclusively. Step-by-step showing how to create your very first configurable (Property Pane) ACE with SPFx on SharePoint Workbench. Scaffold an SPFx project, register views and step through the files to understand what exactly was created. Subsequent demos will go deep in areas. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 16, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Blog - Microsoft Viva: Empowering every employee for the new digital age | http://aka.ms/viva/blog
• Documentation - Overview of Viva Connections Extensibility | https://aka.ms/viva/connections/extensibility
• Sample Repo - Viva Connection Adaptive Card Extensions (ACEs) sample repository | https://aka.ms/spfx-aces

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
22 minutes

viva

microsoft

application

accessibility

extensions

adaptive

adaptica

interfaces

provides

micro365

10 Dec 2021

In this 7-minute developer-focused demo – see how to monitor expiration dates of secrets and certificates for your applications registered in Azure Active Directory. The web part created by Aimery Thomas displays app IDs, app names, app secrets, certificates and expiration dates in a list. Code walkthrough - see using Graph to retrieve applications/secrets/certificates from AAD. Organize items into a list that’s rendered using React controls. Search, sort and group by app, type and expiration date. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 18, 2021.

Demo Presenter: Aimery Thomas (Avanade) | @aimery_thomas

Supporting materials:
• Samples - Applications Secrets Expiration | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-app-secret-expiration
• Blog - Use Power Automate to Notify of Upcoming Azure AD App Client Secrets and Certificate Expirations | https://techcommunity.microsoft.com/t5/core-infrastructure-and-security/use-power-automate-to-notify-of-upcoming-azure-ad-app-client/ba-p/2406145
• LinkedIn – Aimery Thomas | https://www.linkedin.com/in/aimery-thomas-17418187/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

3 participants
7 minutes

secrets

azure

certificates

api

application

expose

demo

authenticate

expire

sharepoint

7 Dec 2021

In this 15-minute developer-focused demo, Alison Collins’ presentation opens with a demo of her SPFx ReactNewsWebpart that displays thumbnail, article, link to article, preview description, creation date, likes and comments from SharePoint site(s) the logged in user is authorized to view. In properties, select display style (stack, single), show author, and select sites to search. Instructive code walk-through includes – web part updating, news post data storage, calls to get data, and pagination. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 4, 2021.

Demo Presenter: Alison Collins | ReactIntern

Supporting materials:
• Sample - SharePoint News Posts with SPFx | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news
• PnP Samples site - Samples by Framework | https://aka.ms/spfx-webparts
• PnP SPFx Controls - Reusable React controls for your SharePoint Framework solutions | http://aka.ms/pnp-react-controls
• Blog site – Graphgod | https://graphgod.dev/
• LinkedIn - Alison Collins | https://www.linkedin.com/in/alison-collins-53192b219/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
15 minutes

newswebpart

webpart

newsposts

edit

users

demo

features

share

pagination

componentdid

6 Dec 2021

In this 28-minute developer focused demo, Waldek Mastykarz and Vesa Juvonen open with an objective: Build a SPFx 1.13 web part to surface important announcements (from a list) on Viva connections Desktop. Test web part in localhost, bundle and deploy. Developers own the web part’s UI – the HTML and CSS, leaving content owners to add and configure web parts on a page. This demo focuses on Web Parts. Related demos focus on Adaptive Card Extensions and Application Customizers. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 16, 2021.

Demo Presenters:
• Waldek Mastykarz (Microsoft) | @waldekm
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Learn – Extend Microsoft Viva Connections | https://docs.microsoft.com/learn/paths/m365-extend-viva-connections/
• Documentation - Plan, build, and launch a home site for your organization | https://docs.microsoft.com/sharepoint/home-site-plan
• Documentation - Support for Adaptive Cards | https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#support-for-adaptive-cards
• Exercise - Extend Viva Connections desktop with web parts | https://docs.microsoft.com/learn/modules/viva-connections-extend-with-web-parts/4-exercise-extend-viva-connections-desktop-with-web-parts

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
28 minutes

connections

vmware

sharepoint

viva

advanced

vivo

mantec

host

extensibility

discussion

2 Dec 2021

In this 19-minute developer-focused demo. Mikael Svenson and Franck Cornu create and configure a modern Search Center page in minutes using 4 key PnP web parts - Search Results, Search Filters, Search Box and Search Verticals. Get the v4 package on GitHub and add to App Catalog. Add web parts to a page, configure data sources – SharePoint or Microsoft Search, layouts, create search queries, connections between web parts, and refine filtering. Updated package by year end. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 2, 2021.

Demo Presenters:
• Franck Cornu | @FranckCornu
• Mikael Svenson (Microsoft) | @mikaelsvenson

Supporting materials:
• Repo - PnP Modern Search Solution | https://github.com/microsoft-search/pnp-modern-search
• GitHub - PnP Modern Search v4 | https://microsoft-search.github.io/pnp-modern-search/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
19 minutes

webpart

browse

pmp

microsoft

site

query

download

configuration

introduction

v3

2 Dec 2021

In this 19-minute developer-focused demo, Julie Turner educates viewers about the new open-source HtwoO React library she created containing many atomic components built by Stefan Bauer (N8D) | @StfBauer. Step through installing and initializing the library in an SPFx project. Build a Splash card page containing multiple sub-components (modular development). Copy sample code from library into components and add components to a page. Alpha library available now, will go GA shortly. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 2, 2021.

Demo Presenter: Julie Turner (Sympraxis Consulting) | @jfj1997

Supporting materials:
• Tools - Getting Started with HTWOO-REACT | https://lab.n8d.studio/htwoo/htwoo-react/
• Icons - hTWOo UI Icons | https://github.com/n8design/htwoo/tree/main/packages/htwoo-icons
• Article - ABOUT HTWOO UI | https://lab.n8d.studio/htwoo/
• Splash card – Welcome to your hTWOo Splash card | https://lab.n8d.studio/htwoo/htwoo-core/?p=pages-teams-splash-screen

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
20 minutes

h2o

repo

interface

ui

version

packages

helper

introduction

webpart

sharepoint

23 Nov 2021

In this 34-minute developer focused demo, there is a presumption you have already installed the Viva Connections toolkit. Waldek Mastykarz and Vesa Juvonen step through creating an application customizer from scratch, edit the application customizer code, test the application customizer on a page, and deploy it to a Viva Connections site. Unlike web parts that can be positioned and configured by users, Application Customizers are created and positioned by developers, configured by Site Admins and work only with Viva Connections desktop experience. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 23, 2021.

Demo Presenters:
• Waldek Mastykarz (Microsoft) | @waldekm
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Learn module - Extend Microsoft Viva Connections with application customizers | https://docs.microsoft.com/learn/modules/viva-connections-extend-with-app-customizers/
• Tools - Viva Connections Toolkit (SPFx 1.13) | npm install -g @microsoft/generator-sharepoint
• Templates – SharePoint look book | https://lookbook.microsoft.com/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
34 minutes

connections

adapter

extensions

applications

roadmap

dashboard

transcompiling

vivo

adaptive

vm

18 Nov 2021

In this 6-minute developer-focused demo, Sudharsan Kesavanarayanan shows how this application customizer displays a command button named Copy/Move Item(s) in custom lists. Using this option, the items can be copied or moved from one list to another within the site. User maps source and destination fields. Supported field types – Single line of text, Choice, Number, DateTime, & Yes/No. Uses batch method to copy/move (50 items) at a time. Download extension from AppSource.. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 18, 2021.

Demo Presenter: Sudharsan Kesavanarayanan (NTT Digital Business Solutions) | @sudharsank

Supporting materials:
• Repo - Copy/Move Item(s) | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-copy-move-items
• AppSource - Items Replicator | https://appsource.microsoft.com/en-us/product/office/WA200003307

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
6 minutes

replicator

copy

copying

extension

download

version

package

items

demo

microsoft

18 Nov 2021

In this 19-minute developer-focused demo. The art-of-the-possible is revealed by Derek Cash-Peterson! Layout options on 11 Adaptive Card Extensions (ACE). Layouts - agenda, company news, expense report, flight itinerary, form sample, image rotator, stock ticker, task list, Twitter card, video card and weather. Focusing specifically on video card, it was initially created/tested in Adaptive Cards Designer. Then the JSON was copied into the ACE. Handling dynamic data is discussed in Q&A. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 18, 2021.

Demo Presenter: Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials:
• Repo - ace-cardgallery | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ace-cardgallery
• Adaptive Cards - Samples and Templates | https://adaptivecards.io/samples/
• Adaptive Cards – Designer | https://adaptivecards.io/designer/
• Video Demo - Building a COVID attestation solution for Microsoft Teams and Viva Connections with SPFx | https://www.youtube.com/watch?v=SAITSnFiAg8
• Sample - Covid Self-Attestation Microsoft Teams Personal App | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-teams-covid

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

3 participants
20 minutes

cards

showcase

demo

aces

adapter

sharepoint

adaptive

dashboard

view

app

15 Nov 2021

In this video, you can see how to build Adaptive Card Extensions (ACEs) for Microsoft Viva Connections consuming Azure AD secured multi-tenant APIs.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Scenario ACEs Implementation Details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/ACEs-Implementation-Details.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
8 minutes

adapter

card

application

sharepoint

backend

aadhtp

adaptive

access

upload

admin

15 Nov 2021

In this video, you can see how to develop Azure AD secured multi-tenant APIs that you can consume from Adaptive Card Extensions (ACEs) for Microsoft Viva Connections.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Scenario API implementation details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/APIs-Implementation-Details.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
8 minutes

authentication

backend

api

authorize

access

client

card

application

sdk

azure

15 Nov 2021

In this video, you can see an introduction about building Adaptive Card Extensions (ACEs) for Microsoft Viva Connections using Microsoft SharePoint Framework (SPFx). This is the first video of a series of 4 episodes about consuming Azure AD secured multi-tenant APIs from ACEs.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
6 minutes

sharepoint

application

cards

manage

configured

package

access

configure

connections

pmp

15 Nov 2021

In this video, you can see how to register Azure AD secured multi-tenant APIs that you can consume from Adaptive Card Extensions (ACEs) for Microsoft Viva Connections. Specifically, you can learn how to expose an API from an Azure AD registered app, how to host the API on Azure as a Function App, and how to configure SharePoint Framework (SPFx) to consume it.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Scenario ACEs Implementation Details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/ACEs-Implementation-Details.md
- Scenario APIs Implementation Details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/APIs-Implementation-Details.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
10 minutes

registrations

authorization

sharepoint

application

access

permissions

client

authentication

admins

upload

9 Nov 2021

During this 30-minute developer focused demo, Waldek Mastykarz and Vesa Juvonen show start-to-end how to configure Viva Connections to communicate important announcements to employees. Designate a home site and create an announcements list on SharePoint. Then create/scaffold a project, configure in VS Code how important announcements are surfaced, test card functionality in localhost, package and install card in App Catalog, deploy card to tenant and to site, and add card to dashboard. Develop one card used in both desktop and mobile. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 9, 2021.

Demo Presenters:
• Waldek Mastykarz (Microsoft) | @waldekm
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Learn - Extend Microsoft Viva Connections | https://docs.microsoft.com/learn/paths/m365-extend-viva-connections/
• Documentation - Plan, build, and launch a home site for your organization | https://docs.microsoft.com/sharepoint/home-site-plan

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
30 minutes

module

introduction

implementing

demonstrate

connections

vms

vivo

courser

microsoft

minutes

4 Nov 2021

In this 13-minute developer-focused demo, Anoop Tatti shows how he built an Adaptive Card Extension (ACE) to keep Tenant Admins up to date on tenant service health via mobile and desktop devices. The extension uses card view and multiple quick views to display affected issues and services in a tenant. Microsoft Graph is used to get service health data (issues). Submit action handling in ACE and Quick View, theme-based display. Complete and neatly delivered code walkthrough. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 4, 2021.

Demo Presenter: Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials:
• Sample - Service health | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Service-Health
• Video - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY
• Ignite Session – Get started with Microsoft Viva Connections Extensibility – Vesa Juvonen & Waldek Mastykarz | https://aka.ms/CONLL112

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
13 minutes

demo

platform

app

adapter

servicehealth

card

admins

present

associated

views

4 Nov 2021

In this 11-minute developer-focused demo, Hugo Bernier delivers a refresher on Out-of-Box (OOB) Property Field Types – Boolean, Choice, Slider… with practical tips for deciding which types to use to deliver concise and predictable options to user. This demo was cut short due to technical issues, so Part 2 to be delivered in a future call, will focus on custom - not out-of-the-box Property Field Types you may want to add to your solution. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 4, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Documentation - Make your SharePoint client-side web part configurable | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane
• Documentation - Integrate web part properties with SharePoint | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
11 minutes

properties

configuration

refresher

topics

implement

interface

exposing

sessions

slider

spfx

21 Oct 2021

In this 15-minute developer-focused demo, Anoop Tatti deliveres a sample web part and a sample ACE, that display the first few sentences of a news article in a carousel on a SharePoint page (desktop or mobile) or in cards in a Viva Connections Dashboard (Card view with deep link to full article). Control number sentences displayed - actual or curator authored sentences. Clean code to get articles, to extract sentences, to render. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 21, 2021.

Demo Presenter: Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials:
• Webpart sample - react-at-a-glance | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-at-a-glance
• Sample - News article content at a glance | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-At-a-glance
• Video - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
15 minutes

webpart

demo

web

preview

sharepoint

interface

glance

articles

bbc

ace

21 Oct 2021

In this 16-minute developer-focused demo, Hugo Bernier explains how Property Panes are web parts designed specifically to configure affiliated web parts. Types of property panes and code reviewed in this demo include Single, Accordion (collapsible sections), and Steps (options presented shaped by previous selectins). Ease of use is a primary design criterion. When to use/not use a property panes is predicated on directness. See property pane samples in the SPFx samples repository. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 21, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Related materials:
• Survey - Next SPFx Design Patterns Topic – November 4, 2021 | https://forms.office.com/pages/responsepage.aspx?id=v4j5cvGGr0GRqy180BHbR8ke1rGfE-VNsUHrnMWCrL5UN1dHRUYxV01CUkJESktKMENBQldURVpRWiQlQCN0PWcu&web=1&wdLOR=cC640D9E0-C403-405A-9EF1-D9F43B6ADF90

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
16 minutes

users

property

render

sharepoint

configuration

webpart

developer

pane

resolution

parts

12 Oct 2021

In this 13-minute developer focused demo, Vesa Juvonen shows viewers the Teams Toolkit v2.7 for VS Code, in preview, has native support for debugging SharePoint Framework solutions directly inside the Microsoft Teams workbench! In this walk through, Vesa uses Toolkit v2.7 to quickly create a Teams app hosted in Azure, sets a breakpoint, runs npm install and gets a debug error. Great, working as expected! Among other things, demo exemplifies new generation of multi-product toolkits. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 12, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Tools - Teams Toolkit (Preview) | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension
• Documentation - Build apps with the Teams Toolkit and Visual Studio Code | https://docs.microsoft.com/microsoftteams/platform/toolkit/visual-studio-code-overview

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
13 minutes

microsoft

sharepoint

toolkit

debugging

demo

dashboard

hosting

v2

package

designing

7 Oct 2021

In this 12-minute developer-focused demo, Paolo Pialorsi delivers an inspirational demo/sample (react-teams-lead-dashboard) showing how to create a dashboard using tools, libraries and techniques for developing “modern” Microsoft 365 solutions. Uses Teams Personal app (configurable on per user basis and with multiple tabs), SharePoint client-side web part, UI fully integrated with Microsoft Teams and automated provisioning of fields, lists through Microsoft Graph. Render dashboard in Teams or SharePoint Online. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 7, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Sample - Lead Assist Dashboard | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-lead-dashboard
• Documentation - Build for Microsoft Teams using SharePoint Framework | https://docs.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview
• Documentation - Use Microsoft Graph in your solution | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://docs.microsoft.com/graph/toolkit/overview
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Article - The easiest way to store user settings of your Microsoft 365 app | https://blog.mastykarz.nl/easiest-store-user-settings-microsoft-365-app/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
12 minutes

micro365

sharepoint

toolkit

demo

micrograph

tasking

sample

provisioning

dashboard

package

7 Oct 2021

In this 15-minute developer-focused demo, slow page loads, slow Teams apps, is often attributed to slow web part rendering and commonly due to waiting on data. Hugo Bernier reminds viewers that OOB rendering is typically synchronous. The fix - asynchronous rendering with isRenderAsync. Referenced samples in this demo use this method. Tips for better user experience include using progress indicators (spinners, bars, shimmer interface) to make rendering seem faster. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 7, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Tools – Fluent UI - Shimmer web | https://developer.microsoft.com/fluentui#/controls/web/shimmer
• Sample - React HTM (Hyperscript Tagged Markup) Templating | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-htm-templating
• Sample - Microsoft Graph People Search | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msgraph-peoplesearch

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
15 minutes

renders

users

asynchronous

webpart

browser

sharing

interface

performance

monitor

innovating

1 Oct 2021

In this 14-minute developer-focused demo, Andrew Connell efficiently shows the steps to take an existing SPFx project using TSLint and move it over to ESLint and dump IE11 at same time. Basically, install and configure ESLint, and update gulp tasks - effectively telling TypeScript complier to use modern js target and update referenced libraries. Then appreciate Andrew’s ESLint preset for SPFx that automates the update! Bonus - updating yields smaller and faster bundles. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 9, 2021.

Demo Presenter: Andrew Connell (Voitanos) | @andrewconnell

Supporting materials:
• Article - Get with the times & ditch TSLint in favor of ESLint in SharePoint Framework projects | https://vtns.io/ditch-eslint-spfx
• Article - Ditch TSLint for ESLint in SPFx projects in one simple step | https://vtns.io/ditch-eslint-spfx-preset
• Article - Optimize bundles by disabling IE11 support in SPFx projects | https://vtns.io/disable-ie11-spfx

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
15 minutes

tslint

ts

modernizing

typescript

sharepoint

eslant

demos

lint

project

explains

28 Sep 2021

In this 13-minute developer-focused demo, Fabio Franzini suggests there are 2 common approaches to web part UI development – use a UI framework or use a templating system. Now there’s option 3: React HTM Templating web part that uses Fluent UI components written in React, no wrapper required. Renders the React control as a template. Essentially JS code evaluated through the Function constructor. Review properties, HTML editing, and code in the demo of this PnP sample. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 9, 2021.

Demo Presenter: Fabio Franzini | @franzinifabio

Supporting materials:
• Sample - React HTM (Hyperscript Tagged Markup) Templating | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-htm-templating

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
13 minutes

ui

toolkit

html

web

template

markup

handlebar

layout

hyperscript

controls

28 Sep 2021

In this 20-minute developer-focused demo, Ed Averett gives viewers a tour of Microsoft Viva - an Employee Experience Platform (EXP). Latest Viva Connection basics (more than you have seen previously), learn about integrated experiences, view the dashboard, default support for Teams Personal Apps & Bots, custom card capabilities and supports (extensibility). Opportunities for Information worker and front-line worker organizations. Step through Dashboard page configuration (no code) and card creation in Card Designer. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 28, 2021.

Demo Presenter: Ed Averett (Microsoft) | @Ed_Averett

Supporting materials:
• Documentation - Overview: Viva Connections (Preview) | http://aka.ms/viva/connections/gettingstarted
• Blog - Announcing public preview of SharePoint Framework 1.13 – with Viva Connections Extensibility | https://aka.ms/viva/connections/developer/preview
• Documentation - Overview of the SharePoint Framework | http://aka.ms/spfx
• Documentation - Overview of Viva Connections Extensibility | http://aka.ms/viva/connections/extensibility
• Documentation - Authenticate users in Microsoft Teams | https://aka.ms/viva/connections/teams/SSO
• Documentation - Create deep links | https://aka.ms/viva/connections/teams/deeplinks

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
20 minutes

viva

connections

microsoft

intranets

technologies

admin

enterprise

isvs

extensibility

journey

23 Sep 2021

In this 11-minute developer-focused demo, Fabio Franzini shows 3 ways to change shading using the Fluent UI Theme variant inside a web part. 1) Use colors applied to the section where the web part is present, 2) Select color variations based on theme applied at Site level or 3) Apply variations set to the json of a custom theme, created through the Fluent UI Theme Designer tool. For all, change color variation from none, neutral, soft and strong. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 23, 2021.

Demo Presenter: Fabio Franzini | @franzinifabio

Supporting materials:
• Sample - React Fluent UI Theme Variant | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-theme-variant
• PnP SPFx Controls - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• Tools - @fluentui/scheme-utilities – npm | https://www.npmjs.com/package/@fluentui/scheme-utilities

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
11 minutes

sharepoint

ui

variant

demo

user

section

manage

editor

highlight

themeservice

21 Sep 2021

This 23-minute developer demo focuses on resetting design and default experiences through the modernization of default SPFx web part templates. Vesa Juvonen shows latest UX updates that are - fully sectioned, color aware, detects if in SharePoint or Teams environment, have on page guidance for page creators, and theme awareness. Updates to be included in upcoming SPFx v1.14 rolling out this Fall. Thoughts on UX? Join the discussions in SP Dev docs. Q&A and bonus - glimpse at the Viva Dashboard (web part) in Teams. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 21, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Discussions - SharePoint/sp-dev-docs (github.com) | https://github.com/SharePoint/sp-dev-docs/discussions

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
23 minutes

sharepoint

sharepoints

share

framework

microsoft

version

dependencies

project

hosting

dashboards

14 Sep 2021

In this 12-minute developer-focused demo, Yi Han reminds or informs viewers that with the mid-August GA release, My Apps and Sharepoint Store pages have been modernized along with the experience for requesting & installing SPFx apps. User and the administrator (tenant wide) experiences in both classic and modern UIs are shown. New capabilities - automatic sign on, automatic hosting, consistent dev experience and industry standard tooling. Nice wrap up with FY22 Roadmap. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 14, 2021.

Demo Presenter: Yi Han (Microsoft)

Supporting materials:
• Blog - Explore and deploy SharePoint Framework solutions from partners in SharePoint (Microsoft 365) | https://techcommunity.microsoft.com/t5/microsoft-sharepoint-blog/explore-and-deploy-sharepoint-framework-solutions-from-partners/ba-p/2645289

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
12 minutes

modernize

modernizing

sharepoint

apps

share

package

workflow

spfx

presentation

new

9 Sep 2021

In this 10-minute developer-focused demo, Yannick Reekmans shows how his Lightbox Image Gallery web part, connects to SharePoint document/picture library, handles folders/sub-folders, has breadcrumb navigation, and lightbox-style image browsing. Works with Viva desktop in Microsoft Teams as well. Developed using SharePoint Framework (SPFx) and PnPjs. Code structure is reviewed. From property pane, select document or image library to connect. Demonstrates how with little code and using PnP components, one can deliver an elegant result! This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 9, 2021.

Demo Presenter: Yannick Reekmans (Qubix) | @YannickReekmans

Supporting materials:
• Article - SPFx Lightbox Image Gallery web part, v1.0.0 | https://blog.yannickreekmans.be/spfx-lightbox-image-gallery-web-part-v1-0-0/
• Repo - SharePoint Lightroom Image Gallery Web Part | https://github.com/YannickRe/spfx-lightbox-image-gallery
• Library - PnP/PnPjs | https://pnp.github.io/pnpjs/
• Controls - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Package - react wrapper for: lightgallery.js | https://github.com/VLZH/react-lightgallery

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

1 participant
10 minutes

sharepoint

webpart

demo

usability

view

layouts

thumbnails

configure

pmpgs

interfaces

1 Sep 2021

In this 10-minute developer-focused demo, Giuliano De Luca delivers an SPFx web part used for saving user settings or preferences (i.e., dark/light theme, temporary secrets, etc.) in the OneDrive Apps folder. The web part calls Microsoft Graph API. Preference changes made in any of the user’s devices are reflected across the user’s other devices. Thorough code walk-through. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 12, 2021.

Demo Presenter: Giuliano De Luca | @DeLucaGiulian

Supporting materials:
• YouTube Channel - Giuliano De Luca | https://www.youtube.com/giulianodeluca
• Blog - Giuliano De Luca | https://delucagiuliano.com/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
10 minutes

sharepoint

onedrive

save

drive

users

download

folder

apps

settings

microsoft

26 Aug 2021

In this 37-minute developer-focused demo, Patrick Rodgers delivers a quick overview on how to think about ACEs (Adaptive Card Extensions) – container control and views (Card and Quick). He then steps through three scenarios (samples) UI and code. 1) Adding a deep link to card or quick view with basic properties, 2) Company news card - get information and display it in carousel, and 3) Microsoft Teams chat – notifications with multiple card views and quick views. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 26, 2021.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Resource site – Adaptive Cards | https://adaptivecards.io/
• Mozilla MDN Web Docs - Destructuring assignment | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
• TypeScript site - Object destructuring | https://www.typescriptlang.org/docs/handbook/variable-declarations.html#object-destructuring
• Sample - basic-card-deep-link | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-basiccard
• Sample - Company News ACE | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-companynews
• Sample - teams-chat-card | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-chat

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
37 minutes

sharepoint

applications

cards

interfaces

customizer

connections

dashboard

interactivity

viva

view

23 Aug 2021

For this 23-minute developer-focused demo, Omar El-Anis showcases integration of PnP Controls delivering new capabilities. Tiles v2 – displays a group of responsive flex tiles that can be configured to navigate to different URLs. REACT Hero – provides a customizable Hero webpart that displays 5 images in a stand-alone carousel view. Both web parts use a stored collection from PnP PropertyFieldCollectionData control, custom field rendering control, file/icon pickers and fluid flex layout. Site theme selectable in Tiles v2. Thorough code walkthrough. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 29, 2021.

Demo Presenter: Omar El-Anis | @omarelanis

Supporting content:
• Omar’s blog – SP Bytes | http://www.spdeveloper.co.uk/
• Sample - Hero web part | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hero-webpart
• Sample - Tiles V2 | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2
• Controls – PropertyFieldCollectionData control | https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData.html

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
23 minutes

configure

customize

tweaks

tiles

icons

hover

screen

view

web

starter

12 Aug 2021

For this 15-minute developer-focused demo, Julie Turner and Derek Cash-Peterson walk through an app for booking limited rooms by authorized users. See app in Teams and then view the ACE (Adaptive Card Extension) cards with deep links to other Teams apps, in the Viva Connections Dashboard. ACE cards can be targeted to specific users. Look at code for CardView, QuickVew, Card State, button actions and at how data is accessed and merged with template. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 12, 2021.

Demo Presenters:
• Julie Turner (Sympraxis Consulting) | @jfj1997
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting content:
• Samples - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Get Started – Adaptive Cards | https://adaptivecards.io

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
15 minutes

reservations

conference

attendees

planning

rooms

demoing

scheduling

users

app

executive

12 Aug 2021

In this 15-minute developer-focused demo, Hugo Bernier and João Mendes show off a new application extension that allows a user to receive activity notifications from selected lists or libraries – i.e., add/delete/modify document in library, approval completed, etc. Easily view and clear notifications. Updates screen only when there is new notification. Uses Socket.io service courtesy of Microsoft Graph to manage list subscriptions and notifications and then uses getListActivities to get particulars on the activity. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 12, 2021.

Demo Presenters:
• Hugo Bernier (Microsoft) | @bernierh
• João Mendes (Storm Technology) | @joaojmendes

Supporting materials:
• Sample - My Lists Notifications | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-my-lists-notifications
• Article - MY LISTS NOTIFICATIONS | https://joaojmendes.com/2021/07/11/my-lists-notifications/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

joao

presentation

sharepoint

interface

user

personal

implementation

demo

design

editing

5 Aug 2021

In this 10-minute developer-focused demo, David Warner calls on the Enhanced List Formatting web part that extends the OOB List web part to enhance CSS Styles only on selected pages rather than across site collection. Allows you to use pseudo classes and elements along with animations. Add CSS Styles in Property pane. Examples shown include hover effects (animations), transform labels, community Polaroids, and custom fonts. Examples are CSS only, no JS. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 5, 2021.

Demo Presenter: David Warner II (Catapult Systems) | @DavidWarnerII

Special thanks to: Hugo Bernier (Microsoft) @bernierh, for his contributions on the development of this web part.

Supporting materials:
• Sample - Enhanced List Formatting| https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting
• CSS - Pseudo-elements | https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
• CSS - Pseudo-classes | https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
• CSS - animation | https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
10 minutes

enhanced

extension

styles

html

spider

formatting

css

spfx

super

users

21 Jul 2021

In this 8-minute business user focused demo, Emily Mancini delivers an overview of a COVID-19 Attestation solution that can help your organization manage the status and contact tracing of your employees through an easy to use Check-In form and front desk dashboard. The video starts with an overview of the challenges this solution addresses and then gives a step by step review of all the features.

Demo Presenter: Emily Mancini (Sympraxis Consulting) | @EEMancini

Supporting documents:
• Solution - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Stay connected:
• Twitter - https://twitter.com/microsoft365dev
• YouTube - https://aka.ms/M365DevYouTube
• Microsoft 365 Developer Blog - https://aka.ms/M365DevBlog
• Microsoft 365 PnP Blog - https://aka.ms/m365pnp/community/blog

1 participant
8 minutes

stressful

attestation

colleagues

responsibilities

support

office

personal

home

covid19

returning

21 Jul 2021

In this 10-minute business user focused demo, Emily Mancini delivers an overview of a World Clock solution that can help you and your teams manage scheduling meetings across time zones. The video starts with an overview of the challenges this solution addresses and then gives a step-by-step review of all the features.

Demo Presenter: Emily Mancini (Sympraxis Consulting) | @EEMancini

Supporting documents:
• Solution - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Stay connected:
• Twitter - https://twitter.com/microsoft365dev
• YouTube - https://aka.ms/M365DevYouTube
• Microsoft 365 Developer Blog - https://aka.ms/M365DevBlog
• Microsoft 365 PnP Blog - https://aka.ms/m365pnp/community/blog

1 participant
10 minutes

clock

scheduling

workflow

workplace

coworkers

world

communicate

distractions

app

collaborative

15 Jul 2021

Through this 26-minute developer-focused demo, Julie Turner and Derek Cash-Peterson walks viewers through a personal app that collects information from users and provides a custom dashboard for working with the results. Dashboard has a Viva Connection COVID-19 attestation card built with Adaptive Card Extensions (ACE) and SPFx v1.13. From Card View, users answer attestation questions in Quick View. A cool capability - questions on Quick View card can be updated by Admin without having to modify Quick View template! This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 15, 2021.

Demo Presenters:
• Julie Turner (Sympraxis Consulting) | @jfj1997
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting content:
• Sample - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
26 minutes

administer

offices

application

risk

exposing

consulting

attestations

home

contact

fever

17 Jun 2021

During this 21-minute developer-focused demo, Julie Turner and Derek Cash-Peterson deliver a Team Time Clock app as a Teams app, Personal app and as a Viva Dashboard Card (SPFx web part + Adaptive Card extension) based on a solution originally created by Bob German (Microsoft) @bob1german. On Card, see high level information (people and time) and deep link into Teams to schedule meeting experience. Based on when people prefer to meet (green times), select time by aligning green fields in time slot. Full code walkthrough, many features. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 17, 2021.

Demo Presenters:
• Julie Turner (Sympraxis Consulting) | @jfj1997
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials:
• Sample - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Article - hTWOo v0.3.0 released – Teams Splash Cards, Placeholder and demo | https://n8d.at/htwoo-v0-3-0-release
• Tool - ABOUT HTWOO UI | http://my.n8d.at/hTWOo

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
21 minutes

scheduling

schedule

clock

time

app

timelines

project

work

users

remote

17 Jun 2021

In this 13-minute developer-focused demo, Sergei Sergeev shows a SPFx command line utility, that accelerates SPFx development by modifying your SPFx project to run a serve command immediately upon Save. Reduces SPFx build pipeline rebuild/reload time from greater than 7 seconds to less than 1 second by applying updates only to changes rather than rebuilding entire project. Install CLI, spfx-fast-serve then apply fast-serve to your SPFx project. Presenter shows and explains project file modifications. Recently added hot model replacement (HMR) feature. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 17, 2021.

Demo Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:
• Repo - SPFx Fast Serve Tool | https://github.com/s-KaiNet/spfx-fast-serve

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
14 minutes

server

spfx

execute

process

serve

project

task

sharepoint

faster

gulp

11 Jun 2021

In this 14-minute developer-focused demo, Stefan Bauer has developed an open-source community driven Fluent UI driven framework that’s just HTML, CSS and a bit of JS. Simple to use in the Microsoft 365 ecosystem, same branding as Fluent UI. This is a complete component library - tables, typography, avatars, icons, dialogs and more. Stefan steps through the HTWOO install – a npm package and 2 theme aware SPFx web parts. There is complete documentation and samples. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on May 27, 2021.

Demo Presenter: Stefan Bauer (N8D) | @StfBauer

Supporting documents:
• Blog Post - HTWOO UI launched – Fluent Design in HTML and CSS | https://my.n8d.at/whyhtwoo
• Documentation: ABOUT HTWOO UI | http://my.n8d.at/hTWOo
• Repo: HTWOO UI framework | https://github.com/n8design/htwoo
• Samples: htwoo-samples | https://github.com/n8design/htwoo-samples

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
14 minutes

ui

interface

stylesheet

framework

sharepoint

customizations

hto

mockup

documentations

webpart

10 Jun 2021

In this 11-minute developer-focused demo, Dan Toft shares a very simple web part that lets users view, add and delete remote event receivers in lists. Review what is a Remote Event Receiver, Strengths and Weaknesses, and when/not to consider using Power Automate to accomplish task. Use the sample to quickly identify Event Receivers in lists across a tenant without having to connect to PowerShell or go to a REST API. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on June 10, 2021.

Demo Presenter: Dan Toft (Evobis ApS) | @tanddant

Supporting documents:
• Samples - Remote Event Receiver Manager | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-remote-event-receiver-manager
• Documentation - Use remote event receivers in SharePoint | https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/use-remote-event-receivers-in-sharepoint

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
11 minutes

remote

remotely

sharepoint

authentication

host

pnp

demo

executing

setup

endpoint

8 Jun 2021

During this 13-minute developer-focused example, Nick Brown’s web part a.k.a. the Teams Membership Updater tool – enables Teams’ site owners to pull member updates from a selected CSV file. Upon load, the web part calls Microsoft Graph to pull the list of Teams you are a member/owner. The tool calls Graph batch functions to remove orphaned members and then to add new members. Membership updater uses SPFx Reusable controls and react-papaparse. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 20, 2021.

Demo Presenter: Nick Brown (Cardiff University) | @techienickb

Supporting materials:
• Sample - Teams Membership Updater | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-membership-updater
• Documentation - Combine multiple requests in one HTTP call using JSON batching | https://docs.microsoft.com/en-us/graph/json-batching

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
13 minutes

sharepoint

cardiff

powerpoint

membership

downloaded

upload

users

demo

email

pnpjs

3 Jun 2021

In this 22-minute developer-focused demo, Luca Bandinelli and John Nguyen introduce viewers to desktop and mobile instances of Viva Connections Dashboard. To create Dashboards, open your Communications site, add a Dashboard web part – a.k.a. Dashboard or Dashboard Authoring Tool, then add cards (apps, links and Card Designer) to Dashboard. Configure each card in property pane. The Card Designer card – allows end-users to create no code custom cards leveraging Adaptive Cards Designer in backend. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 3, 2021.

Notice that the features shown in this video will be released in summer 2021. At the time of the video recording, they were only available for preview program attendees.

Demo Presenters:
• Luca Bandinelli (Microsoft) | @BandinelliLuca
• John Nguyen (Microsoft)

Supporting materials:
• Viva Connections https://aka.ms/VivaConnections
• Register - Register for Viva Connections developer platform updates and private Beta | http://aka.ms/viva/connections/preview/register
• Designer – Adaptive Cards | https://adaptivecards.io/designer/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
22 minutes

connect

dashboarding

dashboard

access

accessibility

users

applications

sharepoint

extensibility

vivo

3 Jun 2021

During this 16-minute developer-focused demo, Luca Bandinelli and John explain how SPFx powered cards connect users to resources. Native 1st party cards – include Teams apps, SharePoint Pages, Tasks, Shift, Card Designer, Web Links, etc. and 3rd party custom cards - Adaptive Card Extensions (ACEs) – built using a new SPFx component type. Then deep dive into card templates and code. Developers can build cards from scratch or start with existing personal apps or bots, SPFx solutions and web parts. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 3, 2021.

Notice that the features shown in this video will be released in summer 2021. At the time of the video recording, they were only available for preview program attendees.

Demo Presenters:
• Luca Bandinelli (Microsoft) | @BandinelliLuca
• John Nguyen (Microsoft)

Supporting materials:
• Viva Connections https://aka.ms/VivaConnections
• Register - Register for Viva Connections developer platform updates and private Beta | http://aka.ms/viva/connections/preview/register
• Designer – Adaptive Cards | https://adaptivecards.io/designer/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
16 minutes

connect

adapter

dashboard

cards

access

vivo

application

extensibility

render

immersive

20 May 2021

In this 10-minute developer-focused demo, Sébastien Levert shows how to use the Microsoft Graph Toolkit SharePoint provider to access and leverage new functionality of Graph JS SDK in SPFx. A web part sample developed using React Framework showcases how to use the latest microsoft-graph-client in SPFx. The client enables throttling management (no 429s), Chaos management, uses latest types, getting RAW responses from API, Content-Type is already set for PUT, and a lot more! This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 20, 2021.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Article - Using the latest microsoft-graph-client in SPFx | https://www.sebastienlevert.com/2021/04/18/latest-microsoft-graph-client-spfx/
• Library - Microsoft Graph JavaScript Client Library | https://github.com/microsoftgraph/msgraph-sdk-javascript
• Sample - Graph MGT Client | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-mgt-client

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
10 minutes

sharepoint

middlewares

toolkit

graph

latest

capabilities

microsoft

sdk

improve

manage

20 May 2021

In this 15-minute developer-focused demo, André Lage introduces viewers to his OneDrive finder - find and explore OneDrives, folders and files using Microsoft Graph Toolkit. Use Graph queries to get hostname, Sites on hostname, OneDrive item-id, and Sites Root item-id. The web part uses 2 beta controls from MGT for search – Mgt-File-List and MGT-File. Refine search results by file extension, items on page, etc. Display style – light/dark mode. Recommendations on managing file list cache and permissions. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 20, 2021.

Demo Presenter: André Lage (Datalynx AG) | @aaclage

Supporting materials:
• Article - Navigate OneDrive data with Microsoft Graph and Mgt-File-List Beta version | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/navigate-onedrive-data-with-microsoft-graph-and-mgt-file-list/ba-p/2296730
• Sample – OneDrive finder | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-onedrive-finder

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
16 minutes

having

council

amighty

good

come

allowed

critique

control

treaty

tai

19 May 2021

During this 11-minute developer-focused example, Luis Mañez’s web part renders images (cycles) them with related text on a page like Instagram Stories, as a way to engage social media adept employees. Text, images, and author details are stored in a SharePoint list. The web part uses an existing open-source React component called “react-insta-stories” and several Microsoft Graph Toolkit (MGT) components. The sample is available presently in the PnP Samples repository. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 6, 2021.

Demo Presenter: Luis Mañez (ClearPeople) | @luismanez

Supporting materials:
• Blog post - Community sample: Engage your users with SharePoint stories/reels | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/community-sample-engage-your-users-with-sharepoint-stories-reels/ba-p/2325128
• Repo - Company Stories Webpart | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-stories

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
11 minutes

presentation

surprise

sharepoint

story

demo

package

content

edit

insta

18 May 2021

In this 12-minute developer-focused demo, Alison Collins and Sam Collins step through this handy web part that helps a logged-in user quickly find their Microsoft Teams and Microsoft 365 Groups sites/content. For a selected site, there are options to go to site, mail, calendar, or Planner. Match site color theme with one click. Filter by public, private or all Groups/Teams. The main React component is MicrosoftGroups.tsx. A brilliant code walk-through by first time presenter Alison Collins. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 6, 2021.

Demo Presenters:
• Alison Collins
• Sam Collins (Coupled Technology) | @samc148

Supporting materials:
• Alison’s Blog: Graphgod | https://graphgod.dev/
• Repo - All Microsoft 365 Groups and Teams with SPFx | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-groups-teams

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

4 participants
12 minutes

sharepoint

presentation

view

users

sample

microsoft

webpart

switchgroup

themes

pnp

6 May 2021

In this 5-minute developer-focused demo, Mohamed Derhalli begins in the Properties Pane where one selects a video, adds banner title text and colors it, adjusts video brightness and banner height. This elegantly coded modern web part was built with SPFx using standard PnP property pane controls in less than 3 hours. Add the web part to the top of your pages. The web part has only one functional component named: VideoBackground. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 6, 2021.

Demo Presenter: Mohamed Derhalli (BDO Canada)| @MohamedDerhalli

Supporting materials:
• Blog post - Introducing React Video Banner Web Part | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/introducing-react-video-banner-web-part/ba-p/2329002
• Repo - Video Banner | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-video-banner

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
5 minutes

sharepoint

demo

slides

flicks

design

build

techniques

easy

platform

pnp

29 Apr 2021

In this 12-minute Developer-focused demo, Sergei Sergeev steps through a Visual Studio Code and Node.js extension that keeps resources in sync by making sure all localization labels inside SharePoint Framework project files across the organization are consistent. The extension is automatically activated for your SPFx solutions and checks, whether localization resource files (en-us.js, nl-nl.js, etc.) follow the pattern, defined in the corresponding strings.d.ts. Prevents accidental or refactoring errors in SPFx solutions. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on April 29, 2021.

Demo Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:
• Blog - SPFx Check Locale - a nice option to check your localization consistency across SharePoint Framework solution | https://spblog.net/post/2021/04/29/spfx-check-locale-a-nice-option-to-check-your-localization-consistency-across-sharepoint-framework-solution
• VS Code Extension - SPFx Check Locale | https://marketplace.visualstudio.com/items?itemName=s-kainet.spfx-check-locale
• Repo - Checks that your localization files match the schema inside mystrings.d.ts | https://github.com/s-KaiNet/spfx-check-locale

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
12 minutes

localization

sharepoint

configuration

label

errors

webpart

interface

sync

project

node

22 Apr 2021

During this 13-minute Developer-focused example, Mike Homol opens by showing the capabilities of the normal page properties web part followed by capabilities of the new Advanced Page Properties web part. New properties support theme variants, capsule format for list options, support for image fields, for links, for currency, and for dates. Tour the code for tracking available properties for drop downs, tracking property selections and parameters for refreshing and rendering the data. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on April 22, 2021.

Demo Presenter: Mike Homol (ThreeWill) | @homol

Supporting materials:
• Article - Improving the Page Properties web part | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/improving-the-page-properties-web-part/ba-p/2256651
• Repo - Advanced Page Properties | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-advanced-page-properties

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
13 minutes

users

client

provisioning

functionality

page

modernize

consulting

web

metadata

sharepoint

22 Apr 2021

In this 13-minute Developer-focused demo, Vesa Juvonen outlines v1.12.1 updates to SPFx that include support for Node v14, Gulp 4, Microsoft Teams SDK v1.8 and for creating Microsoft Teams meeting apps. Demos – 1) Increased access to page structure and context to avoid DOM dependency (web part detects DOM structure and selects output size to fit allotted space) and 2) SPFx support for Complex Microsoft Teams solutions (manifest included in Package to synchronize with Teams App catalog). This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on April 22, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Framework - v1.12.1 public preview \ npm install –g @microsoft/generator-sharepoint@next

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
13 minutes

sharepoint

share

microsoft

backend

version

applications

users

hosting

package

convenient

20 Apr 2021

In this 15-minute Developer-focused demo, Albert-Jan Schot shows how to easily extend Microsoft Teams by embedding client-side SPFx web parts or personal applications (not Teams applications) in Teams tabs. Requires running SPFx v1.8 or later and execution is in the context of the SPO site behind the Team. No coding, no hosting, no Azure registration, just package and deploy. Step through app creation using the SharePoint generator, create a Teams tab, and add tab to a Team. This PnP Community demo is taken from the Microsoft Teams community call – April 2021, recorded on April 20, 2021.

Demo Presenter - Albert-Jan Schot (Portiva) | @appieschot

Supporting materials:
• Samples - Samples by JavaScript Framework | https://pnp.github.io/sp-dev-fx-webparts/
• Documentation - Building Microsoft Teams Tabs using SharePoint Framework | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction
• Documentation - Build a Me-experience in Microsoft Teams | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-me-experience

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

sharepoint

teamster

team

hosts

backend

tooling

enable

package

framework

synced

8 Apr 2021

During this 8-minute Developer-focused example, Peter Paul Kirschner steps through the workings of an SPFx web part - a browser-based HTML Image Editor that uses canvas and Office UI Fabric. The File Picker component is used to select an image and manipulate it – Resize, Crop, Flip, Rotate, Scale, Filter (Grayscale / Sepia), Redo / Undo, History of Actions. The web part was created initially to pick files from a custom external data source. See the sample in the Sample Gallery. This demo is taken from the SharePoint Framework community call recorded on April 8, 2021.

Demo Presenter: Peter Paul Kirschner (cubido) | @petkir_at

Supporting materials:
• Repo - React Image Editor | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-image-editor

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
8 minutes

manipulations

manipulation

configure

resize

filter

spfx

editor

demo

image

model

8 Apr 2021

In this 18-minute Developer-focused demo, Vesa Juvonen positions Microsoft Viva as a suite of products. One product - Viva Connections is an integrated experience with Microsoft Teams and SharePoint backed by Microsoft security, privacy, and compliance. Viva Connections is extensible – create/use existing extensions and web parts using SPFx. Customers/Partners determine what capabilities specifically to make available in their Viva Connections implementation (UX). The Worldwide roll out of Viva Connections capabilities will occur over months - a journey. This demo is taken from the SharePoint Framework community call recorded on April 8, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Website - Microsoft Viva Connections | https://aka.ms/VivaConnections
• Blog Post - Install Viva Connections today | https://techcommunity.microsoft.com/t5/microsoft-viva-blog/install-viva-connections-today/ba-p/2245410
• Look book - SharePoint look book | https://lookbook.microsoft.com/
• Documentation - Embedding modern SharePoint pages in Microsoft Teams as personal apps (preview) | https://docs.microsoft.com/en-us/sharepoint/dev/features/embed-pages-to-teams

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
18 minutes

sharepoint

connections

accessibility

usability

virtual

users

viva

intranet

microsoft

extensions

6 Apr 2021

During this 13-minute Developer-focused example, David Ramalho overviews a simple web part for sending a message from a SharePoint page to a recipient’s mailbox or into a Microsoft Teams chat using Microsoft Graph. Conversation elements include send email, my profile information, target user’s principal name, get chat ID (determines if existing chat or creates new). Uses Microsoft Graph APIs, PnP People Picker, React hooks and code snippets found in Graph Explorer. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on March 25, 2021.

Demo Presenter: David Ramalho (Storm Technology) | @DavRamalho

Supporting materials:
• Article - Send a message to Microsoft Teams using Microsoft Graph in SPFx | https://sharepoint-tricks.com/send-a-message-to-microsoft-teams-using-microsoft-graph-in-spfx/
• Documentation - Message Teams User | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-teams-message-user
• Graph Explorer – https://developer.microsoft.com/graph/graph-explorer

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
13 minutes

serpent

message

demon

witch

naughty

storm

head

whi

ronald

hosting

24 Mar 2021

In this 8-minute Developer-focused example, Alberto Gutierrez Perez presents this React list search web part allows the user to show data that’s pulled from different lists or libraries on multiple sites into a searchable summary list. Presenter steps through extensive, appropriate configuration options. Functionally - Select source data - sites, lists and fields, and Set up destination (summary) list columns, formatting, filtering, and on-click dynamic data functionality. Full documentation with sample. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on March 11, 2021.

Demo Presenter: Alberto Gutierrez Perez (Minsait) | @albertogperez

Supporting materials:
• Repo - List Search | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-list-search

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
8 minutes

uk

der

europe

oil

form

section

user

ai

come

hier

11 Mar 2021

In this 15-minute Developer-focused demo, Michaël Maillot steps viewers through a sample SPFx list view command set extension that allows users to create a parallel or nested folder hierarchy simply by typing names of folders into extension pop up and pressing the create folders button. The extension uses Sergei Sergeev’s spfx-fast-serve, React hooks, and ADS for adding folders. Code delivers folder naming error checking and on-screen user guidance. Extension issues, workarounds and improvements are called out. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 25, 2021.

Demo Presenter: Michaël Maillot (onepoint) | @michael_maillot

Supporting materials:
• Articles by Michaël Maillot | https://michaelmaillot.github.io/
• Bug - SPFx ListViewCommandSet Extensions are no longer being loaded when switching list context in side navigation! #5704 | https://github.com/SharePoint/sp-dev-docs/issues/5704
• Teams UserVoice - Show SharePoint custom Command Set extensions in Files Tab | https://microsoftteams.uservoice.com/forums/555103-public/suggestions/40152034-show-sharepoint-custom-command-set-extensions-in-f
• Repo - Add Folders Command | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-command-addfolders
• Post - SharePoint Framework fast serve now supports library components | https://spblog.net/post/2020/06/18/sharepoint-framework-fast-serve-now-supports-library-components
• Office Support - Invalid file names and file types in OneDrive and SharePoint | https://support.microsoft.com/en-us/office/invalid-file-names-and-file-types-in-onedrive-and-sharepoint-64883a5d-228e-48f5-b3d2-eb39e07630fa

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

folders

folder

pnpjs

sharepoint

extensions

package

projects

tool

spfx

manage

11 Mar 2021

For this 11-minute Developer-focused demo, Chandani Prajapati and David Warner show off a web part that provides an easy way to render an interactive SharePoint custom list in DataTable view with many configuration options in the property pane. Provides all the important table formatting features like: Search & exclude from search, filter, pagination, column selection, column ordering, alternative row formatting, etc. Export the selected table data to CSV or PDF. Uses PnPjs, React property controls. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on March 11, 2021.

Demo Presenters:
• Chandani Prajapati | @Chandani_SPD
• David Warner | @DavidWarnerII

Supporting materials:
• Repo - SharePoint Framework DataTable web part sample | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-datatable
• Samples - SharePoint Framework Client-Side Web Part Samples | https://aka.ms/spfx-webparts
• Repository - Reusable React controls for your SharePoint Framework solutions | http://aka.ms/pnp-react-controls

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
11 minutes

configuration

configure

presenting

demo

interactive

pnpjs

data

webpart

placeholder

spfx

11 Mar 2021

During this 10-minute Developer-focused demo, Fredrik Thorild explains how the Sites Selected Admin SPFx web part enables Site Collection Admins to check which in scope apps have been added to a SharePoint site, to list Azure AD registered apps using Microsoft Graph API scope, and to add SharePoint sites to the Azure AD listed Apps. Uses functional components to granularly control apps accessing their SharePoint sites using Microsoft Graph APIs. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on March 11, 2021.

Demo Presenter: Fredrik Thorild (Sogeti) | @taxonomythorild

Supporting materials:
• Blog - Controlling app access on a specific SharePoint site collections is now available in Microsoft Graph | https://developer.microsoft.com/en-us/graph/blogs/controlling-app-access-on-specific-sharepoint-site-collections/
• Repo - Sites Selected Admin client-side web part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-sites-selected-admin
• Documentation - Permission resource type | https://docs.microsoft.com/en-us/graph/api/resources/permission?view=graph-rest-1.0
• Video – Requesting API Permissions in Azure | https://www.youtube.com/watch?v=wcJRQDsXMQ8&list=PLWZJrkeLOrbYJEr_LoIJ7-1Goy09XJzha

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
10 minutes

sharepoint

share

manage

admin

access

preview

project

announced

twitter

azure

25 Feb 2021

For this 10-minute Developer-focused demo, Mikael Svenson dives into an extension allows users to demote read-only promoted news pages! Pull Theme colors from Global state object or UI Fabric getTheme for SVG icon. The code checks if page is in promoted state and if user has permissions to demote. This example shows how extensions – in this case a demotion capability - can be made available to all sites across the tenant and adopt local site theme. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 25, 2021.

Demo Presenter: Mikael Svenson (Microsoft) | @mikaelsvenson

Supporting materials:
• Sample - Add Folders Command | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-command-addfolders
• Blog - Fixing base64 SVG icons in SPFx — an interactive post | https://tahoeninjas.blog/2019/08/31/fixing-base64-svg-icons-in-spfx/
• Document - Controlling tenant wide deployment from App Catalog site collection | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/basics/tenant-wide-deployment-extensions#controlling-tenant-wide-deployment-from-app-catalog-site-collection
• SharePoint UserVoice - We can Promote but not Demote News. Add ability to Demote News pages. | https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/38255671-we-can-promote-but-not-demote-news-add-ability-to

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
10 minutes

theme

promoting

icons

demo

ui

page

svg

extensions

republishing

demoted

25 Feb 2021

During this 11-minute Developer-focused demo, Hugo Bernier shares a robust web part sample that uses PnP Reusable ChartControl to add theme aware, responsive fluent UI integrated charts (20 charts) to your web parts. You may use plugins for custom rendering or for showing continuous data feed in a chart. This “Chartinator“ control pulls static or dynamic data into your web part. You are able to define chart colors, type, layout, legend, animations in the properties pane. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 25, 2021.

Demo Presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• Website - JavaScript charting for designers & developers | www.chartjs.org
• Samples - Chart Control Samples | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-chartcontrol
• PnP Samples - Samples by JavaScript Framework | https://aka.ms/spfx-webparts

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
11 minutes

sharepoint

pmp

controls

chartonator

demoing

manually

placeholder

plugins

parts

accessible

11 Feb 2021

For this 14-minute Developer-focused demo, Hugo Bernier delivers a demo on behalf of web part creator João Mendes showing viewers a full-featured web part called List Item Menu which allows developers to dynamically generate a collapsible menu of items pulled from a list or a document library, as an alternative to hard-coding menus. Items show within expandable and collapsible menus, grouped by any document library column. The web part works in SharePoint and Microsoft Teams and supports section theme colors. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 11, 2021.

Demo presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Sample creator: João Mendes | @joaojmendes

Supporting materials:
• Repo - List Items Menu | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-list-items-menu
• Samples Gallery - Samples by JavaScript Framework | https://aka.ms/spfx-webparts

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
14 minutes

webpart

site

sharepoint

functionality

hosts

repositories

presenting

lookbook

edit

spfx

2 Feb 2021

In this 19-minute Developer-focused demo, Stefan Bauer shows viewers how to make changes to the styling of a web part by creating variants on office UI fabric – site theming within a web part. Add a theme variant object to an SPFx web part. Redefine the CSS variables within the web part’s event handler. The theme variants are then available and called as CSS variables. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 14, 2021.

Demo Presenter: Stefan Bauer (N8D) | @StfBauer

Supporting document:
• Article - Develop SPFx web parts for different section designs using CSS | https://n8d.at/develop-spfx-web-parts-for-different-section-designs-using-css/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
19 minutes

css

styling

backgrounds

colors

webparty

settings

themestate

variant

diff

dash

28 Jan 2021

For this 15-minute Developer-focused demo, Hugo Bernier delivers a demo on behalf of web part creator João Mendes showing viewers a web part that displays your upcoming calendar events. Built leveraging the Microsoft Graph Toolkit in SPFx and customized using Fluent UI Fabric Controls, this web part supports themes, section background colors, and may be used as SharePoint web part, a Microsoft Teams personal app or a Teams tab. Each event displays details using the Fluent UI document card control in a calendar view. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 28, 2021.

Demo Presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Sample creator: João Mendes | @joaojmendes

Supporting materials:
• Source code - React-mgtEvents | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-mgtEvents
• Samples - Samples by JavaScript Framework | https://aka.ms/spfx-webparts
• Sandbox - Microsoft Graph Toolkit Playground | https://mgt.dev/

Learn more:
• SharePoint Framework documentation - https://aka.ms/spfx
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

microsoft

preview

toolkit

demo

sample

presenting

joao

webparts

graph

scheduling

28 Jan 2021

In this 16-minute Developer-focused demo, Jerry Yasir has created a useful Soccer highlights web part to demonstrate the ease in which you can call a Public API inside a SPFx web part. The API provides match highlights, videos in HD, and the ability to watch live games. Display in flat mode or in filmstrip view via custom React components, or by using the Filmstrip control from the SPFx samples repository. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 28, 2021.

Demo Presenter: Jerry Yasir (DXC Technology) | @jerryyasir

Supporting materials:
• Documentation - Build apps with the Teams Toolkit and Visual Studio Code | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/connect-to-anonymous-apis?WT.mc_id=m365-15744-cxa
• Blog Post - SharePoint Framework Design Series: Layout Patterns — Part II | https://tahoeninjas.blog/2019/07/31/sharepoint-framework-design-series-layout-patterns-part-ii/
• Repo - SharePoint Framework Client-Side Web Part Samples & Tutorial Materials | https://github.com/pnp/sp-dev-fx-webparts
• Sample - Soccer Highlights Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-soccer-highlights

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
16 minutes

widget

web

browser

apis

embed

implementation

sharepoint

accessing

viewing

sportback

14 Jan 2021

Are you migrating from SharePoint on-prem to SPO? Then you need this self-service migration dashboard. In this 8-minute Developer-focused demo, Denis Molodtsov shows how users can track migration details; the project team can run a script to import data from the open-source SharePoint Migration Assessment Tool (SMAT) that renders the data in a more readable format. Simple to deploy – automated. The dashboard is 1 SPFx web part built using Yeoman, React, Fluent UI, PnPjs. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 14, 2021.

Demo Presenter: Denis Molodtsov (CleverPoint) | @Zerg00s

Supporting materials:
• Repo – Migration Dashboard | https://github.com/Zerg00s/sp-migration-dashboard
• Documentation - Overview of the SharePoint Migration Assessment Tool | https://docs.microsoft.com/en-us/sharepointmigration/overview-of-the-sharepoint-migration-assessment-tool

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
8 minutes

dashboard

migrations

sharepoint

migrated

workflows

access

platform

stakeholders

planning

communicate

14 Jan 2021

PnP Samples are a means to kick start your development efforts. In this 11-minute Developer-focused demo, David Warner and Hugo Bernier show the PnP Samples inventory that includes nearly 450 validated samples contributed by 250 community members. Tour the PnP Samples browser and learn about sort classifications including sort by compatibility. See how the presenters find 2 web parts, evaluate compatibility for the target dev environment and learn tricks to avoid compatibility issues. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 14, 2021.

Demo Presenters:
• David Warner (Catapult Systems) | @DavidWarnerII
• Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• SPFx web parts samples repository - Samples by JavaScript Framework | https://aka.ms/spfx-webparts
• SPFx extensions samples repository - Samples by JavaScript Framework | https://aka.ms/spfx-extensions
• Website - PnP Sharing is Caring | https://aka.ms/sharing-is-caring
• Repo - Content Query web part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-content-query-online

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
11 minutes

samples

sample

sharepoint

toolkit

downloaded

contributor

browsers

demo

pnp

visit

13 Jan 2021

In this 13-minute developer-focused demo, Siddharth Vaghasia shows a simple way for employees to give feedback on internal communications (news/article/post) and for managers to view sentiment in report. Web part uses star-based rating system, captures text comments, stores ratings in SharePoint list, and aligns data to page name. Configurations – link to list, background colors, ratings text, emoji images, enable/disable comments and count. Use a Power Automate flow to add web part to page at creation. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 13, 2021.

Demo Presenter: Siddharth Vaghasia | @siddh_me

Supporting material:
• Sample - Emoji Ratings | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-emoji-ratings

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
13 minutes

submit

spf

webpart

users

factor

blog

message

emoji

report

sharepoint

13 Jan 2021

In this 12-minute developer-focused demo – Paolo Pialorsi demystifies working with State and Properties in ACEs that includes managing interfaces for Properties (Property pane or code) and State (code) used by CardView and QuickViews. The basic property pane is generated by the SPFx scaffolding tool. Learn about building functions into ACE component and exposing the functions to your ACEs cards. See how State is updated only for the active component, if 2 components displayed. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 13, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
13 minutes

cards

adapter

sharepoint

adaptive

extensions

properties

manage

generator

demos

access

13 Jan 2021

In this 13-minute developer-focused demo regarding web part properties and property panes, Hugo Bernier explains that having a configurable property pane allows you to go from a single-use to a multi-use component with many variations while using same code! The Quick links web part for example can look very different by changing layout properties - just rendering differences. Demo focuses on modifications to the getPropertyPaneConfiguration( ) method that contains pages, groups and fields. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 13, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Documentation - Use the Quick Links web part | https://support.microsoft.com/office/use-the-quick-links-web-part-e1df7561-209d-4362-96d4-469f85ab2a82#:~:text=Add%20the%20Quick%20links%20web%20part%201%20If,button%20to%20set%20your%20options%3A%20More%20items...%20
• Documentation - Make your SharePoint client-side web part configurable | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane
• Documentation - Integrate web part properties with SharePoint |
https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint

Previous demos from Hugo Bernier (Microsoft) | @bernierh, on SPFx Design Patterns series
• SPFx Design Patterns – Custom Properties (Part 2) – 30 December
• SPFx Design Patterns – Custom Properties (Part 1) – 4 November
• SPFx Design Patterns – Property Panes - 21 October

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

2 participants
13 minutes

designing

users

properties

developer

pane

configuration

lazy

versatile

sharepoint

renders

12 Jan 2021

In this 15-minute Site Admin - focused demo, Julie Turner steps viewers through the latest (Dec 2020) open-source updates to Learning Pathways SPFx web parts. Look at the updated GitHub repository structure, review contribution guidelines, preview a new capability – deep linking in Microsoft Teams using the Learning Pathways Viewer web part. Finally, how to provision Learning Pathways and a SharePoint Success site add-on in your tenant. This PnP Community demo is taken from the SharePoint (PnP) Community call – January 2021 – Monthly sync call recorded on January 12, 2021.

Demo Presenter: – Julie Turner (Sympraxis Consulting) | @jfj1997

Supporting materials:
• Solution GitHub repository – Microsoft 365 learning pathways | https://github.com/pnp/custom-learning-office-365
• Documentation – Microsoft 365 learning pathways | https://docs.microsoft.com/en-us/office365/customlearning/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

repository

repo

github

sharepoint

version

updates

docs

v3

microsoft

guidance

7 Jan 2021

In this 21-minute site owner-focused demo, David Warner and Hugo Bernier show viewers functionality delivered by powerful new components in the Microsoft Graph Toolkit (MGT) that are now accessible from within the Property Pane of the React Modern Content Query web part. See how “people” information is accessed from the Graph using dynamic handlebar templating as well as list formatting options. Use the MGT playground to evaluate components and iron out HTML code before inserting it into a template. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on January 7, 2021.

Demo Presenters:
• David Warner (Catapult Systems) | @DavidWarnerII
• Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• Documentation – Microsoft Graph Toolkit Overview | https://docs.microsoft.com/graph/toolkit/overview
• Repo - Content Query web part (SharePoint Online-Compatible) | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-content-query-online
• Sandbox site - Microsoft Graph Toolkit Playground | https://mgt.dev/
• Website – handlebars | https://handlebarsjs.com/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
21 minutes

affairs

handled

assess

introduced

customers

user

hari

womantoday

kaivn

pearl

17 Dec 2020

In this 7-minute Developer - focused demo, Rabia Williams delivers a 3-tab, single manifest file, SPFx Personal App implementation of the me experience. The tabs are Planning, Insights, and Settings. Planning (my agenda, tasks, and documents) and Insights (files shared, trending, modified) tabs are built with the Microsoft Graph Toolkit – nice because the builder need not worry about the data side of things. The app uses mgt-react package for components. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on December 17, 2020.

Demo Presenter: Rabia Williams (Microsoft) | @williamsrabia

Supporting materials:
• Sample - Me experience | https://github.com/pnp/teams-dev-samples/tree/master/samples/tab-spfx-me-experience
• Blog - Me Experience in Microsoft Teams using Microsoft Graph Tookit and SPFx | https://rabiawilliams.com/teams/me-experience/
• Documentation - Build a Me-experience in Microsoft Teams | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-me-experience

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
7 minutes

toolkit

app

personal

insights

settings

tabs

tasks

planning

user

sharepoint

17 Dec 2020

In this 28-minute Developer - focused demo, Franck Cornu highlights the PnP Modern Search Solution - a collection of community-built and maintained SharePoint Online web parts (Search Result, Search filters, Search verticals, Search box) for creating flexible and personalized search-based experiences - enhancing OOTB capabilities. V4.0 foundation is a completely rearchitected code base. New features are reviewed including integrations with Microsoft Search API and Microsoft Graph Toolkit. Deploy at tenant or site collection levels, new documentation, download the preview today. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on December 17, 2020.

Demo Presenter - Franck Cornu (aequos) | @FranckCornu

Supporting materials:
• Repo - PnP Modern Search Solution | https://github.com/microsoft-search/pnp-modern-search/
• Repo - Modern Search - V4 preview | https://github.com/microsoft-search/pnp-modern-search/releases/tag/4.0.0-preview
• Sample - PnP Modern Search - Extensibility samples | https://github.com/microsoft-search/pnp-modern-search-extensibility-samples/tree/develop

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
28 minutes

v4

v3

pnp

toolkit

introduction

microsoft

query

helpers

repository

reorganize

10 Dec 2020

In this 14-minute Developer - focused demo, Paolo Pialorsi delivers an option to extend or replace the Power Automate Flow Panel with a Flow Launch Panel built with SPFx that’s accessed from within SPO/Microsoft Teams, and that triggers flows by content type or status, and allows flow reuse across multiple lists and libraries. The SPFx launch panel delivers a comfortable level of abstraction and behind the scenes intelligence that prompts users only for needed information in the simplest terms. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 19, 2020.

Demo Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Supporting materials:
• Document - List channel messages | https://docs.microsoft.com/en-us/graph/api/channel-list-messages?view=graph-rest-1.0&tabs=http
• Document - chatMessages: delta | https://docs.microsoft.com/en-us/graph/api/chatmessage-delta?view=graph-rest-1.0&tabs=http
• Document - List channel message replies | https://docs.microsoft.com/en-us/graph/api/channel-list-messagereplies?view=graph-rest-1.0&tabs=http
• Document - Get a reply to a channel message | https://docs.microsoft.com/en-us/graph/api/channel-get-messagereply?view=graph-rest-1.0&tabs=http
• Document - Create subscription | https://docs.microsoft.com/en-us/graph/api/subscription-post-subscriptions?view=graph-rest-1.0&tabs=http

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
14 minutes

sharepoint

share

automate

automata

flow

interface

execute

power

information

management

3 Dec 2020

In this 19-minute Developer - focused demo, Qiong Wu delivers practical examples of how SPFx client-side web parts and extensions that leverage the Microsoft Bot Framework can be used to integrate Bots in SharePoint today. The web part sample embeds the bot by using webchat – a highly customizable web-based client for a bot. Security options presented. Use the application customizer to position a bot extension on a web page. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on December 3, 2020.

Demo Presenter: Qiong Wu (Microsoft)

Supporting materials:
• Website – Microsoft Bot Framework | https://dev.botframework.com/
• Web parts Repo - SharePoint web part sample with bot framework - Secure | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-bot-framework-secure
• Web parts Repo - SharePoint webpart sample with SSO | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-bot-framework-sso
• Extensions Repo - SharePoint extension sample with bot framework | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-bot-framework-secure
• Extensions Repo - Sharepoint extension sample with SSO | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-bot-framework-sso

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
19 minutes

bots

sharepoint

buffingwork

chat

communicate

demos

buffering

host

authentication

middleware

24 Nov 2020

Watch this community demo by Nooriz Khamis and Jose Louis from CloudSpark Labs showing their Microsoft Teams Content Explorer app.

Resources:
Content Explorer App on GitHub https://aka.ms/AAaexl3

This demo is taken from the November Microsoft Teams community call.
To join future calls, please download the series at https://aka.ms/microsoftteamscommunitycall

Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog

2 participants
14 minutes

sharepoint

microsoft

collaboration

browser

developers

users

project

helpers

editing

document

19 Nov 2020

In this 15-minute Developer - focused demo, Fabio Franzini familiarizes listeners with the Tailwind CSS Framework, steps through installation, configuration and use/integration into an SPFx React project. CSS custom properties are used to manage Tailwind CSS Classes - the Theme Variant into sections. Tailwind delivers additional options for changing elements - weights, colors, fonts, backgrounds than OOB SharePoint themes/CSS. A powerful capability delivered by Tailwind CSS is responsive layout rendering. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 19, 2020.

Demo Presenter: Fabio Franzini | @franzinifabio

Supporting materials:
• CSS Framework site: Rapidly build modern websites without ever leaving your HTML. | https://tailwindcss.com/
• Repo: react-tailwindcss | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-tailwindcss
• Sandbox - Tailwind Playground | https://play.tailwindcss.com/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

tylewind

css

tilewind

implementation

doctylwindcs

thailwind

frameworks

ui

rendered

elements

17 Nov 2020

In this 13-minute Developer - focused demo, Aakash Bhardwaj shows functionality visible within the user’s Microsoft Outlook environment, delivered by an SPFx web part for displaying e-mail attachments for opened e-mail along with the user’s OneDrive folders into which the user may save selected mail attachments (+/- 4MB). Usage in a tenant requires Mail.Read and Files.ReadWrite permissions on Microsoft Graph. This capability complements Markus Möller’s Sample that copies e-mail to a Teams or OneDrive folder. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 5, 2020.

Demo Presenter: Aakash Bhardwaj (HCL Technologies) | @aakash_316

Supporting materials:
• Repo - React Save Attachments | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-save-attachments
• Repo - outlook-2-sp-spfx | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-outlook-copy2teams
• Building Outlook add-in with SharePoint Framework tutorial - this feature is currently in preview - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
13 minutes

attachments

sharepoint

upload

package

emails

spfx

copy

office

helper

preview

5 Nov 2020

In this 19-minute Developer - focused demo, Jerry Yasir steps through a sample that extends the single World time clock sample to include multiple clocks. Analog clock faces change color by time indicating day, evening, night. Clocks and values for multiple locations are stored in the SharePoint list. Time is calculated using a custom formula. Leverages reusable controls – React Analog Clock and React Clock (digital). Uses PnPjs today, Microsoft Graph in future. Order clocks and toggle to render on-page. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 5, 2020.

Demo Presenter: Jerry Yasir (DCX Technology) | @jerryyasir

Supporting materials:
• Repo - World Clocks Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-world-clocks
• NPM - React-Clock | https://www.npmjs.com/package/react-clock
• NPM - Analog-React-clock | https://www.npmjs.com/package/analog-clock-react
• PnP Library - PnPjs | https://pnp.github.io/pnpjs/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
20 minutes

pmp

pnpjs

sharepoint

webpart

clock

demo

utc

gmt

office

globally

22 Oct 2020

In this 6-minute Developer - focused demo, Alex Terentiev shows using PnP reusable React Fields Controls for lists. The FieldRendererHelper class automatically suggests needed component type Field Control based on current Field parameters. Use one Field Customizer for any type of SharePoint call/column type. Functionally the control evaluates the field and type and calls in the appropriate control to render data type on the page The Field Customizer delivers additional CSS styling to out-of-box SharePoint column behavior. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 22, 2020.

Demo Presenter: Alex Terentiev (Sharepointalist) | @alexterentiev

Supporting materials:
• Documentation - FieldRendererHelper class | https://pnp.github.io/sp-dev-fx-controls-react/controls/fields/FieldRendererHelper/
• Repo - react-field-pnp-field-renderer-helper | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-field-pnp-field-renderer-helper

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
6 minutes

customizer

customizers

renderer

helper

sharepoint

control

field

implement

modify

accessor

8 Oct 2020

In this 10-minute Developer - focused demo, Ryan Schouten shares a List Form web part that allows users to easily add a list form to any page. Configure the form by pointing to an existing list and the web part generates the list form using fields from the list. Form fields can be added, ordered or removed visually in the web part. The web part uses SPFx and React and Office UI Fabric libraries. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 8, 2020.

Demo Presenter: Ryan Schouten | @ShrPntKnight

Supporting materials:
• Repo - React List Form Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-list-form

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
10 minutes

submitting

version

form

demos

contributing

user

poll

web

coronavirus

sharepoint

8 Oct 2020

In this 15-minute Developer - focused demo, Vardhaman Deshpande shows how to use SharePoint Framework to build a task modules in Microsoft Teams messaging extensions. Messaging extensions allow users to interact with applications within the context of their conversations – in a channel or group chat. Access SPFx task modules from Teams Compose Box, Tabs, Personal Apps as well as from Adaptive Cards. Static and dynamic extension use cases are explained. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 8, 2020.

Demo Presenter: Vardhaman Deshpande (Valo Intranet) | @vrdmn

Supporting materials:
• Blog post - Microsoft Teams messaging extensions using SPFx: Getting the message data with Microsoft Graph | https://www.vrdmn.com/2020/09/microsoft-teams-messaging-extensions.html
• Repo - spfx-teams-message-action | https://github.com/vman/spfx-teams-message-action

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

messaging

chats

extensions

tasks

message

bots

uspfx

platform

sharepoint

promoting

8 Oct 2020

In this 14-minute Developer - focused demo, Daniel Watford shows viewers how to use this Users and Groups Web part to ascertain relationships between users and groups in SharePoint and in Azure Active Directory for purposes of making informed access control decisions. User and group information from AAD is retrieved through the Microsoft Graph API and from SP via PnPjs calls to the SharePoint API. Easily determine if user is a member of SharePoint site groups. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 8, 2020.

Demo Presenter: Daniel Watford (Watford Consulting Ltd) | @danwatford

Supporting materials:
• Blog Post - The multiple identities of a SharePoint site user | https://www.watfordconsulting.com/2020/10/02/the-multiple-identities-of-a-sharepoint-user/
• Repo - Site User and Group Information | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-sp-site-user-groups
• Document - User profile synchronization | https://docs.microsoft.com/en-us/sharepoint/user-profile-sync
• Web-based Tool - json2table | http://json2table.com/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
14 minutes

users

sharepoint

management

admin

customers

microsoft

understand

presentation

consulting

memberships

24 Sep 2020

In this 13-minute Developer - focused demo, Anoop Tatti shows a web part that uses Microsoft Graph APIs to get and display data from Term store. The web part requires one developer supplied property – term set ID. Based on geographic location selected by user, drop down menus are populated with country and city terms and displays a map using PnP Maps control. The web part is available in the PnP Samples repository and supports 2-level cascading today. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 24, 2020.

Demo Presenter: Anoop Tatti (Content and Code) | @anooptells

Supporting materials:
• Document - Microsoft Graph APIs for Taxonomy | https://docs.microsoft.com/en-us/graph/api/resources/termstore-store?view=graph-rest-beta
• Repo - Cascading managed metadata using Graph API (beta) | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-graph-cascading-managed-metadata
• PnP SPFx Map control | https://pnp.github.io/sp-dev-fx-controls-react/controls/Map/
• Repo - React Functional Component web part with data fetch | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-functional-component-with-data-fetch
• Repo - Yammer Praise using aadTokenProvider | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-yammer-praise
• Post - Example of wrapper to ease usage of Graph calls in SPFx | https://www.techmikael.com/2018/09/example-of-wrapper-to-ease-usage-of.html

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
12 minutes

presentation

metadata

taxonomy

country

information

sharepoint

graph

relevant

user

microsoft

24 Sep 2020

In this 13-minute Developer - focused demo, Markus Möller lays out a key use case: Documents in a list are past due for review. Need to communicate review requirement to a Microsoft Teams user through task module. Communications is between SPFx and Bot Components and task is rendered in an Adaptive Card with 2 actions: View and Reviewed. Communications between Library and Task Module via Graph calls. This capability is available only in SPFx v1.11. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 24, 2020.

Demo Presenter: Markus Möller (Avanade) | @Moeller2_0

Supporting materials:
• Post - Use SPFx for Task Modules in Teams Messaging Extensions and access Microsoft Graph | https://mmsharepoint.wordpress.com/2020/09/03/use-spfx-for-task-modules-in-teams-messaging-extensions-and-access-microsoft-graph/
• Repo - msgext-spfx-graph-docreview | https://github.com/mmsharepoint/teams-docreview/tree/master/msgext-spfx-graph-docreview
• Repo - Document Review SPFx Messaging Extension | https://github.com/pnp/teams-dev-samples/tree/master/samples/msgext-spfx-graph-docreview

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
13 minutes

tasks

sharepoint

presenting

spfx

messaging

notice

executed

summary

document

microsoft

17 Sep 2020

In this 15-minute Developer focused demo, April Dunnam and Hugo Bernier introduce us to an alternative to the out-of-box Power Apps Web part in SharePoint, an enhanced – more configurable Power Apps web part. Configure screen sizing – multiple aspect ratios or fixed height and theming - pass SharePoint theme color values into Power Apps. Also, pass dynamic data from page elements to Power Apps – such as a selected item on a connected list or an environment variable such as the user’s locale. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 27, 2020.

Demo Presenters:
• April Dunnam (Microsoft) | @aprildunnam
• Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• Video - PowerApps Enhanced SharePoint Webpart | https://youtu.be/EFhP4uu0rlo
• Repo – React Enhanced Powerapps | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-enhanced-powerapps

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
15 minutes

powerapps

powerapp

power

sharepoint

demo

application

configuring

tablet

webpart

hugo

10 Sep 2020

And why do we need a people search web part? Save time, deliver relevant information. In this 17-minute Developer - focused demo, Yannick Reekmans demonstrates how this web part allows you to limit or filter profiles from AAD. The Microsoft Graph-based web part shows Person Cards from Office UI Fabric React/Fluent UI library and shows Live Person Cards on hover. Configure query and search parameters, styling options, template options as well as Microsoft Graph query code for debugging. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 10, 2020.

Demo Presenter: Yannick Reekmans (Qubix) | @YannickReekmans

Supporting materials:
• Article - SPFx People Search web part based on Microsoft Graph | https://blog.yannickreekmans.be/spfx-people-search-web-part-based-on-microsoft-graph/
• Repo - Microsoft Graph People Search Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-msgraph-peoplesearch
• Article - PnP Modern Search solution | https://microsoft-search.github.io/pnp-modern-search/
• Repo - Microsoft Graph People Search Web Part | https://github.com/YannickRe/spfx-msgraph-peoplesearch

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
17 minutes

sharepoint

users

microsoft

profiles

webwork

pmp

manage

query

paging

graphclient

10 Sep 2020

In this 10-minute Developer - focused demo, Abhishek Purohit – shows viewers how to think about and create a simple license management system to manage SPFx add-ins and extensions sold in Microsoft AppSource. Consider licensing options - use your own licensing management tool, use a 3rd party app or use AppSource. From your app, add code to call a SAAS web API and to inform the user if they or their tenant has a license for your app else prompt to license. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 10, 2020.

Demo Presenter: Abhishek Purohit (Microsoft) | @abpuro

Supporting materials:
• Repo - office-add-in-saas-monetization-sample | http://github.com/officedev/office-add-in-saas-monetization-sample
• Documentation - How to create a SaaS offer in the commercial marketplace | https://docs.microsoft.com/en-us/azure/marketplace/partner-center-portal/create-new-saas-offer
• Documentation - Submit your Office solution to Microsoft AppSource via Partner Center | https://docs.microsoft.com/en-us/office/dev/store/use-partner-center-to-submit-to-appsource

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
10 minutes

sharepoint

microsoft

licensing

monetization

dashboard

provisioned

software

upload

appsource

hosted

10 Sep 2020

In this 12-minute Developer - focused demo, Kislay Sinha orients viewers to the latest SharePoint Starter Kit - a comprehensive soup-to-nuts solution designed for SharePoint Online and SharePoint 2019, that provides numerous SharePoint Framework (SPFx) web parts (16), extensions (4), site collections (3), and guidance. Provisioning is accomplished easily with PnP PowerShell - 3 commands resulting in fully functional sites (hub and team) with capabilities and graphics you can just use or customize as desired. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 10, 2020.

Demo Presenter: Kislay Sinha (CGI) | @sinhakislay

Supporting materials:
• SharePoint Starter Kit v2 | https://github.com/pnp/sp-starter-kit
• Blog - Announcing SharePoint Starter Kit v2 | https://developer.microsoft.com/en-us/office/blogs/announcing-sharepoint-starter-kit-v2/
• Video - PnP Virtual Conference Session on Starter Kit | https://youtu.be/FyCHEfjurvo
• Article - SharePoint Starter Kit v2 – an overview | https://synkventures.com/2020/07/23/sharepoint-starter-kit-v2-an-overview/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
12 minutes

sharepoint19

sharepoint

provisioning

pnp

prerequisites

presentation

kit

version

download

powershell

8 Sep 2020

The session shows how to use PnP Reusable SharePoint Framework Controls to quickly create beautiful and functional SharePoint Framework web parts. PnP SPFx reusable controls are designed to simplify SharePoint Framework solution development.

There's two set of controls:
- Property Pane controls designed to be used with SharePoint Framework web parts to provide enhanced configuration experience in web part edit mode. These can be used in your projects regadless which JavaScript framework you've chosen to use
- React Content Controls are designed to be used within the SharePoint Framework editing area. These can be used to provide standardized experience when you are building your solution using React.

Both control types are using Office UI Fabric controls behind the scenes, but are combining and decorating them with more advance capabilities.

Speaker: Alex Terentiev (Sharepointalist) | @alexaterentiev

Supporting materials:
• PnP SPFx reusable React Controls - https://pnp.github.io/sp-dev-fx-controls-react/
• PnP SPFx reusable property controls for web parts - https://pnp.github.io/sp-dev-fx-property-controls/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
28 minutes

sharepoint

framework

frontend

pnpvc

packager

webpart

tweaker

tools

project

repositories

8 Sep 2020

PnP/SPFx Yeoman generator comes with many enhancements that allows you to increase your productivity for any kind of SharePoint Framework project.

- Consistent CSS Formating
- Improve Solution versioning
- Common used addons.

In this session we cover what's the advantage of using the PnP SPFx Yeoman generator which extends the native oob Yeoman generator with new useful capabiilties.

Speaker: Stefan Bauer (N8D) | @StfBauer

Supporting materials:
• PnP SPFx Yeoman generator documentation - https://pnp.github.io/generator-spfx/
• PnP SPFx Yeoman generator in Twitter - https://twitter.com/pnpspfx

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
31 minutes

pnp

pmp

sharepoint

generator

pmpjs

tools

spfx

version

sppg

improve

8 Sep 2020

The SharePoint Starter Kit provides a compressive provisioning and customization framework for your SharePoint projects and deployments. Join us and get a jump start on how best to take this project and make it your own. See how the provisioning process works and make it work for you. Learn how the SharePoint Framewwork components fit together and how best to extend them for your organization.

Speaker: Eric Overfield (PixelMill) | @EricOverfield

Supporting materials:
• SharePoint Starter Kit - http://aka.ms/sp-starter-kit

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
30 minutes

starterkit

sharepoint

pmp

starters

provisioning

tools

project

v2

microsoft

users

8 Sep 2020

Since the first developer preview in 2016, the SharePoint Framework has released over 10 major releases and many minor releases, adding new functionality and improvements along the way.

But how do you keep your SPFx solutions up-to-date with the latest version of SPFx?

Luckily, Office 365 CLI makes it easy to upgrade your SPFx projects with minimum efforts!

In this session, we'll show you how to use the Office 365 CLI SPFx project upgrade command, some of the configuration options, and how to solve issues you may encounter along the way.

Speaker: Hugo Bernier (Tahoe Ninjas) | @bernierh & David Warner (Catapult Systems) | @DavidWarnerII

Supporting materials:
• CLI for Microsoft 365 - https://pnp.github.io/cli-microsoft365/
• SharePoint Framework samples - https://aka.ms/spfx-webparts | https://aka.ms/spfx-extensions

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
29 minutes

sharepoint

conference

presenting

collaborating

mspnpvc

project

vlogging

virtual

microsoft

spfxdoctor

8 Sep 2020

This session will share the development techniques that Velin's teams used to optimize for better performance SharePoint Framework highly customized Intranet homepage used than more than 40 000 users on daily basis.

Speaker: Velin Georgiev (Pramerica) | @VelinGeorgiev

Supporting materials:
• Intelligent Intranet - https://resources.techcommunity.microsoft.com/intelligent-intranet/
• Getting started with SharePoint Framework - https://aka.ms/spfx

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
30 minutes

optimizing

server

client

performance

browsers

sharepoint

microsoft

users

policies

minutes

3 Sep 2020

This video explains how the SharePoint Framework solutions can be acquired and consumed from the store. There's two different paths for this:

- End user requesting a SharePoint Framework solution from the store
- App catalog administrator acquiring a SharePoint Framework solution from the store

Both of these steps are explained and demonstrated in this video.

SharePoint Framework solutions can be submitted to the store by partners starting from July 2020. Overall process is a bit different compared to the classic SharePoint add-ins as all installed SharePoint Framework solutions will have to enabled by administrators as they are running on the page with full permissions of the user.

See more on SharePoint Framework solutions in store from https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview

1 participant
13 minutes

sharepoint

administrator

installed

users

modernizing

manage

providers

updates

adders

frameworks

27 Aug 2020

In this 11-minute Developer focused demo, Erik Benke introduces us to a web part for building/adding a collapsible accordion style FAQ to a SharePoint page or Teams tab. Functionally, the code invokes a get list items method to grab items from targeted list, populates the accordion and renders the formatted result. Each accordion item has a header and panel. The web part leverages the react-accessible-accordion library designed to be Accessible (works well with screen readers) and can be easily customized via CSS. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 27, 2020.

Demo Presenter: Erik Benke (Mentor Graphics) | @erikjbenke

Supporting materials:
• Repo - SPFx Accordion Section FAQ Builder web part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-accordion-section

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
11 minutes

accessible

sharepoint

presentation

view

demo

users

accordion

pane

customizable

sections

26 Aug 2020

In this 17-minute Developer - focused demo, Hugo Bernier introduces us to an intelligent assistant that validates photos. Capturing photos in a web part is not new. What’s new is using Azure Cognitive Services - Computer Vision to evaluate and then approve or reject submitted photos. No need to train the Service just define the evaluation criteria, get and secure a services key and end point, access the API, analyze submission and render results. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 13, 2020.

Demo Presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• Documentation - Computer Vision API (v3.0) | https://westcentralus.dev.cognitive.microsoft.com/docs/services/computer-vision-v3-ga/operations/56f91f2e778daf14a499f21b
• Repo - Smart Profile Photo Editor | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-smart-profile-photo-editor
• Overview - Computer Vision | https://azure.microsoft.com/en-us/services/cognitive-services/computer-vision/#product-overview
• Guidance - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• Documentation - SharePoint Online tenant properties | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/tenant-properties?tabs=sprest
• Repo - PropertyPaneMarkdownContent control | https://github.com/pnp/sp-dev-fx-property-controls/blob/dev/docs/documentation/docs/controls/PropertyPaneMarkdownContent.md

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
17 minutes

uploading

spfx

passport

display

photo

users

documentation

configure

webcard

problems

17 Aug 2020

In this 10-minute Developer focused demo, – Joel Rodrigues introduces us to SharePoint’s Workbench page (specifically the Workbench Customizer web part) and how it can be customized to mimic - render a wide view modern SharePoint page using CSS overrides on some of the page styles, without negatively impacting your site. The web part allows developers to set properties that control customizations and to switch the page to Preview after the page is loaded - useful when doing UI work. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 30, 2020.

Demo Presenter: Joel Rodrigues (Storm Technology Ltd) | @JoelFMRodrigues

Supporting materials:
• Workbench customizer | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/js-workbench-customizer
• SPFx Workbench Customizer | https://www.m365-dev.com/2019/01/18/spfx-workbench-customizer/
• Build your first SharePoint client-side web part (Hello World part 1) | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
10 minutes

workbench

toolbars

customizer

webpart

ui

sharepoint

preview

project

edit

simplify

13 Aug 2020

In this 11-minute Developer - focused demo, Ramin Ahmadi delivers a demo about a SPFx web part used for finding contacts aligned to an account or team in Microsoft Dynamics 365 CRM and steps viewers through the authentication path to retrieving this information. The flow includes a secured Azure function, getting an access token from Microsoft Identity Platform and calling Dynamics APIs using User Impersonation permissions. The Web part has 3 properties and React hooks increase readability. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 13, 2020.

Demo Presenter: Ramin Ahmadi (Content and Code) | @raminahmadi1986

Supporting materials:
• Blog post - SFPX CONSUMING DYNAMICS CRM API | https://ramin.expert/?p=363
• React Library - Ant Design site | https://ant.design/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

3 participants
11 minutes

crm

sharepoint

contact

demo

account

access

app

apis

data

dynamic

13 Aug 2020

In this 10-minute Developer - focused demo, David Warner shows viewers how to optimally split, combine and name .js files for your bundles to speed up initial page load and debugging as well as to provide actionable telemetry. See how to split your web parts functionality into multiple .js files and use WebpackChunkName to append friendly names to default GUID like .js file names. Files are loaded as needed - at time of execution, i.e., with a button click. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 13, 2020.

Demo Presenter: David Warner (Catapult Systems) | @DavidWarnerII

Supporting materials:
• Blog post - Dynamic SPFx Package Bundling | http://warner.digital/dynamic-spfx-package-bundling/
• Documentation - Dynamic loading of packages in SharePoint Framework | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/dynamic-loading/
• Blog post - SPFx Optimized Package Bundling – Chunk Names – Part 1 – Custom Bundle Names | http://warner.digital/spfx-optimized-package-bundling-chunk-names-part1/
• Repo - Dynamics Bundling & Loading of SPFx Packages | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/js-dynamic-bundling-libraries

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
10 minutes

chunk

chunked

package

bundling

payload

components

context

injection

spfx

javascript

6 Aug 2020

In this 12-minute Maker focused demo, Luis Mañez uses a SPFx Outlook Add-in and Microsoft Graph ToDo endpoint (in preview) to add a To-Do task to one of the users’ task lists in Outlook. This Add-in uses the SPFx CreateTask Web part to call graph. Of course, you may use the SPFx web part in Outlook, Sharepoint or in Teams. The presenter delivers a complete step-by-step on deploying the Outlook Add-in. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 16, 2020.

Demo Presenter: Luis Mañez (ClearPeople) | @luismanez

Supporting materials:
• Create To-Do Task from Email (Outlook Add-in) | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-outlook-add-todo-task

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

1 participant
12 minutes

tasks

mailbox

email

outlook

send

package

app

admin

planner

spfs

30 Jul 2020

In this 9-minute Developer focused demo, Sergei Sergeev introduces us to a command line utility, that uses the SPFx Fast Serve tool to speed up the gulp serve process (bundle). The tool adds necessary files to run your own webpack-based build with webpack dev server. Technically it's a custom webpack build, which produces the same output files as SPFx build pipeline, but much faster. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 30, 2020. Useful on pages with multiple webparts as it compiles only changed files.

Demo Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:
• SPFx overclockers or how to significantly speed up the "gulp serve" command | https://spblog.net/post/2020/03/24/spfx-overclockers-or-how-significantly-speed-up-the-gulp-serve-command
• SPFx Fast Serve Tool | https://github.com/s-KaiNet/spfx-fast-serve

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
9 minutes

gulp

server

execute

browser

sharepoint

serve

webpack

tasks

slower

refreshes

16 Jul 2020

In this 9-minute Maker focused demo, first time contributor Pieter Heemeryck added the classic game of Minesweeper into the PnP Samples repository as a SPFx webpart created with Fluent UI. Get to know the code through the CodeTour (VS Extension) he recorded. Functionality: Click (discover), Plant (flag), chording, reset, 3 difficulty level settings. Displays real-time and high score. High Scores – SharePoint API REST calls to back-end SharePoint list. Added features (modes) for efficient Mobile gaming experience. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 16, 2020.

Demo Presenter: Pieter Heemeryck (Delaware Belux) | @heemeryckpieter

Supporting materials:
• Minesweeper in SPFx | https://digitalworkplace365.wordpress.com/2020/07/08/minesweeper-in-spfx/
• Minesweeper | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-minesweeper
• Upgrading SharePoint Framework projects using Office 365 CLI CodeTour upgrade | Hugo Bernier (Tahoe Ninjas) | @bernierh – https://youtu.be/XXfcGVuXizs?t=2274

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

2 participants
9 minutes

minesweeper

mindsweeper

games

helpers

manage

technical

challenge

demo

executed

microsoft

14 Jul 2020

In this 25-minute developer focused demo, Sergei Sergeev & Andrew Koltyakov - show 2 options for “styling” inside SharePoint components using Framework dependent JavaScript (React) or Framework agnostic TypeScript. The presenters’ step-through the two approaches for stylizing a button and background, drawing from TypeScript (Sergei) and Styled-Components (Andrew) libraries. Stylized Components is a modern and popular way to provide CSS in JS and has a tiny learning curve especially for React developers. The Pros and Cons of CSS in JS are discussed. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 4, 2020.

Demo Presenters:
• Sergei Sergeev (Mastaq) | @sergeev_srg
• Andrew Koltyakov (ARVO Systems) | @koltyakov

Supporting materials:
• Styling SharePoint Framework components using CSS in JS approach | Sergei Sergeev (Mastaq) | @sergeev_srg | https://spblog.net/post/2020/04/22/styling-sharepoint-framework-components-with-css-in-js-approach
• "CSS in JS" with SharePoint Framework and TypeStyle | https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-css-in-js-typestyle/README.md

Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

3 participants
25 minutes

css

gis

sharepoint

sss

features

understanding

sergei

drawback

usability

projects

9 Jul 2020

Discover how every experience can become more collaborative and engaging with the Microsoft 365 platform – starting with SharePoint. SharePoint serves as the center of collaboration – where content is stored and communicated across teams, departments, and the whole organization. See the latest development advancements and new capabilities for SharePoint. You’ll take away new ideas for building next-generation collaboration applications and get the essential roadmap for custom apps in your organization. Presented by Luca Bandinelli

Learn more about the SharePoint Framework (SPFx): https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview
Learn more about Microsoft 365: https://www.microsoft.com/microsoft-365

1 participant
26 minutes

sharepoint

share

advanced

manage

365

collaboration

microsoft

max

workflow

provisioning

9 Jul 2020

In this 11-minute developer focused demo, Alex Terentiev shows a sample web part that stores a Microsoft Teams Personal App's - Web Part properties (configuration settings) using the custom Settings Panel and a custom hidden list located in the user's OneDrive. The properties service gets the user’s properties from the user's OneDrive via Microsoft Graph. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 18, 2020.

Demo Presenter: Alex Terentiev (Sharepointalist) | @alexaterentiev

Supporting materials:
• React Teams Personal App Settings Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-teams-personal-app-settings

Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

2 participants
11 minutes

configuration

sharepoint

settings

webparts

user

interface

hosted

storing

customize

onedrive

2 Jul 2020

In this 8-minute Developer focused demo, Sudharsan Kesavanarayanan introduces viewers to a SPFx Application extension called Alert Message that enables site owners to setup and manage department/user focused, time banded Alert messages to be displayed immediately above a SharePoint page header. The message is easily managed in a SharePoint list. The client-side solution uses Morphext, Animate.css, @pnp/sp (2.0.4) and React functional (Alert) component with hooks. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 2, 2020.

Demo Presenter(s): Sudharsan Kesavanarayanan (NTT) | @sudharsank

Supporting materials:
• Knowledge Share | https://spknowledge.com/
• Pre-allocate space for SharePoint Framework extension placeholders | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/basics/preallocated-space-placeholders

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

2 participants
8 minutes

alerts

message

application

demo

sharepoint

client

animate

manage

automatically

comm

2 Jul 2020

In this 14-minute Site Admin focused demo, Bo George introduces viewers to a (SPFx React) Page Hierarchy web part that allows Site Admins to manually define relationships between pages as an alternative to hard-coded links, quick links or a folder defined hierarchy. Behind the scenes in a list, Admins align each page (containing the web part) to a parent page, i.e., home page or other page in the site collection… effectively defining the breadcrumb trail users see on the page. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 2, 2020.

Demo Presenter(s): Bo George (ThreeWill) | @bo_george

Supporting materials:
• Modern SharePoint Page Breadcrumbs Fix | https://threewill.com/modern-sharepoint-page-breadcrumbs-fix/
• React Pages Hierarchy | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-pages-hierarchy

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

2 participants
14 minutes

webpart

navigation

site

homepage

layout

users

sharepoint

manage

project

spaceship

2 Jul 2020

In this 15-minute Developer focused demo, Hugo Bernier introduces viewers to a Visual Studio Code extension found in the Office 365 CLI that methodically steps users through an upgrade of a SPFx project from SPFx v1.0 to v1.10 and soon to v1.11. Recently, a CodeTour was added to the SPFx Starter Kit and moving forward CodeTours will be routinely added to PnP Samples. With CodeTour, you know exactly which files to upgrade in your project. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 2, 2020.

Demo Presenter(s): Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• spfx project upgrade | https://pnp.github.io/office365-cli/cmd/spfx/project/project-upgrade/
• SharePoint Starter Kit v2 – CodeTour | https://github.com/pnp/sp-starter-kit/tree/master/.tours
• CodeTour | https://aka.ms/codetour

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

2 participants
15 minutes

sharepoint

upgrades

version

office

cli

project

execute

manage

spf

npm

18 Jun 2020

In this 14-minute developer focused demo, Paul Schaeflein introduces viewers to Visual Studio Codespaces - a viable cloud-hosted dev environment (development container) accessible from anywhere. Essentially, Visual Studio in a browser. Connect to existing Azure DevOps or GitHub Repo. Developers can create a container and configure it as an SPFx environment. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 18, 2020.

Demo Presenter: Paul Schaeflein (AddIn365) | @paulschaeflein

Supporting materials:
• Using Visual Studio Codespaces for SPFx development | https://www.schaeflein.net/tag/codespaces/
• spfx-codespaces | https://github.com/pschaeflein/spfx-codespaces
• spfx-codespaces/.devcontainer/spfx-setup.sh | https://github.com/pschaeflein/spfx-codespaces/blob/main/.devcontainer/spfx-setup.sh

Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

1 participant
8 minutes

spaces

remotely

sharepoint

setup

git

launch

microsoft

vm

studio

cloud

18 Jun 2020

In this 8-minute developer focused demo, Paul Schaeflein introduces viewers to the Adaptive Card Viewer that uses React Hooks to get information. Essentially this is the React Hooks version of The Adaptive Cards Host (Hugo Bernier) demoed on this call in April. The React FunctionComponent uses React useEffect hooks to get info. Hooks and functional components can be used along-side class components. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 18, 2020.

Demo Presenter: Paul Schaeflein (AddIn365) | @paulschaeflein

Supporting materials:
• react-adaptivecards-hooks | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-adaptivecards-hooks
• Creating an SPFx Web Part using React Hooks | https://www.schaeflein.net/creating-an-spfx-web-part-using-react-hooks/
• Adaptive Cards Host web part | Hugo Bernier (Tahoe Ninjas) | @bernierh https://twitter.com/bernierh | https://www.youtube.com/watch?v=gWrvC-0HF4A

Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

1 participant
7 minutes

hooks

sharepoint

adapter

connect

react

host

versions

payload

pjs

repo

28 May 2020

In this 17-minute developer focused demo, Eric Overfield gives us a tour of the newly released SharePoint Developer’s starter kit that helps developers’ provision and customize SharePoint sites. This is a developer's (accelerator) tool for use in a developer tenant, as opposed to a production tenant even though the code is production quality. Starter Kit V2 has more web parts, templates, demos, and documentation than V1. Installation amounts to running 2 Cmdlets and waiting 10 minutes. The result: Fully provisioned and graphically stunning hub and team sites. This Kit is the result of countless hours of work by nearly 20 members of this PnP community. Please use, share and contribute. Starter Kit V2 contains: 16 SPFx web parts, 5 SPFx extensions, 1 SPFx library, 3 PnP provisioning templates, SPO provisioning template includes 1 very fully provisioned collaboration site, 2 team sites, populated mega menu, 15 communications site pages, and completely customizable PnP provisioning templates. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 21, 2020.

Presenter: Eric Overfield (PixelMill ) | @EricOverfield

Supporting materials:
• SharePoint Starter Kit v2 | https://github.com/pnp/sp-starter-kit/tree/v2

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

1 participant
17 minutes

sharepoint

version

provisioning

v2

share

kits

toolkit

overviews

project

webparts

21 May 2020

In this 12-minute developer focused demo, Robin Agten shares his machine translation SPFx extension that translates content on SharePoint pages (specifically page title and content in the Text Control web part only) using a Bot and the Microsoft Translator text API. Plain text and HTML are translated. The translation is literal, not localized, as stated in the disclaimer banner on the page. The user selects language from a dropdown and in-place translation is executed in seconds. This is a great quick translation solution as opposed to the localized, but time intensive multilingual translation option. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 21, 2020.

Presenter: Robin Agten (Delaware Consulting) | @AgtenRobin

Supporting materials:
• Language and region support for Translator | https://docs.microsoft.com/en-us/azure/cognitive-services/translator/language-support
• Translator 3.0: BreakSentence | https://docs.microsoft.com/en-us/azure/cognitive-services/translator/reference/v3-0-break-sentence
• Creating a SharePoint page translation extension using Azure Cognitive Services | https://digitalworkplace365.wordpress.com/2020/05/05/creating-a-sharepoint-page-translation-extension-using-azure-cognitive-services/
• Machine Translations Extension | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-application-machine-translations

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

2 participants
13 minutes

translation

language

multilingual

sharepoint

webpart

application

customizing

natively

extension

microsoft

21 May 2020

In this 6-minute developer focused demo, Vesa Juvonen delivers a preview of a Microsoft Teams solution that uses an SPFx Leads Management System web part, to interact with a LOB Leads Management system – API integration via Bot and SPFx messaging extensions. The M365 solution draws upon capabilities of Microsoft Graph, Bot Framework, SharePoint, SharePoint Framework, Teams, Azure, To Do/Planner and Adaptive Cards. This is a preview because Task modules (messaging extensions) are not yet supported. Messaging extensions are supported in SharePoint Framework v1.11, to be released by end of June 2020. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 21, 2020.

Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Leads Management System - LOB solution demo | https://github.com/pnp/sp-dev-solutions/tree/master/solutions/LeadsLOBSolution

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

1 participant
6 minutes

implementing

wakeboard

hosted

setup

enterprise

task

controller

repository

microsoft

bots

7 May 2020

The Modern React Content Query web part sample was recently updated to SPFx 1.10. One useful feature - as developers select fields in the Property Pane, the web part and handlebars template are built. As well, there is a new capability – Dynamic Data Support (DDS), the focus of this 19-minute developer focused demo delivered by Paolo Pialorsi. DDS allows the Content Query web part (data provider) to be configured to provide data dynamically to an external – your custom SPFx web part (data consumer). This data sharing is accomplished by binding the web parts enabling your web part to get data pulled by the Content Query web part. Available data fields from Content Query web part are exposed in your custom web part's property pane. The binding is accomplished with Dynamic Data functionality of SPFx. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 7, 2020.

Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Sample: React Content Query web part/Online https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-content-query-webpart/Online

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

2 participants
20 minutes

sharepoint

version

query

modern

tmp

client

web

edit

metadata

content

7 May 2020

In this 9-minute developer focused demo, Ramin Ahmadi shares an idea for orgs that use Yammer. His web part allows users to Praise colleagues from a Teams tab or Sharepoint page. In the web part, you can search for people, add a message, select a Yammer Group, select a praise representation icon and preview the post in Yammer. The web part uses the Yammer REST API SPFx web part, React hooks, SPFx people picker control, and gets tokens for authenticating to M365 resources from Azure AD. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 7, 2020.

Presenter: Ramin Ahmadi (Content and Code) | @raminahmadi1986

Supporting materials:
• Sample: React Yammer API https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-yammer-api
• Sample: React Yammer Praise https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-yammer-praise

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

2 participants
9 minutes

yammer

communicate

client

hosting

users

token

authenticate

admin

app

sharepoint

7 May 2020

Does your customer love folders? People and processes are often aligned to folders. In this 8-minute developer focused demo, Joel Rodrigues shows an extension that both showcases a customer solution for finding folders and also demonstrates how SPFx reusable controls can be leveraged to quickly create an extension or web part to address a customer need. This “React Jump to folder extension” sample, available in the PnP SPFx extension samples gallery, can be deployed to every document library. The extension uses PnPjs to quickly render a very easy to drill into Folder Filter panel. The panel renders within seconds upon selecting the “Jump to Folder” button in the top ribbon. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 7, 2020.

Presenter: Joel Rodrigues (Storm Technologies) | @JoelFMRodrigues

Supporting materials:
• Sample: React Jump to Folder https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-jump-to-folder
• Blog: SharePoint folder filter SPFx extension https://www.m365-dev.com/2020/03/13/jump-to-folder-spfx-extension/

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

2 participants
8 minutes

sharepoint

folder

folders

shared

users

manage

remotely

copy

scroll

simplicity

29 Apr 2020

In this video David Warner discusses the new extension feature in PnPjs v2. This new capability allows you to easily add your custom functionality directly into the fluent API.

Video demonstrates following different core scenarios:
- What is the extension capability and how does it work?
- How do I add my own extensions?
- How to augment the TypeScript typings to ensure my extensions appear in the fluent chain

Presenter: David Warner (Catapult Systems) @davidwarnerii

You can find additional documentation and other details around the PnPjs from following resource:
- https://aka.ms/pnpjs
- PnPjs GitHub repository - https://github.com/pnp/pnpjs/

If you ran into any issues on using this library, please do let us know at the the GitHub issue list - https://github.com/pnp/pnpjs/issues

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

1 participant
11 minutes

pjs

extensions

pn

packages

demo

functionality

reusable

library

new

sharepoint

23 Apr 2020

In this 8-minute developer focused demo, Robin Agten calls an open source API to pull country specific COVID data points assembled by Johns Hopkins University, into the COVID Info web part. 3 data points (Confirmed Cases, Deaths, Recovered) are collected by country, by time period and rendered in a table and graph. There is only one mandatory configuration requirement - enter the iso2 country code. Conditional coloring of data optional. The Data is pulled into the web part via the Corona component. The web part uses PnP React Controls. Office UI fabric is used in the component. This demo is extracted from the bi-weekly PnP community - SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded April 23, 2020.

Presenter: Robin Agten (Delaware) | @AgtenRobin

Supporting materials:
• COVID 19 information web part | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-covid19-info
• COVID-19 SPFx information web part | https://digitalworkplace365.wordpress.com/2020/03/21/covid-19-spfx-information-web-part/

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

2 participants
8 minutes

data

demo

webpart

information

configuration

country

graphs

code

covert

pmp

22 Apr 2020

In this video we'll walkthrough the steps on creating a complex Microsoft Teams personal apps using SharePoint Framework. Video shows how to use Microsoft Teams App Studio to create a manifest for SharePoint Framework solution which can provide a multi-tab experience and potentially to include also a bot on the personal solution.

This setup is aligning with the design guidance for the Microsoft Teams personal apps to have standard set of tabs for end users. Video demonstrates creation of the solution manifest file manually, rather than taking advantage of the standard "Sync to Teams" synchronization for getting SharePoint Framework solutions also available in Microsoft Teams.

Resources:

- Microsoft Teams Personal Apps - Design Guidance - https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/personal-apps
- Creating manifest manually for SharePoint Framework solutions - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart
- Getting started tutorial on creating Microsoft Teams channel tabs with SharePoint Framework - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

Learn more about the Microsoft 365 & SharePoint developer community at: http://aka.ms/m365pnp.

1 participant
32 minutes

sharepoint

applications

personal

apps

manage

microsoft

multi

platform

version

permissions

8 Apr 2020

In this 17-minute demo delivered by Bo George - principal consultant at ThreeWill, learn about a Question and Answer SharePoint Framework (SPFx) web part that can be easily added to a site/page and configured by the site owner or site collection admin that both delivers a Q & A experience and controls user access. Capabilities shown: UI for submitting, liking, closing and promoting questions; displaying threaded responses; and behind the scenes access management that allows questions and answers from people outside the site’s permissions structure. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded March 27, 2020.

In the demo, Bo starts with the Benefits site template from SharePoint look book. Site collection permissions need to allow experts from across the org, who can answer the question, the ability to do so as well as to record the response in a list on the site. Note: Presently this web part is not open source. It was shown to demonstrate an approach to for using SPFx controls to address a customer need.

Presenter: Bo George (ThreeWill) | @bo_george

Supporting materials:
• The case for a native SharePoint questions and answers solution | https://threewill.com/the-case-for-a-native-sharepoint-questions-and-answers-solution/
• PnPjs | https://github.com/pnp/pnpjs/
• Quill.js | https://github.com/quilljs/quill
• Look Book | https://lookbook.microsoft.com

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

2 participants
17 minutes

users

collaborative

microsoft

managed

sharepoint

moderators

question

george

provisioning

yammer

6 Apr 2020

This 11-minute demo delivered by Vardhaman Deshpande and Garry Trinder for coding developers shows two different approaches for how components in an application can find and share data. The presenters’ step-through indirect (class component) and direct (functional component), hooks approaches that deliver the same end result. If you're comfortable creating react components, then you will appreciate how direct React hooks increase your efficiency. If you are new to React hooks, watch this demo and compare the approaches. Regardless of your preference, SharePoint Framework (SPFx) supports both implementations. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded March 27, 2020.

Presenters:
• Vardhaman Deshpande (Valo) | @vrdmn
• Garry Trinder (CPS) | @garrytrinder

Supporting materials:
• SPFx: Using React hooks to globally share service scope between components | https://www.vrdmn.com/2020/02/spfx-using-react-hooks-to-globally.html
• SPFx Service scopes hooks | https://github.com/garrytrinder/spfx-servicescopes-hooks

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

3 participants
12 minutes

scopes

cope

framework

sharepoint

service

context

user

function

provider

implementation

19 Mar 2020

This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on March 19, 2020.

In this 12-minute demo, David Warner and Hugo Bernier show off a SPFx Web Part used to put CSS styles on a single page. Capabilities demonstrated include banner formatting, hover effects, tilt list of photos, customize fonts, animations, sprites and more. Why not use an SPFx Extension for CSS? Extensions affect every page in a site collection whereas a web part affects only the pages on which it is added. List Formatting enhancements can and often do differ page by page. The code consists of controls and web part. The presenters suggest you should use this web part responsibly!

Demo Presenters:
• David Warner (Catapult) | @DavidWarnerII
• Hugo Bernier (Point Alliance) | @bernierh

Supporting materials:
• Enhanced list formatting sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-enhanced-list-formatting
• CSS Pseudo Elements: https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements
• CSS Pseudo Classes: https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes
• CSS Animations: https://developer.mozilla.org/docs/Web/CSS/animation

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
12 minutes

enhanced

extensions

formatting

styled

overview

editing

isles

elements

webpart

spf

12 Mar 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on March 12, 2020

For this 8-minute demo, Alex Terentiev shares a customizable React Twitter web part you can add to your page to display tweets on a timeline. It leverages available React components and PnP controls. There are many, many options in the Property pane for this control. While there is an out-of-the-box Twitter web part today, it is not as configurable as this PnP web part.

Presenter: Alex Terentiev (SharePointalist) | @alexaterentiev

Supporting materials:
• React Twitter Embed Component | https://npmjs.com/package/react-twitter-embed
• Request help making react Twitter Feed component #461 | https://github.com/SharePoint/sp-dev-fx-controls-react/issues/461

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
8 minutes

tweeter

webpart

twitter

demo

interface

configure

controls

package

profile

embed

12 Mar 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on March 12, 2020

In this 9-minute demo, Sudharsan Kesavanarayanan presents a web part that delivers an "advanced comments box" – using SPFx with jQuery Plugin. Out-of-the-box commenting is a limited experience today. The robust capabilities of this web part include: comment classifications/sort by, add attachments, see previews, like and reply to comments, hash tag and ping users, icon for new comments. The purely JS web part uses jQuery and SPFx property controls 1.16.0.

Presenter: Sudharsan Kesavanarayanan | @sudharsank

Supporting materials:
• Advanced Commenting Sample | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/js-advanced-commenting
• jQuery comments | https://viima.github.io/jquery-comments

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
9 minutes

preview

comments

profile

attachments

demo

edit

advanced

helper

sharepoint

chats

12 Mar 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on March 12, 2020

In this 14-minute demo, Martin Hatch demonstrates how to use an SPFx Application Customizer to inject an additional search box into the header of each page, which uses the "Search Settings" (at either the Site Collection or Sub-Site level) to determine the redirect page. This allows the implementer to provide an integrated and branded search box to send users to a "classic" Search Center, or to a custom page, rather than to the out-of-the-box “modern search" page. The site collection scope focused JS web part is ideal for customers with extremely focused content with loads of custom metadata or for global orgs with huge groups with 1000s of pages and docs that want their own dedicated search center while not wanting to disrupt the global level search functionality.

Presenter: Martin Hatch | @MartinHatch

Supporting materials:
• Sample: sp-dev-fx-extensions | https://github.com/MartinHatch/sp-dev-fx-extensions/tree/master/samples/js-application-intranet-searchbox

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
14 minutes

customizations

application

users

navigation

query

microsoft

microsite

website

sharepoint

demoed

2 Mar 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on February 27, 2020

In this 20-minute demo, Nanddeep Nachan - SharePoint, Office 365, Microsoft Azure Consultant in partnership with Smita Nachan - SharePoint, Office 365 Consultant from Pune, India, walks viewers through a multi-functional SPFx web part/sample that’s effectively a single front-end for all things related to Microsoft Office 365 group management. The web part uses Microsoft Graph to return basic information about public and private groups the user is presently or not presently affiliated. The user is then able to join or leave groups (and in the case of joining a private group, a Power Automate flow that can be triggered requesting Group Admin approval), search groups, manage group administrators, browse Microsoft Teams associated with a selected group, and finally to set up a new group. The sample is developed with SPFx 1.9.1.

Presenters:
• Nanddeep Nachan | @NanddeepNachan
• Smita Nachan | @SmitaNachan

Supporting materials:
• SPFx sample - React Manage O365 Groups | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-manage-o365-groups
• Sample: React Manage O365 Groups | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-manage-o365-groups
• Blog: Create Office 365 Groups with SPFx | https://www.c-sharpcorner.com/article/create-office-365-groups-with-spfx/
• Blog: List out Office 365 Groups with SPFx | https://www.c-sharpcorner.com/article/list-out-office-365-groups-with-spfx/
• Blog: Calling Microsoft Graph api from Power Automate Flow | https://www.c-sharpcorner.com/article/calling-graph-api-from-power-automate-flow/
• Blog: Execute Power Automate Workflow from SPFx | https://www.c-sharpcorner.com/article/execute-power-automate-workflow-from-spfx/

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
21 minutes

sharepoint

shared

manage

users

teamwork

office

hosting

microsoft

365

groups

27 Feb 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on February 27, 2020

In this 13-minute demo, Markus Möller - Avanade, Germany, shares a web part that enables the user to select a folder on a OneDrive, in a Group, a SharePoint library, or in a Microsoft Team in which to store an e-mail. Behind the scenes, the web part delivers the necessary Microsoft Graph calls to move large 4MB+ and smaller mails through MimeStream to their destination.

Presenter:
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials:
• Blog post - An Outlook Add-in with SharePoint Framework Introduction| https://mmsharepoint.wordpress.com/2020/01/11/an-outlook-add-in-with-sharepoint-framework-spfx-introduction/
• SPFx sample - React Outlook Copy to Microsoft Teams | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-outlook-copy2teams
• Tutorial for creating Outlook Web Access extension using SharePoint Framework - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
13 minutes

outlook

display

attachments

introduce

demonstrate

application

sharepoint

message

access

microsoft

13 Feb 2020

In this guidance video, we concentration how to build Microsoft Teams personal apps using SharePoint Framework. We introduced a capability to build Microsoft Teams tabs with SharePoint Framework with the v1.8 and with the 1.10, you can also implement personal apps with SharePoint Framework.

Any SharePoint Framework web part can be updated to be a Microsoft Teams tab or personal app without requirements for code changes, just by updating solution metadata - it does not get easier than this.

Key advantages on using SharePoint Framework for the Microsoft Teams development are the following:

- Unified development experience with Microsoft Teams, SharePoint and Office add-ins (currently in preview)
- Automatic hosting of your solution - no need for Azure web sites or other host setup
- Streamlined deployment and operations - You can simply deploy your solution as Microsoft Teams app using UX elements available for administrators with one click publishing of your solution
- Easy management of Graph and API permissions with the SharePoint Framework model
- Direct access on underlying storage and other services in SharePoint and OneDrive
- Optimized load times with Office 365 CDN settings automatically applied, if feature is enabled in the tenant level (it's free, so you should do it)

Video covers following assets and resources:

- Step-by-Step tutorial for creating Microsoft Teams tab or personal app using SharePoint Framework - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab
- Office 365 CLI - for easy solution upgrades (it's magic) - https://pnp.github.io/office365-cli/
- Leads solution - Works as a Teams tab, Teams personal app, SharePoint app page or SharePoint web part - https://github.com/SharePoint/sp-dev-solutions/tree/master/solutions/LeadsLOBSolution

More details around the different assets and community efforts from http://aka.ms/sppnp

1 participant
15 minutes

sharepoint

microsoft

applications

download

admin

office

easy

access

host

micro

13 Feb 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on February 13, 2020

In this 20-minute demo, Sébastien Levert – MVP, reviews 2 ways to insert a React Calendar component into a Teams: 1) as a Teams Channel tab (events only from the team calendar) or 2) as a Personal App (events from both the team and your personal calendars). Showcased is the power and diversity of an SPFx web part - as it and SPFx web parts generally can be placed in products spanning the productivity suite, i.e., SharePoint, Teams tab, Teams Personal App, Office Add-ins.... Quit building calendars and save time getting data courtesy of Microsoft Graph. This web part also delivers the right color calendar as it detects and adopts destination page color theme.

Presenter:
• Sébastien Levert (Valo Intranet) | @sebastienlevert

Supporting materials:
• Video: No-code solution to expose your modern SharePoint Online corporate portal in Microsoft Teams | https://www.youtube.com/watch?v=WyB4MBQwICs
• Video: AMA on SharePoint Framework current and vNext | https://www.youtube.com/watch?v=FNx6I5-wfTo
• Video: PnPjs v2 Deep Dive on Selective Imports | https://www.youtube.com/watch?v=xekNSc3GAtY
• PnP SPFx Web Part Samples | https://github.com/SharePoint/sp-dev-fx-webparts
• Full sized JavaScript Calendar | https://fullcalendar.io
• Fluent UI React | https://github.com/microsoft/fluent-ui-react

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
20 minutes

sharepoint

share

project

software

hosts

tooling

spf

enhancement

showcase

webparts

9 Feb 2020

This tutorial will guide you on how to create field customizer using the SharePoint Framework version 1.10 from February 2020.

You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/building-simple-field-customizer.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
24 minutes

customizer

customizers

customize

sharepoint

creating

extensions

provisioning

rendering

tutorials

frameworks

9 Feb 2020

This tutorial will guide you on how to create ListView Command Set customizer using the SharePoint Framework version 1.10 from February 2020.

You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/building-simple-field-customizer.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
20 minutes

sharepoint

execute

rendered

extensions

customizer

setup

tutorials

users

dialogs

disconnect

9 Feb 2020

This tutorial will guide you in building a simple SharePoint Framework Application Customizer extension using the SharePoint Framework version 1.10 from February 2020.

You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/build-a-hello-world-extension.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
11 minutes

sharepoint

helloworld

extensions

framework

program

generator

downloading

folder

home

shipment

9 Feb 2020

This tutorial will guide you on how to use page placeholders from Application Customizer extension using the SharePoint Framework version version 1.10 from February 2020.

You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/using-page-placeholder-with-extensions.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
13 minutes

placeholders

placeholder

interface

settings

version

framework

extensions

themes

stylings

roadmap

9 Feb 2020

This tutorial will guide you on how to deploy your application customizer to SharePoint site using the SharePoint Framework version 1.10 from February 2020.

You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/serving-your-extension-from-sharepoint.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
10 minutes

deploying

sharepoint

extensions

configuration

package

application

host

home

tutorials

xml

9 Feb 2020

This tutorial will guide you on how to deploy your application customizer to SharePoint site using the SharePoint Framework version 1.10 from February 2020.

You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/hosting-extension-from-office365-cdn.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
11 minutes

sharepoint

hoster

hosting

setup

administrator

manage

deploying

download

microsoft

cdn

8 Feb 2020

This tutorial will guide you in using SharePoint Feature Framework in the SharePoint Framework to provision SharePoint assets to sites when your solution is getting installed on the site.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/provision-sp-assets-from-package.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
26 minutes

deploying

sharepoint

deployments

provisioning

package

v1

configuration

framer

client

guide

8 Feb 2020

In this tutorial, we will create a SharePoint Framework web part and use Microsoft Graph to get access on the user specific information - or more specifically in this scenario, we are accessing latest emails of the user.

You can find a written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
21 minutes

sharepoint

setup

documentation

client

implementing

manage

tutorial

advanced

bhosle

microsoft

7 Feb 2020

This tutorial will guide you in building a simple web part that uses one of the Office UI Fabric components, DocumentCard.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
9 minutes

sharepoint

tutorial

creating

execute

office

application

framework

package

copy

ui

7 Feb 2020

In this tutorial, let's add the jQueryUI Accordion to our web part project. We will build on top of the skills from previous tutorials but will create a new web part of it.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
11 minutes

sharepoint

webpart

loader

remotely

configuration

visitors

exporting

client

tutorial

ui

6 Feb 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on February 6, 2020.

In this 15-minute video, Anoop Tatti - SharePoint developer at Content and Code in London and Velin Georgiev - SharePoint and Office 365 technical architect at Pramerica Ireland, setup and run a workflow in GitHub that includes Office 365 CLI Actions. Examples of typical event driven workflows in GitHub are push, pull request, issue opened, issue edited, label created, label deleted. Tasks in a push code workflow may include: Build, test, deploy code and send informational e-mail to multiple people in org. Velin gives viewers a brief overview of CLI – installation and syntax. Anoop shows running a workflow that moves a SPFx package into production.

Office 365 CLI contributors on this project include: Garry Trinder (CPS Solutions) | @garrytrinder, Velin Georgiev (Pramerica) | @VelinGeorgiev, and Waldek Mastykarz (Rencore) | @waldekm

Demo Presenters:
• Anoop Tatti (Content and Code) | @anooptells
• Velin Georgiev (Pramerica) | @VelinGeorgiev

Supporting materials:
• PnP Office 365 CLI | https://pnp.github.io/office365-cli/
• Blog post - Create GitHub Actions for SPFx solution | http://bit.ly/complete-workflow-using-all-actions
• GitHub Actions documentation | http://bit.ly/github-actions-documentation
• Office 365 CLI GitHub Actions | http://bit.ly/o365-cli-github-actions
• Office 365 CLI Login Action | http://bit.ly/o365-cli-login-action
• Office 365 CLI Deploy Action | http://bit.ly/o365-cli-deploy-action
• Office 365 CLI Runscript Action | http://bit.ly/o365-cli-runscript-action
• GitHub Actions Tips | http://bit.ly/github-actions-tips
• GitHub.com/marketplace | https://github.com/marketplace

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

3 participants
15 minutes

workflow

workflows

github

host

execution

tasks

sharepoint

actions

access

push

3 Feb 2020

This tutorial will guide you through on how you can use SharePoint Framework to build a Outlook Web App add-in. This is a preview capability as part of the SharePoint Framework 1.10, demonstrating the future work around other Office clients in both desktop and web user interface.

You can find the written version of this tutorial from the following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial

January 2020 version using SharePoint Framework 1.10 (preview).

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
15 minutes

sharepoint

edits

office

frameworks

user

execute

preview

tutorial

splitter

insights

3 Feb 2020

This tutorial will guide you through on how you can use SharePoint Framework to build a custom solution, which can then be surfaced in both SharePoint and in Microsoft Teams as a tab.

You can use the same code base across Office 365 as SharePoint, Microsoft Teams or Office add-in solution.

You can find the written version of this tutorial from the following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
24 minutes

sharepoint

themes

tutorial

user

downloaded

webpart

tabs

microsoft

starting

teamstepps

3 Feb 2020

Video showing in practice how to get started on using Microsoft Graph within your SharePoint Framework solutions. Performs steps defined in https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

1 participant
21 minutes

sharepoint

documentation

client

configuration

manage

tutorial

advanced

bhosle

microsoft

graph

21 Jan 2020

This SharePoint focused demo was extracted from the Microsoft Graph Developer Community call recorded on January 7, 2020. The entire 60-minute call/demo is found at: https://youtu.be/efcg0n6iRco

In this 13-minute extract, Jeremy Thake (Microsoft Graph) and Todd Baginski (Microsoft MVP) share a cross-platform solution called Meeting Capture app. The result of a collaborative effort in which many M365 orgs including SharePoint (Vesa Juvonen), Graph (Ben Summers, Nikola Metulev), and Teams (Joey Glocke). The sample app was created for and shown at Microsoft Ignite 2019 and continues to evolve. In the first 7 minutes of this session, Jeremy gives viewers a capabilities overview of the all-in-one meeting notes tool. Then in the last 6 minutes, Todd explains the role played by SharePoint namely to store documents and to display meeting events and tasks assigned for the selected call either within SharePoint or inside a Microsoft Teams tab. The web part retrieves task information for meetings aligned to a specific Teams’ channel via the Graph API. For meetings created with this app, all pre-read documents as well as attachments collected during a meeting, are stored in the meeting related SharePoint folder created when the meeting was created.

In the full Graph call recording, Jeremy and Todd are joined by Nikola Metulev (Microsoft Graph), who explains how The Microsoft Graph Toolkit was used for this solution.

Meeting Capture capabilities include: Meeting scheduling, document/notes/agenda capture, task assignments, meeting logistics reporting/approvals. The app is effectively a single functional front-end that connects to a host of platform services each of which may be accessed separately or via the Meeting Capture app. This uniting palate of capabilities is neatly tucked into Microsoft’s robust Teams unified communications platform.

The Meeting Capture App incorporates: Graph API, Azure Services (AD, registration, permissions, SQL), SharePoint/SPFx, Outlook, Planner, SQL, OneNote, Teams, Graph Toolkit, App Studio, Power Automate.

Presenters:
• Overview: Jeremy Thake (Microsoft) | @jthake
• Function: Todd Baginski (Canviz) | @toddbaginski

Supporting materials:
• Code for the Meeting Capture App https://github.com/microsoftgraph/meetings-capture-sample Todd Baginski (Microsoft) | @toddbaginski
• Using Microsoft Graph APIs in your solution https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
• End to end demonstration of the Meeting Capture application functionality https://youtu.be/i2dqLM_ciUA

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint/Office 365 developer community at: http://aka.ms/sppnp.

2 participants
13 minutes

committee

members

attendee

governance

discussions

user

schedule

app

suggestions

tab

16 Jan 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 16, 2020.

In this 8-minute video, Premier Field Engineer at Microsoft Office 365 Development, Brad Schlintz, shares a new capability recently added to the PnP search web part that allows organizations to include their own rich query suggestions. The webpart draws upon functionality found in the PnP extensibility library. There are 2 suggestion scenarios. "Zero query suggestion" – user types nothing in search box and yet suggestions are rendered on webpage as well as the more typical scenario that returns results after the user types a few letters.

Presenter:
• Brad Schlintz (Microsoft) | @bschlintz

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

3 participants
8 minutes

suggestions

suggestion

users

provider

query

selected

sharepoint

microsoft

tooltip

pnp

16 Jan 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 16, 2020.

In this 10-minute video, PnP Community member and Senior Developer Federico Porceddu shows us a new SPFx web part that allows developers and administrators to list all global and site collection app catalogs in a tenant. The web part returns a list of sites that have site catalogs, as well as details on installed apps and versions. To accomplish this task previously required time, scripts and code.

Presenter:
• Federico Porceddu (Avanade) | @FedericoSPDev

Supporting materials:
• Blog Post: https://www.federicoporceddu.com/2019/11/08/site-collection-app-catalogs-summary-view/
• Sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-admin-sc-catalog-pnpjs
• Blog post: http://sharepoint-tricks.com/check-all-sharepoint-sites-collection-with-app-catalog-active/ | David Ramalho (BindTuning) | @DavRamalho
• Reference: https://docs.microsoft.com/sharepoint/dev/general-development/site-collection-app-catalog

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

1 participant
10 minutes

fix

sampor

administrator

massimo

twehues

ai

mancato

sisi

included

local

16 Jan 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 16, 2020.

In this 11-minute video, PnP Community member and Microsoft 365 Developer Franck Cornu reviews several new features in the PnP modern search web part released in December. The latest capabilities built leveraging extensions from the SharePoint extensibility library, deliver the quickest means yet to customizing your UI - pages and columns, creating your own components and uploading them to your app catalog.

Presenter:
• Franck Cornu (aequos) | @FranckCornu

Supporting materials:
• Reference: https://github.com/microsoft-search/pnp-modern-search
• PnP Modern Search: https://microsoft-search.github.io/pnp-modern-search/

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

1 participant
11 minutes

customization

customize

customized

ui

configuration

pnp

configure

program

renderer

model

8 Jan 2020

This demo is taken from the Office Add-Ins Developer Community call recorded on January 8, 2020. Visit the Office 365: Developer Blogs to view the entire community call.

In this 18-minute demo, Vesa Juvonen (Microsoft) starts the session with a topic backgrounder - architecture and explanation of Microsoft's focus on delivering a unified toolchain across Microsoft 365 platform. Then Vesa steps the viewer through the creation of an Outlook Web Access (OWA) extension (Office add-in) using the SharePoint Framework (SPFx). The distinct advantage of using the SharePoint Framework to create Office add-ins is the Framework is completely optimized for rapidly creating and hosting your Office Web Applications as opposed to hosting your Office Add-in app on a separate service. The SPFx Yeoman Generator is used to execute many tasks behind the scenes such as setting up permissions, creating the manifest, and bundling all client-side assets.

Presenter:
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Article: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create
• Tutorial: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial
• Overview of SharePoint Framework: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
• Article: An Outlook Add-in with SharePoint Framework (SPFx) – Introduction | Markus Möller (Avanade) | @Moeller2_0 https://mmsharepoint.wordpress.com/2020/01/11/an-outlook-add-in-with-sharepoint-framework-spfx-introduction/

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
19 minutes

sharepoint

hosted

microsoft

administrator

access

authenticated

workloads

developers

extensibility

deploying

2 Jan 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 2, 2020.

In this 12-minute video, PnP Community member Joel Rodrigues shows viewers how accessing Project Online APIs via IntelliSense in SPFx is very easy as opposed to traditional methods. Joel has built upon foundational PnPjs Project API work from Pawel Hawrylak @pawelhawrylak.

Developers can try the Project module for PnPjs either by getting the published npm package or by downloading the code from GitHub. Two key advantages of using SPFx for Project is extensibility options and development time savings.

Presenter:
• Joel Rodrigues (Storm Technology Ltd) | @JoelFMRodrigues

Supporting materials:
• Sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-pnpjs-project-online
• Blog Post: https://joelfmrodrigues.wordpress.com/2019/01/08/spfx-solution-using-pnpjs-to-consume-project-online-rest-api/
• Original Repo - Project Package: https://github.com/phawrylak/pnpjs/tree/feature/project-api Pawel Hawrylak @pawelhawrylak

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

2 participants
11 minutes

sharepoint

project

pjs

versions

repository

presentation

webparts

dependencies

endpoints

supports

19 Dec 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 19, 2019.

In this 5-minute video, Aakash Bhardwaj, Office 365 Developer at HCL Technologies, walks through a SPFx extension example that uses React to get a thumbnail image URL from a list. On the toolbar select “Get Thumbnail”, from the pop-up select thumbnail size - Small, Medium, Large and finally Copy the returned link. The get link functionality also works for docs, videos... The thumbnail is fetched using the Graph API.

Presenter: Aakash Bhardwaj (HCL Technologies) | @aakash_316

Supporting materials:
• Sample code - https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-get-thumbnail

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

1 participant
6 minutes

thumbnails

thumbnail

file

pdf

sharepoint

visible

image

clipboard

xpx

extension

19 Dec 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 19, 2019.

In this 13-minute video, Federico Porceddu, SharePoint/Office365 Technical Architect - Avanade Advanced Technology Center, Italy, configures an open source SPFx React web part used to build a dynamic guided tour of the various elements on a SharePoint page. Information about a selected element is displayed in a pop-up box or "modal." Within the modal, the user can elect to view the next or previous element in the tutorial. On page tours are a quick way to acclimate the viewer to the elements of a page. For page owners, this is a quick, contextual and low-cost tutorial solution.

Presenter: Federico Porceddu (Avanade) | @FedericoSPDev

Supporting materials:
• Sample code - https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-tour-pnpjs
• Blog Post: https://www.federicoporceddu.com/2019/11/23/sharepoint-modern-page-tutorial-an-spfx-tour-sample-webpart/

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

2 participants
13 minutes

configuration

users

functionality

forum

webpart

model

support

guide

page

improvement

12 Dec 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on December 12, 2019.

In this 23-minute video, Julie Turner, demonstrates setting up Microsoft 365 Learning Pathways in a tenant. Learning Pathways now GA, is free curated product training from Microsoft updated quarterly that Admins can elect to expose (via web parts) on their SharePoint sites today. Microsoft and non-Microsoft content may be pulled from multiple sources and viewed on a single SharePoint page. Use Learning Pathways to quickly deliver topical readiness.

Presenter: Julie Turner (Sympraxis Consulting) | @jfj1997

Supporting materials:
• SharePoint Provisioning site: https://provisioning.sharepointpnp.com/
• Support/Github site: https://github.com/pnp/custom-learning-office-365
• Documentation: https://docs.microsoft.com/en-us/office365/customlearning/
• Learning pathways Admin Success Center: https://docs.microsoft.com/en-us/office365/customlearning/custom_successcenter

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

3 participants
23 minutes

microsoft

provisioning

sharepoint

users

customizable

admin

pathways

updates

apps

training

5 Dec 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 5, 2019.

In this 11-minute video, Federico Porceddu, Senior Developer at Avanade, Italy, walks through the React Teams Tabs web part that allows users to access a Microsoft Teams channel and Teams tabs within channels on a Modern SharePoint site without having to open the Teams app or Teams Web app. The web part shows all Teams channels/tabs linked to the Modern website. The Teams channel information is accessed via Microsoft Graph API.

Presenter: Federico Porceddu (Avanade) | @FedericoSPDev

Supporting materials:
• Blog Post: https://www.federicoporceddu.com/2019/10/31/react-teams-tabs-pnpjs-show-channels-and-tabs-from-a-modern-team-site-connected-to-ms-teams/
• Sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-teams-tabs-pnpjs

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

1 participant
11 minutes

manage

helper

model

feature

client

ppg

associated

needs

contacts

configure

28 Nov 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on November 28, 2019.

In this 28-minute video, Sergei Sergeev – developer/consultant from Minsk, Belarus, demonstrates using Azure Logic Apps, SharePoint application customizer and SignalR to deliver real-time PnP site provisioning status updates.

Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:

• Blog post: https://spblog.net/post/2019/11/19/show-the-progress-of-your-pnp-provisioning-process-with-sharepoint-application-customizer-and-signalr

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

3 participants
28 minutes

provisioning

sharepoint

server

provider

setup

implementation

process

demo

updates

25 Nov 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on November 21, 2019.

In this 6-minute video, Zach Roberts shows a SPFx webpart “React My Groups” that uses Microsoft Graph to grab Office 365 groups the current user is a member and returns a list of links to each group’s SharePoint site.

Presenter: Zach Roberts | @ZachSPODev

Supporting materials:
• Blog post: https://spodev.com/my-365-groups-webpart/
• GitHub: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-my-groups

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

2 participants
6 minutes

sharepoint

microsoft

webpart

webparts

users

intranet

graph

group

365

api

21 Nov 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on November 21, 2019.

In this 12-minute video, Hugo Bernier demonstrates a React extension that generates a QR code for a given URL pointing to a document, website, SharePoint library, etc. The presenter will post an article on this topic shortly at https://tahoeninjas.blog.

Presenter: Hugo Bernier (Point Alliance) | @bernierh

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

2 participants
12 minutes

canadian

toronto

sharing

users

tweeting

presentations

hi

safety

bylaw

pmp

8 Jul 2019

In this video Vesa Juvonen (Microsoft) is covering the different extensibility options for SharePoint and their differences. He covers farm solutions, sandbox solutions, add-ins/apps, script embedding and SharePoint Framework. Each extensibility option has different advantages and disadvantages which are covered in this video.

Presenter - Vesa Juvonen (Microsoft) - @vesajuvonen

More details on the SharePoint developer community from http://aka.ms/sppnp.

1 participant
19 minutes

sharepoint

share

extensibility

farm

hosted

deploying

maintain

version

xml

management

18 Apr 2019

This video demonstrates in practice how to get started with the app pages in SharePoint Online by using SharePoint Framework 1.8 or newer version.

Any web part can be exposed as an app page by adjusting the web part manifest settings. App pages are then shown as an option in the page layout picker. They can be also programmatically deployed if needed.

More details on the app pages in SharePoint Online is available from the following article: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages

1 participant
12 minutes

sharepoint

setup

webpart

editing

app

users

permissions

project

deploying

parts

5 Apr 2019

This module will introduce you to extending leveraging React and Fabric React controls in the SharePoint Framework solutions.

The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-react-fabric.

More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.

You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!

1 participant
60 minutes

components

frameworks

interfaces

webparts

designing

implementing

subfolder

ui

fabric

div

10 Oct 2018

This module will introduce you to the SharePoint Framework as well as walk you through getting your local & online environment configured for developing with the SharePoint Framework.

The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-getting-started.

More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.

You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!

1 participant
33 minutes

sharepoint

configuring

frameworks

deploying

setup

server

applications

microsoft

management

extensibility

Microsoft 365 Community / SharePoint Framework

29 Sep 2023

22 Sep 2023

19 Sep 2023

12 Sep 2023

24 Aug 2023

10 Aug 2023

10 Aug 2023

27 Jul 2023

27 Jul 2023

18 Jul 2023

13 Jul 2023

13 Jul 2023

13 Jul 2023

3 Jul 2023

29 Jun 2023

29 Jun 2023

29 Jun 2023

28 Jun 2023

27 Jun 2023

15 Jun 2023

15 Jun 2023

13 Jun 2023

1 Jun 2023

1 Jun 2023

1 Jun 2023

31 May 2023

30 May 2023

30 May 2023

19 May 2023

18 May 2023

9 May 2023

4 May 2023

4 May 2023

3 May 2023

24 Apr 2023

20 Apr 2023

20 Apr 2023

19 Apr 2023

6 Apr 2023

28 Mar 2023

15 Mar 2023

15 Mar 2023

15 Mar 2023

9 Mar 2023

9 Mar 2023

23 Feb 2023

23 Feb 2023

10 Feb 2023

9 Feb 2023

9 Feb 2023

6 Feb 2023

31 Jan 2023

29 Jan 2023

26 Jan 2023

26 Jan 2023

24 Jan 2023

17 Jan 2023

12 Jan 2023

12 Jan 2023

11 Jan 2023

11 Jan 2023

11 Jan 2023

11 Jan 2023

11 Jan 2023

10 Jan 2023

3 Jan 2023

29 Dec 2022

19 Dec 2022

15 Dec 2022

15 Dec 2022

13 Dec 2022

6 Dec 2022

1 Dec 2022

22 Nov 2022

17 Nov 2022

17 Nov 2022

17 Nov 2022

3 Nov 2022

3 Nov 2022