SharePoint Framework Community Call Recording -- 6th of May, 2021

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

 

Call summary

Preview the new Microsoft 365 Extensibility look book gallery co-developed by Microsoft Teams and SharePoint engineering.  Download showcase apps, samples, and documentation.   Register now for May trainings on Sharing-is-caring  New releases in this call – CLI for Microsoft 365 v3.9.0, Reusable SPFx React Controls v3.1.0 and Property Controls v3.1.0 and SharePoint Framework v1.12.1. Also, a look at what’s ahead for SPFx - Microsoft Viva Connections, Teams improvements, tooling updates, and Store modernization.  There were six PnP SPFx samples delivered in last 2 weeks, details below.  Great work!     **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 ** GA  PnPjs Client-Side Libraries v2.4.0 v2.5.0 scheduled for May 14th CLI for Microsoft 365 v3.9.0 Upgrading SPFx projects to v1.12.1 Reusable SPFx React Controls v3.1.0 v2.7.0 (SPFx v1.11), v3.1.0 (SPFx v1.12.1) Reusable SPFx React Property Controls v3.1.0 v2.6.0 (SPFx v1.11), v3.1.0 (SPFx v1.12.1) PnP SPFx Generator v1.16.0 Angular 11 support PnP Modern Search v3.19 and v4.1.0 April and March 20th

The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler.  Q&A takes place in chat throughout the call.

Actions

  • Reserve date - SharePoint Monthly community call – 11th of May 8 AM PDT | https://aka.ms/sp-call
  • Register for Sharing is Caring Events:
    • First Time Contributor Session – May 24th (EMEA, APAC & US friendly times available)
    • Community Docs Session – May
    • PnP – SPFx Developer Workstation Setup – May 13th  
    • PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May 20th
    • AMA (Ask Me Anything) – Tech Community – May 11th
    • AMA (Ask Me Anything) – Microsoft Graph & MGT - June
    • First Time Presenter – May 25th
    • More than Code with VSCode – May 27th  
    • Maturity Model Practitioners – May 18th
    • PnP Office Hours – 1:1 session - Register
  • Download the recurrent invite for this call – https://aka.ms/spdev-spfx-call

Demos

  1. Adding support to add video with a text to modern pages with this video banner web part – from the Properties Pane, select a video, add banner title text and color it, adjust 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 top of your pages.   The web part has only one functional component named: VideoBackground. 

  2. Building company stories web part for story experience – this web part allows you to add images to a SharePoint List, and renders (cycles) them with related text on page similar to Instagram Stories as a way to engage social media adept employees. Text, images, and author details stored in a SharePoint list.   Uses an existing open-source React component called “react-insta-stories” and several Microsoft Graph Toolkit components.  Sample in PnP Samples repository.   

  3. Building react groups and teams web part for aggregating detailed information for end users – this web part helps logged-in user quickly find their Microsoft Teams and Microsoft 365 Groups sites/content.  For selected site, 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. 

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

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

Agenda items

Demos

  • Demo:  Adding support to add video with a text to modern pages with this video banner web part – Mohamed Derhalli (BDO Canada) | @MohamedDerhalli | Deck – 13:13

  • Demo:  Building company stories web part for story experience – Luis Mañez (ClearPeople) | @luismanez | Deck – 18:39

  • Demo:  Building react groups and teams web part for aggregating detailed information for end users – Alison Collins & Sam Collins (Coupled Technology) | @samc148 | Deck – 29:39

Resources

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

General resources

Other topics mentioned

Upcoming Calls | Recurrent Invites

“Sharing is caring”

Microsoft 365 PnP team, Microsoft - 7th of May 2021