Viva Connections & SharePoint Framework Community Call – 12th of January, 2023

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

• Announcements
  • Agenda set for next Microsoft 365 platform call - Tuesday, January 17, 2023, 8:00 am PT.
    • Latest news from Microsoft engineering on the Microsoft 365 topics
    • Community together mode group photo
    • David Rousset - Metaverse experience implemented as a Teams meeting app using the Teams LiveShare SDK
    • Vesa Juvonen & Andrew Connell – Introduction to Viva Connection learn module - tutorial 2
  • Sharing-Is-Caring training dates in January - aka.ms/sharing-is-caring
  • Community Recognition Program badges for 2023 - aka.ms/community/recognition
  • New Learning Module – Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections and for Microsoft Viva Home - aka.ms/viva/ace/learn
• Project releases
  • PnPjs Client-Side Libraries - v3.11 (GA)
  • CLI for Microsoft 365 – v6.1 (GA)
  • Microsoft Graph Developer Proxy – v0.3 (beta)
  • Viva Connections Toolkit for VS Code – v0.3.2 (beta)
• SPFx samples
  • New - Holiday Calendar - Harminder Singh | HarminderSethi
  • Updated - Tab Accordion with Rich Text - Constey | Constey
  • New - Offer Creation - Markus Moeller | @moeller2_0
• ACE samples
  • People Search – Kunj Sangani | @sanganikunj

Demos

• Getting started with hTWOo React controls for Microsoft 365 – what is the hTWOo UI library (hTWOo – Core, – React, – Icons). Install and create SPFx solution using hTWOo assets. See setting up theme support, initializing icons, creating a class/function component, and importing hTOWo assets into an SPFx project. Extensibility is built in at the core. Uses Atomic Design to organize components. Components minimize bundle sizing. Teams theming for use in SPFx Teams solutions.
• Adaptive Cards design samples for Viva Connections – brief overview of Viva Connections Dashboard and Cards along with the Adaptive Card samples repo. Add an Adaptive Card template to a Dashboard page. Populate template with JSON from Adaptive Card Designer. Learn about Card JSON (the design) and Data JSON file (static data). Not shown is building out more robust “custom” cards – full SPFx ACE extensions that connect various end points, LOB systems, etc.

The host of this call is Garry Trinder (Microsoft) | @garrytrinder. Q&A takes place as always in chat throughout the call.

Agenda items

• 08:12 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
• 09:48 – PnPjs Client-Side Libraries – Julie Turner (Sympraxis) | @jfj1997
• 11:05 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
• 12:27 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
• 14:18 – PnP SPFx Controls – Alex Terentiev (Microsoft) | @alexaterentiev
• 15:05 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
• 15:28 – PnP Modern Search – Garry Trinder (Microsoft) | @garrytrinder
• 15:51 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
• 16:55 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
• 17:13 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
• 18:19 – Demo – Getting started with hTWOo React controls for Microsoft 365 – Julie Turner (Sympraxis) | @jfj1997
• 37:47 – Demo – Adaptive Cards design samples for Viva Connections – Alex Clark (Microsoft) | @sharepointalex

Together Mode

The world feels so small when you’re sitting next to your friends! Thanks for being here and for making this a better world.

Actions

• Opt into the PnP Recognition Program | aka.ms/m365pnp-recognition
• Register for upcoming Sharing is Caring events:
  • Maturity Model Practitioners | Tuesday, January 17th, 7am PST – Download reoccurring invite
  • Writing for the Web | Monday, January 23rd, 10am PT | 1pm ET | 7:00pm CET - Register
  • PnP SPFx Samples w/NVM | Wednesday, January 25th, 9am PT | 12pm ET - 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.
• 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

• Getting started with hTWOo React controls for Microsoft 365
  • Site - hTWOo Design Studio
  • Repo - HTWOO UI framework
• Adaptive Cards design samples for Viva Connections
  • Templates - Adaptive Card templates - design examples
  • Documentation - Build your first SharePoint Adaptive Card Extension
  • Learn - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections
  • Documentation - Adaptive Cards Template Language
  • Tool – Adaptive Cards Designer

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, January 17, 8:00 am PT – https://aka.ms/m365-dev-call (weekly)
• Power Platform monthly call | Wednesday, January 18, 8:00 am PT - https://aka.ms/PowerAppsMonthlyCall (monthly)
• Microsoft 365 General Dev call | Thursday, January 19, 7:00 am PT - https://aka.ms/m365-dev-sig (bi-weekly)
• Microsoft Identity Platform call | Thursday, January 19, 9:00 am PT - https://aka.ms/IDDevCommunityCalendar (monthly)
• Viva Connections & SharePoint Framework call | Thursday, January 26, 7:00 am PT - https://aka.ms/spdev-spfx-call (bi-weekly)
• Office add-in monthly call | Wednesday, February 8, 8:00 am PT - https://aka.ms/officeaddinscall (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 - 12th of January 2023