SharePoint Framework Community Call – 7th of October, 2021

This post has been republished via RSS; it originally appeared at: Microsoft Tech Community - Latest Blogs - .

SharePoint Framework Special Interest Group (SIG) bi-weekly community call recording from October 7th 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.  Topics for the call on October 12 are Progressive Web Apps and Beyond: Supercharging OneDrive & SharePoint web apps and Hands-on with Microsoft Graph File Uploads and Downloads.  The time is now to register for Hacktoberfest 2021.  Register for training events in October – November hosted by Sharing is Caring.   Register for the PnP Recognition Program.   SharePoint Framework v1.13 GA nearing release will include Viva Connections extensibility support, General Availability of Adaptive Card Extensions (ACEs), Microsoft Teams Workbench for SharePoint Framework, tool support, image rendering APIs and more.   

PnP project releases shipped -  PnPjs Client-Side Libraries v3.0.0 early preview, and CLI for Microsoft 365 v4.0.0 GA with breaking changes.   

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

Additionally, 1 extension and 6 web part and 6 ACE samples delivered in the last 2 weeks!   Wowmazing!  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.

Not an empty seat in the house.  Nice seeing everyone on the call.  Please join again soon.   

Actions:

• Register today for Hacktoberfest 2021 – https://hacktoberfest.digitalocean.com
• Register for Microsoft Ignite (Digital event) - November 2-4, 2021- https://ignite.microsoft.com
• Opt in to PnP Recognition Program | https://aka.ms/m365pnp-recognition
• Register for Sharing is Caring Events:
  • First Time Contributor Session – November 3^rd (EMEA, APAC & US friendly times available)
  • Community Docs Session – November 17^th  
  • Power Platform Samples – First Time Contributor - October 27^th
  • PnP – SPFx Developer Workstation Setup – November 16^th
  • PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – November 30^th   
  • Ask Me Anything (AMA) – PnP PowerShell – October 26^th
  • First Time Presenter – October 12^th
  • More than Code with VSCode – November 9^th  
  • Maturity Model Practitioners – October 19^th  (every 3^rd Tuesday of month, 7:00am PT)
  • PnP Office Hours – 1:1 session – Register
  • PnP Buddy System – Request a Buddy
• Request a Demo spot on the call – https://aka.ms/m365pnp/request/demo
• Download the recurrent invite for this call – https://aka.ms/spdev-spfx-call

Demos:

• Create new Team using Viva Connections ACEs components from the Dashboard – overview of ACEs (Adaptive Card Extensions) - Dashboard, Card view and Quick view.  Integration with Microsoft Graph APIs.  Handling clicks in Card and Quick views to create a team from desktop or mobile dashboards.  Creates team using Graph API method.  Thorough code walk-through.  Button on “Team Create Request” card to “Open Form” – opens Quick view.  Team creation is confirmed on Quick view.      

• Building Microsoft Teams data dashboard with SharePoint Framework – an inspirational demo/sample (react-teams-lead-dashboard) showing how to create a dashboard using tools, libraries and techniques for developing “modern” Microsoft 365 solutions.   Uses Teams Personal app (configurable on per user basis and with multiple tabs), SharePoint client-side web part, UI fully integrated with Microsoft Teams and automated provisioning of fields, lists through Microsoft Graph.  Render dashboard in Teams or SharePoint Online.         

• SPFx Design Patterns – Asynchronous Rendering – slow web parts slows pages, slows Teams apps, and often is attributed to web part rendering as opposed to being hung or frozen.  Waiting on data slows rendering.  OOB rendering is commonly synchronous.  The fix - asynchronous rendering with isRenderAsync.  Referenced samples here use this method.  For better user experience, use progress indicators (spinners, bars, shimmer interface) to make rendering seem faster.

   

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

• SharePoint Crud Operations - Ari Gunawan | @AriGunawan3023
• Graph Group Viewer - Zach Roberts | @ZachSPODev
• Questionnaire Teams Meeting App - Nanddeep Nachan | @NanddeepNachan
• Using Accordion Plugin - Fredrik Thorild | @taxonomythorild
• Calendar - Mohammad Amer | @Mohammad3mer
• Multiscreen - Ari Gunawan | @AriGunawan3023

PnP SPFx ACEs  https://aka.ms/spfx-aces

• Create Teams – Dipen Shah | @Dips_365
• Manage Team – Dipen Shah | @Dips_365
• Planner Tasks – Ejaz Hussain | @EjazHussain_
• Tenant Service Health – Anoop Tatti | @anooptells
• Articles at a Glance – Anoop Tatti | @anooptells
• London Transport Service Status – Anoop | @anooptells

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

Agenda items:

• SharePoint Framework - Vesa Juvonen (Microsoft) | @vesajuvonen – 7:15
• PnPjs Client-Side Libraries - Julie Turner (Sympraxis Consulting) | @jfj1997 – 10:22
• CLI for Microsoft 365 - Albert-Jan Schot (Portiva) | @appieschot – 12:33
• PnP SPFx Controls - Patrick Rodgers (Microsoft) @mediocrebowler – 13:58
• PnP SPFx Samples - Hugo Bernier (Tahoe Ninjas) | @bernierh – 14:32
• PnP SPFx ACEs Samples - David Warner II (Catapult Systems) | @DavidWarnerII – 16:45 

Demos:

• D1:  Create new Team using Viva Connections ACEs components from the Dashboard – ​ Dipen Shah (Rapid Circle) | @Dips_365 – 19:29

• D2:  Building Microsoft Teams data dashboard with SharePoint Framework – Paolo Pialorsi (PiaSys) | @PaoloPia – 29:52

• D3:  SPFx Design Patterns – Asynchronous Rendering – Hugo Bernier (Microsoft) | @bernierh – 42:07

Resources:

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

• D1:  Samples - SharePoint Framework Viva Adaptive Card Extensions (ACEs) sample repository 

• D1:  Samples - ace-cardgallery 

• D1:  Documentation - Overview of Viva Connections Extensibility 

• D2:  Sample - Lead Assist Dashboard 

• D2:  Documentation - Build for Microsoft Teams using SharePoint Framework 

• D2:  Documentation - Use Microsoft Graph in your solution 

• D2:  Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph 

• D2:  Tools - Reusable React controls for your SharePoint Framework solutions 

• D2:  Article - The easiest way to store user settings of your Microsoft 365 app 

• D3:  Tools – Fluent UI - Shimmer web 

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

• D3:  Sample - Microsoft Graph People Search 

• PnP Weekly – Episode 137 (October 4th) with Canada-based MVP and Consultant from Technologia - Serge Tremblay | @Sergepoint | video | podcast

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 – October 12^th at 8:00 am PDT | https://aka.ms/m365-dev-call
• Office add-in monthly call – October13^th at 8:00 am PDT | https://aka.ms/officeaddinscall
• M365 General Dev call – October 14^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
• Adaptive Cards monthly call – October 14^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
• Power Apps monthly call – October 20^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
• SharePoint Framework call – October 21^st at 7:00 am PDT | https://aka.ms/spdev-spfx-call
• Microsoft Identity Platform call – October 21^st 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 - 8th of October 2021