Viva Connections & SharePoint Framework Community Call – 2nd of June, 2022

Call summary

Welcome to the bi-weekly call focused on Microsoft 365 client-side development. In this call, we focus on using Viva Connections and SharePoint Framework to build solutions for Microsoft Teams and SharePoint Online.

New this week

• Agenda set for Microsoft 365 platform call - Tuesday, June 7, 8:00 am PT | aka.ms/m365-dev-call
  • Latest news from Microsoft engineering on Microsoft 365 topics
  • Monthly community contributors
  • Zac Sun - Migrate your SharePoint workflows to Power Automate with migration tooling (preview)
  • Dan Wahlin - Send a SMS message with Azure Communication Services
  • Bob German - TeamsJS SDK V2 to extend your Microsoft Teams solutions to Outlook and Office
• Project releases
  • SharePoint Framework (SPFx) - v1.15 (RC) – includes list and library form extensibility
  • PnPjs Client-Side Libraries - v3.4.0 to be released June 10th
  • PnP Modern Search - Adaptive Card support in the dev branch
• Web part samples
  • Frequently Asked Questions with Property Field Collection Data - Arun Kumar Perumal | @arun_perumal16
  • Pages Hierarchy - Nick Brown | @techienickb
  • My Awards - Luis Mañez | @luismanez
  • Filterable Image Gallery - Ari Gunawan | @arigunawan3023
  • Page Navigator - Jasey Waegebaert | @JWaegebaert
  • ACE Strategy Pattern - Marcin Wojciechowski | @mgwojciech
• ACE samples
  • Updated - Office Locations – Image Card – Nick Brown | @techienickb
  • Updated - Unread Emails – Primary Text Card – Nick Brown | @techienickb
  • Updated - My Calendar Plan – Primary Text Card - Nick Brown | @techienickb
  • Updated - News Feed – Primary Text Card - Nick Brown | @techienickb
• Microsoft 365 PnP Weekly – Episode 168 (May 30th) with Montréal based Sr Product Manager on the Microsoft Graph team Sébastien Levert | @sebastienlevert | video | podcast
• Microsoft 365 PnP Weekly – Episode 167 (May 23rd) with Helsinki-based software engineer, PowerShell maintainer and Office Apps and Services MVP Gautam Sheth (Valo Solutions) | @gautamdsheth. | video | podcast

Demos

• Building Frequently Asked Questions web part with Property Field Collection Data – configure the FAQ web part’s layout in property pane - select accordion or tab, colors and themes. Create categories and sort conditions. Use the rich text editor to easily answer questions. Uses Office UI Fabric Search Box - search by question, searched term highlighted in results. See code for the 2 components (FAQ and Accordion) in web part. Accordion is a custom component.
• Solve Teams and SharePoint Theme problems with the “Enhanced Theme Provider” control for SPFx solutions – introduction to the “Enhanced Theme Provider” control, what problem it solves (lack of support for Teams high contrast theme and basic styles), how it’s implemented, and how to use it in SPFx. Extends functionality of the Fluent UI ThemeProvider control by adding some logic and considered as a sort-of wrapper for all react and non-react controls that you want to add to the WebPart.
• Getting started on building custom list form components with SPFx v1.15 – introducing a new component type in v1.15 called Form customizer. Enabling development of custom modern forms with custom edit experience. Delivering API level support for content types with 6 new properties for separately configuring new form, edit form and display form. Look at how to debug your form customizer and how form customizer will work in your production environment. Review List extensibility roadmap.

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

Agenda items

• SharePoint Framework - Vesa Juvonen (Microsoft) | @vesajuvonen – 6:19
• PnPjs Client-Side Libraries - Julie Turner (Sympraxis Consulting) | @jfj1997 – 9:04
• CLI for Microsoft 365 - Patrick Rodgers (Microsoft) | @mediocrebowler – 10:35
• PnP SPFx Controls - Patrick Rodgers (Microsoft) | @mediocrebowler – 11:15
• PnP Modern Search - Patrick Rodgers (Microsoft) | @mediocrebowler – 12:09
• PnP Samples - Hugo Bernier (Microsoft) | @bernierh – 13:01
• PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII – 15:10
• Demo - Building Frequently Asked Questions web part with Property Field Collection Data – Arun Kumar Perumal | @arun_perumal16 – 17:08
• Demo - Solve Teams and SharePoint Theme problems with the “Enhanced Theme Provider” control for SPFx solutions – Fabio Franzini (Apvee Solutions) | @franzinifabio – 25:58
• Demo - Getting started on building custom list form components with SPFx v1.15 – Alex Terentiev (Microsoft) | @alexaterentiev & Vesa Juvonen (Microsoft) | @vesajuvonen – 36:40

Actions

• Opt into the PnP Recognition Program | aka.ms/m365pnp-recognition
• Register for upcoming Sharing is Caring events:
  • Writing for the Web | Thursday, June 23, 12pm PT | 3pm ET | 9pm CET - Register
  • Writing for the Web | Monday, June 27, 10am PT | 1pm ET | 7pm CET - Register
  • Maturity Model Practitioners | Register
  • PnP Office Hours – 1:1 session | Register
  • PnP Buddy System | Request a Buddy
• Register for the Microsoft 365 Developer Program and get a free developer tenant
• Get started with free training modules covering Microsoft 365 platform capabilities.
• Visit the Microsoft 365 Unified Sample Solution Gallery from Microsoft and community.
• Sign up to Share your story in the Learn from the community series.
• 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

Demo references

• Building Frequently Asked Questions web part with Property Field Collection
  • Sample - Frequently Asked Questions with Property Field Collection Data
  • Article - Community Sample: React FAQs webpart
• Solve Teams and SharePoint Theme problems with the “Enhanced Theme Provider” control for SPFx solutions
  • Documentation – Build Microsoft Teams tab using SharePoint Framework – Tutorial
  • Documentation - Isolated web parts
  • npm Tools - @fluentui/react-theme-provider
• Getting started on building custom list form components with SPFx v1.15
  • Documentation - SharePoint Framework v1.15 preview release notes
  • Documentation - Build your first Form Customizer extension (preview)
  • Control - Dynamic Form

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

Open-source project status

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

• SharePoint dev documentation
• SharePoint dev issue list

Upcoming calls | Recurrent invites

• Microsoft 365 platform call | Tuesday, June 7, 8:00 am PT – https://aka.ms/m365-dev-call (weekly)
• Office add-in monthly call | Wednesday, June 8, 8:00 am PT - https://aka.ms/officeaddinscall (monthly)
• M365 General Dev call | Thursday, June 9, 7:00 am PT - https://aka.ms/m365-dev-sig (bi-weekly)
• Adaptive Cards monthly call | Thursday, June 9, 9:00 am PT - https://aka.ms/adaptivecardscommunitycall (monthly)
• Power Platform monthly call | Wednesday, June 15, 8:00 am PT - https://aka.ms/PowerAppsMonthlyCall (monthly)
• Viva Connections & SharePoint Framework call | Thursday, June 16, 7:00 am PT - https://aka.ms/spdev-spfx-call (bi-weekly)
• Microsoft Identity Platform call | Thursday, June 16, 9:00 am PT - https://aka.ms/IDDevCommunityCalendar (monthly)

About

Viva Connections & SharePoint Framework bi-weekly calls are targeted at anyone who is interested in the JavaScript-based development towards Microsoft Connections, Microsoft Teams, SharePoint Online, and also on-premises. 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 Viva, 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 - 3rd of June 2022