SharePoint Framework Community Call – 9th of September, 2021

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Tech Community.

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 http://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) 

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 21^st (EMEA, APAC & US friendly times available)
  • Community Docs Session – October 5^th 
  • PnP – SPFx Developer Workstation Setup – TBS
  • PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – September 28^th 
  • Ask Me anything (AMA) – Script Samples – September 14^th
  • Ask Me Anything (AMA) – Power Platform Development & Samples – September 28^th
  • Ask Me Anything (AMA) – List Formatting – October 5^th
  • First Time Presenter – October 12^th
  • More than Code with VSCode – September 14^th 
  • Maturity Model Practitioners – September 21^st 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:

• 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 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 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:  (Subject to Updates in September)

• Microsoft 365 platform call – September 14^th at 8:00 am PDT | https://aka.ms/m365-dev-call
• Power Apps monthly call – September 15^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
• M365 General Dev call – September 16^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
• Microsoft Identity Platform call – September 16^th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar
• SharePoint Framework call – September 23^rd at 7:00 am PDT | https://aka.ms/spdev-spfx-call
• Office add-in monthly call – October 13^th at 8:00 am PDT | https://aka.ms/officeaddinscall
• Adaptive Cards monthly call – October 14^th 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
• 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 - 10th of September 2021