Viva Connections & SharePoint Framework Community Call – 17th of November, 2022
Call summary
Welcome to the bi-weekly call focused on Microsoft 365 client-side development. In this call, we focus on using Viva Connections and SharePoint Framework to build solutions for Microsoft Teams and SharePoint Online.
New this week
- Agenda set for next Microsoft 365 platform call - Tuesday, November 22nd 8:00 am PT.
- Latest news from Microsoft engineering on Microsoft 365 topics
- Monthly community contributors
- Demos
- Vesa Juvonen – Creating SPFx powered multi-tab solution using Microsoft Teams Toolkit
- Bill Baer – Microsoft Search Usage Reports
- Ayca Bas – Build your first Notification bot in C# for Microsoft Teams with Teams Toolkit for Visual Studio
- Announcement
- Project releases
- SharePoint Framework (SPFx) – v 1.16 (GA) | aka.ms/SPFx/116
- PnPjs Client-Side Libraries – v 3.9 (GA)
- CLI for Microsoft 365 – v6.0 (beta)
- Reusable SPFx React Controls – v 3.12.0 (GA)
- Reusable SPFx React Property Controls – v 3.11.0 (GA)
- Web part samples
- PnPjs React Hooks – Beau Cameron | @beau__cameron
- Add form customizer to list – Siddharth Vaghasia | @siddh_me
- Rhythm of Business Calendar – Dan Turley
- Feedback Sidebar Web Part – Alessia De Martino, Andrea Bellini, Matteo Serpi & Michele Catena
- Find time and Planner experiences – Christophe Humbert | @Path2SharePoint
- Consume Azure Function app – Joao Livio | @jlivio
- Display Sharepoint data as ERD – Niklas Wilhelm | @NiklasWilhelm4
- Zod Usage in SPFx solutions – Ari Gunawan | @arigunawan3023
- CSV Importer – Michał Romiszewski | @romiszewski
- Graph auto batching – Marcin Wojciechowski | @mgwojciech
- Image generation using DALL-E API – Luis Mañez | @luismanez
- Using KIOTA SDK with SPFx solutions – Luis Mañez | @luismanez
- Associated Sites Links – Ari Gunawan | @arigunawan3023
- Flight Tracker – João Mendes | @joaojmendes
- On behalf Azure AD flow with SPFx – Paolo Pialorsi | @paolopia
- Extension samples
- Custom Message Banner for Modern SharePoint Sites – Brad Schlintz | @bschlintz, Paul Matthews | @cann0nf0dder
- Share List, Folder or File to Teams – Russell Gove | @russgove
- Field Votes – Ari Gunawan | @arigunawan3023
- My Followed Sites Application Customizer – Rahul Suryawanshi
- ACE samples
- Share Graph Client between ACEs – Marcin Wojciechowski | @mgwojciech
- Stock / Bitcoin feed – Kunj Sangani | @sanganikunj
- Flight Tracker – João Mendes | @joaojmendes
- Dynamic SVG image charts – Patrick Rodgers | @mediocrebowler
- Multi-tenant ISV reference solution – Paolo Pialorsi | @paolopia
- Conversations
- Microsoft 365 PnP Weekly – Episode 187 (November 14th) with Velencia, Spain based SharePoint and Cloud Solution Architect and Microsoft MVP Luis Máñez (ClearPeople) | @luismanez | video | podcast
- Microsoft 365 PnP Weekly – Episode 186 (November 7th) with US/India based Microsoft Principal Product Manager - DC Padur | @dcpadur | video | podcast
Demos
- Add form customizers to list web part – learn about a utility web part for managing the SPFx form customizer for your SharePoint List and libraries. Webpart allows 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.
- Using Fluent UI 9 in SPFx solutions – see 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.
- Visualizing dynamically SharePoint data within SPFx solutions using ERD model – this SPFx web part was 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.
The host of this call is Marc D Anderson (Sympraxis Consulting) - @sympmarc. Q&A takes place as always in chat throughout the call.
Agenda items
- SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen – 6:31
- PnPjs Client-Side Libraries - Julie Turner (Sympraxis Consulting) | @jfj1997 – 8:38
- CLI for Microsoft 365 - Garry Trinder (Microsoft) | @garrytrinder – 9:51
- PnP SPFx Controls - Alex Terentiev (Microsoft) | @alexaterentiev – 11:51
- PnP Modern Search - Marc D Anderson (Sympraxis Consulting LLC) | @sympmarc – 12:29
- PnP Samples - David Warner II (Microsoft) | @DavidWarnerII – 13:03
- Demo – Add form customizers to list web part – Siddharth Vaghasia (Tata Consulting) | @siddh_me – 15:33
- Demo – Using Fluent UI 9 in SPFx solutions – Nick Brown (Jisc) | @techienickb – 26:46
- Demo – Visualizing dynamically SharePoint data within SPFx solutions using ERD model – Niklas Wilhelm (NetForce 365) | @NiklasWilhelm4 – 41:00
Together Mode
Thank you everybody for joining today’s call. It’s really awesome to see you here. Your continuing support makes this community great for everyone.
Actions
- Opt into the PnP Recognition Program | aka.ms/m365pnp-recognition
- Register for upcoming Sharing is Caring events:
- Power Platform Samples Contributor | Monday, November 28th, 11:30am PST - Register
- Maturity Model Practitioners | Tuesday, December 20th, 7am PST – Download reoccurring invite
- PnP Office Hours – 1:1 session | Register
- PnP Buddy System | Request a Buddy
- Register for the Microsoft 365 Developer Program and get a free developer tenant
- Get started with free training modules covering Microsoft 365 platform capabilities.
- Visit the Microsoft 365 Unified Sample Solution Gallery from Microsoft and community.
- Request a Demo spot on the call | https://aka.ms/m365pnp/request/demo
- Download the recurrent invite for this call | https://aka.ms/spdev-spfx-call
Demo references
- Add form customizers to list web part
- Sample - Add Form Customizer to List
- Package - package for formcustomizer utility webpart
- Using Fluent UI 9 in SPFx solutions
- Sample - react-fluentui-9
- Components - Fluent UI React Components v9.7.0
- Visualizing dynamically SharePoint data within SPFx solutions using ERD model
- npm - gojs-react
- Tools – GoJS - Build Diagrams for the Web in JavaScript and TypeScript
- Sample - SP Site ER Diagram
Thank you for your great work. Samples are often showcased in Demos.
Open-source project status
PnP Project | Current version | Release/Status |
---|---|---|
SharePoint Framework (SPFx) | v1.16 (GA) | v1.17 - Q1, 2023 |
PnPjs Client-Side Libraries | v3.9 GA, v2.13 GA | |
CLI for Microsoft 365 | V6.0 (beta), v5.9.0 GA | |
Reusable SPFx React Controls | v3.12.0 (GA), v2.9.0 | |
Reusable SPFx React Property Controls | v3.11.0 (GA), v2.7.0 | |
PnP SPFx Generator | v1.16.0 | v1.17.0 on the way |
PnP Modern Search | v4.7.0 (GA), v4.8.0 (beta), v3.23.0 (GA) |
General Resources
- Viva Connections https://aka.ms/VivaConnections
- Archives - Microsoft 365 PnP Weekly - Videos, Podcasts
- Tools - Teams Toolkit (v2.2 Preview)
- Tools - Microsoft Teams Framework (TeamsFx)
- Gallery - Microsoft 365 Extensibility look book gallery
- Microsoft Build sessions guide (Modern Work Digital Brochure) - aka.ms/modernworkbuildsessions
- SharePoint Framework - v1.12.1 npm install –g @microsoft/generator-sharepoint@next
- CLI for Microsoft 365 v3
- CodeTour
- Sharing is Caring | aka.ms/sharing-is-caring
- Tools - PnP Modern Search v4 | https://aka.ms/pnp-search
- M365 PnP site | aka.ms/m365pnp
- SharePoint Starter Kit v2
- Blog: “A Lap Around Microsoft Graph Toolkit” blog series
- New Microsoft 365 Patterns and Practices (PnP) team model with new community leads
- Microsoft 365 Community Content (non-Dev docs)
- PnP SPFx web part samples
- PnP SPFx extension samples
- GitHub PnPjs
- Tutorials - Getting started with SharePoint Framework v1.10 Tutorials (12 videos)
- Tutorials - Getting started with SharePoint Framework v1.10 Extensions (6 videos)
- Docs - Tutorials and training material for SharePoint Development
- SPFX Training Package
- SPFx Web Parts
- SPFx Extensions
- SPFx Library Components
- Documentation - PnPjs v2 documentation
- Link - Microsoft 365 developer training
- Link - Office 365 Developer Program
- Latest documentation on SharePoint Framework
- Found an issue with SharePoint Dev? - please let us know at https://aka.ms/spdev-issues
- Reusable web part property controls
- Reusable react controls for SharePoint Framework solutions
- Reusable controls webcast
- CLI for Microsoft 365
- PnP SPFx Yeoman Generator - Extends the out-of-the-box experience with open-source community capabilities
- SharePoint Dev UserVoice - for new feature requests
Other mentioned topics
Upcoming calls | Recurrent invites
- Microsoft 365 platform call | Tuesday, November 22, 8:00 am PT – https://aka.ms/m365-dev-call (weekly)
- Microsoft 365 General Dev call | Thursday, November 24, 7:00 am PT - https://aka.ms/m365-dev-sig (bi-weekly)
- Viva Connections & SharePoint Framework call | Thursday, December 1, 7:00 am PT - https://aka.ms/spdev-spfx-call (bi-weekly)
- Office add-in monthly call | Wednesday, December 14, 8:00 am PT - https://aka.ms/officeaddinscall (monthly)
- Microsoft Identity Platform call | Thursday, December 15, 9:00 am PT - https://aka.ms/IDDevCommunityCalendar (monthly)
- Power Platform monthly call | Wednesday, December 21, 8:00 am PT - https://aka.ms/PowerAppsMonthlyCall (monthly)
About
Viva Connections & SharePoint Framework bi-weekly calls are targeted at anyone who is interested in the JavaScript-based development towards Microsoft Connections, Microsoft Teams, SharePoint Online, and also on-premises. Calls are used for the following objectives.
- SharePoint Framework engineering update from Microsoft
- Talk about PnP JavaScript Core libraries
- CLI for Microsoft 365 Updates
- SPFx reusable controls
- PnP SPFx Yeoman generator
- Share code samples and best practices
- Possible engineering asks for the field - input, feedback, and suggestions
- Cover any open questions on the client-side development
- Demonstrate SharePoint Framework in practice in Microsoft Viva, Microsoft Teams or SharePoint context
- You can download a recurrent invite from https://aka.ms/spdev-spfx-call. Welcome and join the discussion!
“Sharing is caring”
Microsoft 365 PnP team, Microsoft - 17th of November 2022