SharePoint Framework Community Call – 29th of July, 2021

[Vesa Juvonen]

SharePoint Framework Special Interest Group (SIG) bi-weekly community call recording from July 29th is now available from the Microsoft 365 Community YouTube channel at http://aka.ms/m365pnp-videos. You can use SharePoint Framework for building solutions for Microsoft Teams and for SharePoint Online.

Call summary:

Summer and Fall community call schedule updates reviewed.  Register today for August events on Sharing-is-caring.   PnP Recognition Program announced.   Viva Connections public developer preview!   SharePoint Framework v1.13 beta released earlier this week with preview on the Viva Connections extensibility tooling.  

Latest project updates include:  (Bold indicates update from previous report 2 weeks ago) 

PnP Project	Current version	Release/Status
SharePoint Framework (SPFx)	v1.12.1, v1.13 beta	v1.13.0 Beta end of July
PnPjs Client-Side Libraries	v2.7.0	2.8.0 scheduled for Aug 13,  v3.0.0 developments underway
CLI for Microsoft 365	v3.12.0 Preview, v4.0.0 Preview	v4.0.0 to release this fall
Reusable SPFx React Controls	v2.8.0 (SPFx v1.11), v3.2.1 (SPFx v1.12.1)
Reusable SPFx React Property Controls	v2.7.0 (SPFx v1.11), v3.2.0 (SPFx v1.12.1)
PnP SPFx Generator	v1.16.0	v1.17.0 on the way
PnP Modern Search	v4.3.0 & v3.21.0

There was 1 PnP SPFx extension and 4 PnP web part samples delivered in the last 2 weeks as well.  Nice work!    The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler.  Q&A takes place in chat throughout the call.

Yep!  Nice wave action.  Great seeing you this week.  Looking forward to seeing you again in August.    Data for Hugo:  24 left-handed wavers, 4 right-handed wavers, 2 bi-handed wavers and 4 non-handed wavers.  But wait, now there's 35 wavers!   Data corruption.  

Actions:

• Register for Sharing is Caring Events:
  • First Time Contributor Session – August 31^st (EMEA, APAC & US friendly times available)
  • Community Docs Session – August 23^rd
  • PnP – SPFx Developer Workstation Setup – August 24^th   
  • PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – August 25^th
  • Ask Me Anything – Power Platform Development & Samples – September 28^th
  • First Time Presenter – August 30^th
  • More than Code with VSCode – TBS
  • Maturity Model Practitioners – August 17^th and every 3^rd Tuesday of month, 7:00am PT
  • PnP Office Hours – 1:1 session - Register
  • PnP Buddy System - Request a Buddy
• Download the recurrent invite for this call – https://aka.ms/spdev-spfx-call

Demos:

• Hero Web Part and Tiles V2 Web Part – 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 and custom field rendering control, file/icon pickers and fluid flex layout.   Site theme selectable in Tiles v2.  Thorough code walkthrough.

• Exposing business data in Viva Connections or in SharePoint with custom diagram web parts​ – or in Microsoft Teams.  React diagraming web parts updated to v1.13.  Updates accommodate Dynamic Data Connections, full bleed, handling section color changes, Viva Connections, and to search content in web part.  Web parts leverage libraries/code from Mermaid, flowchart.js, and js-sequence-diagrams along with the Monaco Editor and PnP markdown property pane to both generate diagrams and to overlay text on them.

SPFx extension samples:  (https://aka.ms/spfx-extensions) 

• Machine Translations - Michał Romiszewski | @romiszewski

SPFx web part samples:  (https://aka.ms/spfx-webparts) 

• Datatable - Abderahman Moujahid | @Abderahman88
• Hero Web Part - Omar El-Anis | @omarelanis
• Cross-Device Data (link pending) - Giuliano De Luca | @delucagiulian
• Diagrams (link pending) - Hugo Bernier | @bernierh

Thank you for your great work.  Samples are often showcased in Demos.    

Agenda items:

• SharePoint Framework - Patrick Rodgers (Microsoft) @mediocrebowler - 7:16
• PnPjs Client-Side Libraries - Patrick Rodgers (Microsoft) @mediocrebowler – 10:11
• CLI for Microsoft 365 - Patrick Rodgers (Microsoft) @mediocrebowler – 11:47
• PnP SPFx Controls - Patrick Rodgers (Microsoft) @mediocrebowler – 13:08
• PnP Modern Search - Patrick Rodgers (Microsoft) @mediocrebowler – 13:58
• PnP SPFx Samples - Hugo Bernier (Tahoe Ninjas) | @bernierh – 15:00

Demos:

• Demo:  Hero Web Part and Tiles V2 Web Part – Omar El-Anis | @omarelanis – 18:12

• Demo:  Exposing business data in Viva Connections or in SharePoint with custom diagram web parts – Hugo Bernier (Microsoft) | @bernierh – 41:12

Resources:

Additional resources around the covered topics and links from the slides.

• Omar’s blog – SP Bytes 

• Sample - Hero web part 

• Sample - Tiles V2 

• Controls – PropertyFieldCollectionData control 

• Hugo’s Repo - React Diagram Web Parts 

• Gallery - SharePoint Framework Client-Side Web Part Samples 

• Tool - About Mermaid 

• Library - js-sequence-diagrams 

• Tool – flowchart.js 

• Editor – Monaco Editor 

• PnP/SPFx-property-controls - PropertyPaneMarkdownContent control 

• PnP/SPFx-controls-react - Placeholder control 

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 http://aka.ms/spdev-issues
• Reusable web part property controls
• Reusable react controls for SharePoint Framework solutions
• Reusable controls webcast
• Office 365 CLI
• 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:

• SharePoint dev documentation
• SharePoint dev issue list

Upcoming calls | Recurrent invites:

• M365 General Dev call – August 5^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
• Office add-in monthly call – August 11^th at 8:00 am PDT | https://aka.ms/officeaddinscall
• SharePoint Framework call – August 12^th at 7:00 am PDT | https://aka.ms/spdev-spfx-call
• Adaptive Cards monthly call – August 12^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
• Power Apps monthly call – August 18^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
• Microsoft Identity Platform – August 19^th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar

PnP SharePoint Framework Special Interest Group bi-weekly calls are targeted at anyone who is interested in the JavaScript-based development towards Microsoft Teams, SharePoint Online, and also on-premises. SIG calls are used for the following objectives.

• SharePoint Framework engineering update from Microsoft
• Talk about PnP JavaScript Core libraries
• Office 365 CLI 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 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 - 29th of July 2021