![SharePoint Framework Community Call -- 9th of September, 2021 SharePoint Framework Community Call -- 9th of September, 2021](/blog/microsoft-viva-and-spfx-community-call/sharepoint-framework-community-call-9th-of-september-2021/images/spfx-call-9th-sep-recording_huf82cf45a9459330fa1858db832521871_339229_700x0_resize_q100_h2_box_3.webp)
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
Tools - Teams Toolkit (v2.2 Preview)
Microsoft Build sessions guide (Modern Work Digital Brochure) - aka.ms/modernworkbuildsessions
SharePoint Framework - v1.12.1 npm install –g @microsoft/generator-sharepoint@next
Sharing is Caring | aka.ms/sharing-is-caring
M365 PnP site | aka.ms/m365pnp
New Microsoft 365 Patterns and Practices (PnP) team model with new community leads
Microsoft 365 Community Content (non-Dev docs)
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
Documentation - PnPjs v2 documentation
Link - Office 365 Developer Program
Found an issue with SharePoint Dev? - please let us know at https://aka.ms/spdev-issues
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