SharePoint Framework Community Call -- 9th of September, 2021

SharePoint Framework Special Interest Group (SIG) bi-weekly community call recording from September 9th 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

A reminder to tune in each Tuesday for the new Microsoft 365 platform community call.  Don’t forget to sign up and attend training events hosted by Sharing is Caring.   Let’s celebrate your work, register for the PnP Recognition Program.   SharePoint Framework 1.13 public developer preview - new version of SPFx v1.13 - Beta.20, is out now!   Also released as you read this - PnPjs Client-Side Libraries v2.9.0.   **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, v1.13 Beta Viva.20   PnPjs Client-Side Libraries v2.9.0 v3.0.0 developments underway CLI for Microsoft 365 v3.13.0 Preview, v4.0.0 Preview  v4.0.0 GA to release end September Reusable SPFx React Controls v2.9.0 (SPFx v1.11), v3.3.0 (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 Release expected week of Sept 13th

Two PnP SPFx samples were delivered in the last 2 weeks as well.  There is a new samples repository for Adaptive Card Extensions (ACE) - aka.ms/spfx-aces.  Thank you all for your contributions!   The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler.  Q&A takes place as always in chat throughout the call. Thank you everybody for being part of this call, the community, a tweet, a blog post, and the solution to your customer’s needs.  

Actions

• Opt in to PnP Recognition Program | https://aka.ms/m365pnp-recognition
• Register for Sharing is Caring Events:

  • First Time Contributor Session – September 21st (EMEA, APAC & US friendly times available)

  • Community Docs Session – October 5th 

  • PnP – SPFx Developer Workstation Setup – TBS

  • PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – September 28th 

  • Ask Me anything (AMA) – Script Samples – September 14th

  • Ask Me Anything (AMA) – Power Platform Development & Samples – September 28th

  • Ask Me Anything (AMA) – List Formatting – October 5th

  • First Time Presenter – October 12th

  • More than Code with VSCode – September 14th 

  • Maturity Model Practitioners – September 21st and every 3rd 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

• Hyperscript Tagged Markup (HTM) Templating – approaches to web part UI development – use a UI framework or use a templating system.  Option C:  React HTM Templating web part - 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. 

• Modernize your SharePoint Framework projects – see steps to take an existing SPFx project using TSLint and move it over to ESLint and dump IE11 at same time.  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.

• Building advanced image gallery experience with SharePoint Framework – this 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! 

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

• Share to Teams - Kunj Sangani | @sanganikunj

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

• At a Glance - Anoop Tatti | @anooptells  (Link to My OneDrive sample is correct)

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

Agenda items

• SharePoint Framework - Vesa Juvonen (Microsoft) @vesajuvonen - 6:24
• PnPjs Client-Side Libraries - Julie Turner (Sympraxis Consulting) @jfj1997 – 7:52
• CLI for Microsoft 365 - Patrick Rodgers (Microsoft) @mediocrebowler – 9:05
• PnP SPFx Controls - Patrick Rodgers (Microsoft) @mediocrebowler – 9:46
• PnP Modern Search - Patrick Rodgers (Microsoft) @mediocrebowler – 10:39 
• PnP SPFx Samples - Hugo Bernier (Tahoe Ninjas) | @bernierh – 11:25

Demos

• Demo:  Hyperscript Tagged Markup (HTM) Templating – Fabio Franzini | @franzinifabio – 13:15

• Demo:  Modernize your SharePoint Framework projects – Andrew Connell (Voitanos) | @andrewconnell – 26:38

• Demo:  Building advanced image gallery experience with SharePoint Framework – Yannick Reekmans (Qubix) | @YannickReekmans – 41:26

Resources

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

• D1:  Sample - React HTM (Hyperscript Tagged Markup) Templating 

• D2:  Article - Get with the times & ditch TSLint in favor of ESLint in SharePoint Framework projects 

• D2:  Article - Ditch TSLint for ESLint in SPFx projects in one simple step 

• D2:  Article - Optimize bundles by disabling IE11 support in SPFx projects 

• D3:  Article - SPFx Lightbox Image Gallery web part, v1.0.0 

• D3:  Repo - SharePoint Lightroom Image Gallery Web Part

• D3:  Library - PnP/PnPjs 

• D3:  Controls - Reusable React controls for your SharePoint Framework solutions 

• D3:  Package - react wrapper for: lightgallery.js 

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 topics mentioned

• SharePoint dev documentation
• SharePoint dev issue list Upcoming calls | Recurrent invites:  (Subject to Updates in September)
• Microsoft 365 platform call – September 14th at 8:00 am PDT | https://aka.ms/m365-dev-call
• Power Apps monthly call– September 15th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
• M365 General Dev call – September 16th at 7:00 am PDT | https://aka.ms/m365-dev-sig
• Microsoft Identity Platform call – September 16th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar
• SharePoint Framework call – September 23rd at 7:00 am PDT | https://aka.ms/spdev-spfx-call
• Office add-in monthly call – October 13th at 8:00 am PDT | https://aka.ms/officeaddinscall
• Adaptive Cards monthly call – October 14th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall

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
• 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 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 - 10th of September 2021