Microsoft 365 Community / Microsoft Viva

📺 In this 12 minute developer-focused demo Vesa walks the audience through new capabilities in SPFx 1.18. They start with an overview of building experiences in Microsoft 365 with SPFx (the easiest way to build enterprise soluitions for Microsoft Teams, Microsoft Viva, Outlook, Microsoft 365 app and SharePoint) and then proceed to roadmap outlook. Alex then demoes updated layout options for Viva connections powered by SPFx.

This demo is taken from the Microsoft 365 & Power Platform weekly call – 22nd of August, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
- Vesa Juvonen (Microsoft) | @vesajuvonen
- Alex Terentiev (Microsoft) | @alexaterentiev


💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

📺 We walk you through newly released features around the Viva Topics - this is Summer 2023 update for the newly release capabilities -- You can see just how much richness there is in the Viva Topics experience and how easy it can be.

This video is part of our our Summer 2023 series for Microsoft Viva Topics! This series is for you to learn what's new and what's next around the Microsoft Viva Topics directly from the product team.

✨ Video Presenters
• Naomi Moneypenny (Microsoft)
• Eric Gradel (Microsoft)
• Akash Ravi (Microsoft)
• Maeneka Grewal (Microsoft)

📃 Agenda
0:00 Introduction
0:42 Pilot Guide
1:40 Outlook Desktop support
2:31 Email context
3:09 People Profile
3:33 Answer in Viva
3:52 New manage topic features
4:32 Viva Engage

📖 Learn More
• Viva Topics - What's next? - Summer 2023 - https://www.youtube.com/watch?v=a_uMohnyXcE
• YouTube playlist for Microsoft Viva Topics videos - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1FrKVCOJiSnXpXDWZ3_0n
• Overview on Microsoft Viva Topics - https://www.microsoft.com/en-us/microsoft-viva/topics
• Use Scenario Catalog: https://aka.ms/TopicsScenarios 
• Adoption Playbook: https://aka.ms/topicsadoption  
• Pilot Guide: https://www.aka.ms/topicspilot 
• Viva Topics audience-based email templates: adoption.microsoft.com/viva/ 
• Series of 3 blogs to support adoption of Viva Topics: https://techcommunity.microsoft.com/t5/microsoft-viva-blog/the-journey-to-viva-topics-adoption-success-intro/ba-p/2976552
• Communication Asset Samples: https://download.microsoft.com/download/d/2/e/d2e894dd-c360-4edd-9c83-8e41787afda1/Viva-Topics-Communication-Asset-Samples.pptx

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform Community - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

📺 We introduce the upcoming features for the Viva Topics which we are planning to get released within upcoming months. Notice that there always can be changes on the plans, but we want to provide you visibility and insights on the currently planned features and capabilities. This is also just a fraction of all the upcoming features in the roadmap related on the Viva Topics across the Microsoft 365 experiences.

This video is part of our our Summer 2023 series for Microsoft Viva Topics! This series is for you to learn what's new and what's next around the Microsoft Viva Topics directly from the product team.

✨ Video Presenters
• Naomi Moneypenny (Microsoft)
• Eric Gradel (Microsoft)
• Akash Ravi (Microsoft)
• Maeneka Grewal (Microsoft)

📃 Agenda
0:00 Introduction
0:37 Pilot guide
0:57 Adoption Guide
1:21 Lightweight contribution from anywhere
1:58 Copilot
3:34 Analytics dashboard
4:20 Metrics to measure value
4:48 Search integration

📖 Learn More
• Viva Topics - What's new? - Summer 2023 - https://www.youtube.com/watch?v=HEDoNbY8vDI
• YouTube playlist for Microsoft Viva Topics videos - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1FrKVCOJiSnXpXDWZ3_0n
• Overview on Microsoft Viva Topics - https://www.microsoft.com/en-us/microsoft-viva/topics
• Use Scenario Catalog: https://aka.ms/TopicsScenarios
• Adoption Playbook: https://aka.ms/topicsadoption
• Pilot Guide: https://www.aka.ms/topicspilot
• Viva Topics audience-based email templates: adoption.microsoft.com/viva/
• Series of 3 blogs to support adoption of Viva Topics: https://techcommunity.microsoft.com/t5/microsoft-viva-blog/the-journey-to-viva-topics-adoption-success-intro/ba-p/2976552
• Communication Asset Samples: https://download.microsoft.com/download/d/2/e/d2e894dd-c360-4edd-9c83-8e41787afda1/Viva-Topics-Communication-Asset-Samples.pptx

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

Jethro Seghers delivers a 10-minute developer-focused demo targeting the student persona. Viva Connections for Education (student’s digital home dashboard with cards for resource access, student-teacher connections, and more), EDU specific code samples (tuition fees, library loans, book a space, internships, scholarships), Adoption Toolkit (Best practices for Viva Connections Adoption, Day in a life for a student using VCE, Communication templates and documentation) what’s next?

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 18, 2023.

Demo Presenter
• Jethro Seghers (Microsoft) | @jseghers

Supporting materials
• Zip file – Viva Connections for Education Adoption Guide | aka.ms/VCEAdoptionToolkit
• Documentation - Overview of Viva Connections for Education | aka.ms/VCE
• Repo - Viva Connection Adaptive Card Extensions (ACEs) sample repository | aka.ms/spfx-aces

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

📺 Microsoft is releasing new template options for the Viva Connections cards with the SharePoint Framework 1.18 release. In this demo, Alex Terentiev is showcasing the different new options and shows how to take advantage of them within your solutions.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on June 29, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
• Alex Terentiev (Microsoft) | @alexaterentiev

📖 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• SharePoint Framework 1.18 preview release notes - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18
• Survey sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Prompt-Survey
• Start a chat sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Start-Chat
• People search sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-PeopleSearch
• Viva Connections sample cards - https://aka.ms/viva/samples

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

We are excited to introduce new Microsoft Viva Connection card layouts as part of the SharePoint Framework 1.18 release. At the time of this video, we are shipping the 1.18 preview version with new options which customers can partners can take advantage as they design their dashboard experiences and extensibility for Microsoft Viva.

This video is recorded for the first preview version of the SharePoint Framework 1.18 in June 2023. Depending on the customer and partner feedback, there might be changes on what exactly was/will be released around the suggested new layouts.

In this video, you will learn about
- New layout options available with the 1.18 release of SharePoint Framework
- How the layouts are presented in the desktop and in mobile experiences
- Example scenarios with sample code on the use cases
- How to use layouts in the code level

✨ Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

📃 Agenda
0:00 Introduction
3:29 Live demo on the new options in the Viva Connection dashboard
9:34 SharePoint Framework solution code for the showed scenarios
13:48 Next step and future investment areas in this side

📝 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• SharePoint Framework 1.18 preview release notes - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18
• Survey sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Prompt-Survey
• Start a chat sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-Start-Chat
• People search sample used in the video - https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/InputCard-PeopleSearch
• Viva Connections sample cards - https://aka.ms/viva/samples

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

📺 In this 12-minute Maker/Developer focused demo, Paolo Pialorsi delivers the 3rd installment on this end-to-end retail solution scenario that you can build in Microsoft 365. In this particular demo, the focus is on the back-end .NET API relied upon by both the Teams personal app and a Viva Connections card. See in call in Postman and code in SPFx app for how to consume the API in a secure way by providing a token – easily configured.

This community call demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 27, 2023.

✨ Demo Presenter
• Paolo Pialorsi (PiaSys.com) | @PaoloPia

📖 Supporting materials
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Demo - Extend SPFx apps across Microsoft 365 - Contoso Retail scenario (2023-06-06) – Paolo Pialorsi (PiaSys) | @PaoloPia
• Demo (June 13) - Exposing Microsoft Teams apps in Microsoft Viva with SPFx cards – Paolo Pialorsi (PiaSys) | @PaoloPia

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

In this 13-minute Maker/Developer focused demo, Vesa Juvonen delivers an update on SharePoint Framework and Microsoft Viva - Viva home (desktop) experience and Viva Connections (mobile) experience. Cover off on segments - We’ve built a Teams app, what’s next? Quick operations using the ACE Quick View, Expanding from Teams to Teams+Viva, New partner opportunity – Viva apps in the Microsoft Store, and Future - ACEs, templates, card sizes, and UX capabilities.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 16, 2023.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Article - New experiences for Viva Connections are now rolling out | https://techcommunity.microsoft.com/t5/viva-connections-blog/new-experiences-for-viva-connections-are-now-rolling-out/ba-p/3729071
• AppSource – Microsoft Viva | aka.ms/viva/store

All Developers
• Documentation - Start using Viva Connections | aka.ms/Viva/Connections/GettingStarted
• Documentation - Start a Solution | aka.ms/Viva/Connections/Platform
• Documentation - Design Guidelines | aka.ms/Viva/Connections/DesignGuidelines

Teams Developers
• Documentation - Enable SSO for your Teams App | aka.ms/Viva/Connections/Teams/SSO
• Documentation - Enable deep linking | aka.ms/Viva/Connections/Teams/DeepLinks
• Documentation - Consider Message Extensions | aka.ms/Viva/Connections/Teams/MessagingExtensions
• Documentation - Consider Stage View | aka.ms/Viva/Connections/Teams/StageView

Jump Start Development
• Documentation - Training | aka.ms/Viva/Connections/Platform/Training
• Documentation - OSS Samples | aka.ms/Viva/Connections/Samples
• Documentation - Plug into Community | aka.ms/community/home

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

In this 16-minute developer focused demo, Paolo Pialorsi reviews capabilities of cards and rendering devices. QuickView and CardView cards (ACEs) can be created with no-code (configurable), low-code (designable) or pro code (customizable). Step through ACE creation using yeoman generator, creating a CardView card with specific elements (images, text, buttons). Scaffold and explore the code. Discuss getting data from external sources, data binding, deep linking, and usage of secured Azure Functions in back-end. Add a button and register views.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 13, 2023.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Demo - Extend SPFx apps across Microsoft 365 - Contoso Retail scenario (2023-06-06) – Paolo Pialorsi (PiaSys) | @PaoloPia

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

Leverage your existing bot investments (code) and expose functionality in Viva. In this 7-minute developer focused demo, Luca Bandinelli enables you to teach your bot how to speak Viva! Learn about Bot powered ACEs, implementation details, packaging and distribution. No Coding, self-contained bot deployed to SharePoint via a package. Step through code, manifest, create package, upload to app catalog, go to dashboard, add card. Talk about authentication and updating, Capability goes to Public Preview this week.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 6, 2023.

Demo Presenter
• Luca Bandinelli (Microsoft)

Supporting materials
• Article - Announcing SharePoint Framework 1.17 with updates for Microsoft Teams, Microsoft Viva and SharePoint

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

In this 12-minute developer-focused demo, Siddharth Vaghasia shares the output of an explorational Dev experience using OpenAI, Prompt Engineering, ChatGPT, and calling external APIs. ACE with a PrimaryText card view and a quick view using ChatGPT OpenAI API. Card provides user with informational/motivational quotes, tips etc. Configurable options include API key, select prompt/category, max token, card title and description. Uses session storage to limit the number of requests per user. Deliberate UI and Code walk through (Code Tour).

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 1, 2023.

Demo Presenter
• Siddharth Vaghasia | @siddh_me

Supporting materials
• Documentation – OpenAI Rate limits overview | https://platform.openai.com/docs/guides/rate-limits/overview
• Sample - Daily Insights with ChatGPT | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-ChatGPTDailyInsights
• Documentation - CodeTour | https://code.visualstudio.com/learn/educators/codetour

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

Viva Connection is your mobile friendly portal for your employees to stay connected with your company. Viva Connections is part of the Microsoft Viva employee experiences platform, which provides you tools and features for efficient employee engagement and for increasing productivity of your employees.

Viva Connections dashboard can be extending by using SharePoint Framework (SPFx) and you can acquire these solutions directly from the partner ecosystem or by using the Microsoft AppSource/Marketplace directly within your tenant.

In this videos we cover the extensibility options of Viva Connections, talk about the value proposition of the dashboard and walkthrough the process of acquiring Viva apps to your tenant from the Microsoft AppSource.

You can see all Microsoft Viva solutions in Microsoft AppSource (store) using following link - https://aka.ms/viva/store

In this video, you will learn about
- What is Viva Connections and how it's exposed in the Microsoft Teams
- How you can personalize and customize Viva Connections dashboard
- How you can acquire new ISV partner cards for you Viva Connections deployment directly from the Microsoft AppSource

✨ Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:45 Introduction on the Viva Connections experience
2:56 How to edit and customize the Viva Connection dashboard
5:14 Suggested partner cards in the Viva Connection card picker
7:22 Viva solutions in the Microsoft AppSource
9:12 How apps are acquired from the store
10:43 Recap on covered topics

📝 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Set up and launch Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-setup-guide
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/
• Publish SharePoint Framework applications to the marketplace - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

85% of EDU app interaction happens via mobile phones and Viva Connections is mobile device optimized. In this 14-minute developer focused demo, Jethro Seghers is delighted to share that now all EDU Viva cards (assignments, courses, library loans, tuition loans, internships, etc.) are open source, GA to all EDU customers. Cards simplify resource access connect students and immediately deployable. See the latest cards, look at the samples, build actionable ACE cards for EDU. Future direction suggested. Please let us know.


This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 30, 2023.

Demo Presenter
• Jethro Seghers (Microsoft) | @jseghers

Supporting materials
• Article – Microsoft Viva Connections for Education – Now Available to all Customers | https://techcommunity.microsoft.com/t5/education-blog/microsoft-viva-connections-for-education-now-available-to-all/ba-p/3832809
• Documentation - Overview of Viva Connections for Education | https://learn.microsoft.com/viva/connections/overview-viva-connections-education
• Web page – Microsoft Viva Learning | https://www.microsoft.com/microsoft-viva/learning
• Previous demo – Creating custom SPFx components for Microsoft Viva Connections for Education – Jethro Seghers (Microsoft) | @jseghers (delivered 18th May)
• Samples - EDU ACE Code samples | https://adoption.microsoft.com/sample-solution-gallery/jesegher/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

In this 10-minute developer-focused demo, Yves Habersaat delivers an introduction to the Graph Presence API, API methods, presence sessions, presence sessions with SPFx, a setPresence method example, and suggestion to use Graph Explorer to experiment with API. This ACE demonstrates how to use the Presence Graph API endpoints (beta) to set and retrieve a presence status message for a user. Set/update a user’s presence – their availability and a message to viewers. Sample contains wide range of capabilities.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 23, 2023.

Demo Presenter
• Yves Habersaat (Sword Group) | @yhabersaat

Supporting materials
• Sample - BasicCard-StatusMessage | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-StatusMessage
• Tool – Graph Explorer | aka.ms/ge

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

In this 16-minute developer-focused demo, Davide Mauri and Paolo Pialorsi integrate a ToDo list into an existing application without writing any code with an open-source tool Microsoft just released called Data API Builder for Azure Database. For a new/existing database, specify a table, and let tool create a REST API or GraphQL endpoint that’s then consumed by your application – an ACE in this case! Step through ACE code for managing security and tasks.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 23, 2023.

Demo Presenters
• Davide Mauri (Microsoft) | @mauridb
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Tool - Data API builder for Azure Databases | https://mcr.microsoft.com/product/azure-databases/data-api-builder/about
• Repo - data-api-builder | aka.ms/dab
• Demo - Data API builder and Microsoft 365 | https://github.com/yorek/dab-microsoft365-demo
• Builder - ace-dab-spfx (SPFx consuming DAB Demo) | https://github.com/pnp/sp-dev-fx-aces/tree/main/scenarios/ace-data-api-builder/spfx

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

In this 15-minute developer focused demo, Luca Bandinelli and Alex Terentiev deliver a directional update on SPFx and extensibility platform for Microsoft 365. SPFx v1.17 capabilities reviewed include: Use TeamsJS SDK v2.9.1, OS variable now in serve.json configuration, web part TopActions, Sync to Teams, Action handler for ACE, focus parameters in ACE quick view, and Adaptive Cards v1.5 schema support. Beyond v1.17 capabilities also described.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 28, 2023.

Demo Presenters
• Luca Bandinelli (Microsoft)
• Alex Terentiev (Microsoft) | @alexaterentiev

Supporting materials
• Article – Announcing SharePoint Framework 1.17 release candidate - Vesa Juvonen (Microsoft) | @vesajuvonen

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

How to use the Viva Connections Toolkit extension to debug your SharePoint Framework solutions directly in the Visual Studio Code.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=OmFKAw0g61w&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=6
⬅️ Previous video on this series - https://www.youtube.com/watch?v=jXQFgGlId00&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=4

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Getting started on using debugging features in the Viva Connections Toolkit
- Review launch.json configuration for debugging
- How debugging works in the Visual Studio Code
- Adding breakpoints and debugging the code

✨ Demo Presenter
• Hugo Bernier (Microsoft)

📃 Agenda
0:00 Introduction
0:19 Debugging your code in Viva Connections Toolkit
1:30 Review launch.json configuration
2:20 Starting debugging (F5)
3:40 Adding breakpoint to your code

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

In this video we focus on showing how you will package and deploy your Viva Connections solutions to production tenant. We use the Viva Connections Toolkit to simplify the packaging and then perform the manual steps to deploy our solution to the tenant app catalog to be used in the tenant specific Viva Connections deployment.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=UlB3c6-8g_A&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=8
⬅️ Previous video on this series - https://www.youtube.com/watch?v=OmFKAw0g61w&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=6

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Package and deploy your existing Viva Connection solutions to production
- Different settings and configuration options
- Using solution in production mode without running localhost

✨ Demo Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:25 Configuration options for packaging
2:23 Packaging your solution for production usage
4:12 What does solution packages contain
5:15 Deploying solution to production tenant
6:02 Moving to admin center and app catalog
6:44 Deploying solution to the tenant
8:03 Using deployed solution in the Viva Connections dashboard

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

In this video we focus on the introduction around the Viva Connections Toolkit VS Code extensions which is available for developers to improve their productivity when creating new extensibility for Viva Home and Viva Connections.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=Fs9r4dvSxU4&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=2

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Introduction
- Why SharePoint Framework (SPFx) is the easiest way to build extensibility for Microsoft 365
- Benefits on using SPFx for Microsoft 365
- Extensibility options in Microsoft Viva Connections
- Why Viva Connections Toolkit exists?
- Features and capabilities in the Viva Connections Toolkit
- What if you are already familiar with the SPFx?
- Additional resources

✨ Demo Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:52 SharePoint Framework as the extensibility model for Viva Connections
04:18 SharePoint Framework experiences in Microsoft 365
05:37 Microsoft Viva Extensibility options for ACEs
07:22 Why Viva Connections Toolkit?
08:47 What's in the Viva Connections Toolkit?
10:40 Viva Connections Toolkit for existing SPFx developers
11:30 Capabilities and features in Viva Toolkit
12:33 How to get started
13:29 Outro

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

Ever wondered how long it takes to setup and launch Viva Connections? In this video we’ll demonstrate the setup & launch of Viva Connections in under 5 minutes! The new version of Viva Connections doesn’t require the setup of homesite and it comes with a set of out-of-the-box dashboard cards. These improvements make it extremely easy to setup Viva Connections.

Notice that the 5 min demonstration focuses on the technical deployment and does not take into account planning and change management required for rolling out the new features and capabilities in mid-sized or larger companies.

✨ Demo Presenter
• Anshuman Gaur (Microsoft) | @_AnshumanGaur

📝 Learn more
• More options coming soon for the Viva Connections desktop experience - Microsoft Community Hub - https://techcommunity.microsoft.com/t5/microsoft-viva-blog/more-options-coming-soon-for-the-viva-connections-desktop/ba-p/3644419
• Operator: Customize and edit the Viva Connections home experience | Microsoft Learn - https://learn.microsoft.com/en-us/viva/connections/edit-viva-home
• End user: See what you can do in the Viva Connections desktop experience • Microsoft Support - https://support.microsoft.com/en-us/office/see-what-you-can-do-in-the-viva-connections-desktop-experience-e1f53887-f3cc-4ec4-bdbd-2e2f673089b6
• Content set: Overview: Viva Connections | Microsoft Learn - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

📺 We are diving deep on knowledge sharing culture. How does Topics fit within your organization's structure? What are best practices for encouraging knowledge sharing and finding?

This video is part of our our Spring Series 2023 for Microsoft Viva Topics! This series is for you to learn not only "why" use Viva Topics, but also "how" to champion our features and implement best practices straight from the product team.

📖 All workshop content including hands-on labs can be found here: https://aka.ms/app-camp

✨ Video Presenters
• Naomi Moneypenny - Principal Group Product Manager
• Eric Gradel - Principal Product Manager
• Maeneka Grewal - Product Manager

📃 Agenda
0:00 Introduction
1:20 Building Knowledge Sharing Culture
2:35 Setup for success - Remove barriers
3:11 Recruit group of KMs
3:43 Onboard and motivate your knowledge managers
4:18 Knowledge Management roles
4:36 Tasks that can be accomplished by Knowledge Managers
5:05 Knowledge Managers (KM) are a key actor in the customer adoption journey
5:35 Directing KMs focus to high traffic topics
7:06 Analytics for KMs
7:39 Connect People
7:52 Structure for your organization
8:14 Connect people to topics - Build Trust
8:52 People in loop

📖 Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1FrKVCOJiSnXpXDWZ3_0n
• Overview on Microsoft Viva Topics - https://www.microsoft.com/en-us/microsoft-viva/topics
• Adoption resources for Microsoft Viva Topics | Microsoft Learn - https://learn.microsoft.com/en-us/viva/topics/adoption-resources

📝 Learn more
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform Community - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

📺 We are giving you the secrets to a successful pilot of Viva Topics. Follow these steps to see the most value of Viva Topics, all within 90 days.

This video is part of our our Spring Series 2023 for Microsoft Viva Topics! This series is for you to learn not only "why" use Viva Topics, but also "how" to champion our features and implement best practices straight from the product team.

✨ Video Presenters
• Naomi Moneypenny - Principal Group Product Manager
• Britt Boston - Principal Product Manager
• Maeneka Grewal - Product Manager

📃 Agenda
0:00 Introduction
0:25 Why Topics
2:23 Realizing the full value of Viva Topics
7:34 Keys to successful adoption of Viva Topics
9:32 What do I do with all these topics
15:03 Design of a successful pilot
20:31 Dashboard to measure health of your adoption
22:22 Metrics to measure value of Topics

📖 Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1FrKVCOJiSnXpXDWZ3_0n
• Overview on Microsoft Viva Topics - https://www.microsoft.com/en-us/microsoft-viva/topics
• Adoption resources for Microsoft Viva Topics | Microsoft Learn - https://learn.microsoft.com/en-us/viva/topics/adoption-resources

📝 Learn more
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform Community - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

📺 We will walk you through newly released features and features coming soon -- so you can see just how much richness there is in the Viva Topics experience and how easy it can be. 

This video is part of our our Spring Series 2023 for Microsoft Viva Topics! This series is for you to learn not only "why" use Viva Topics, but also "how" to champion our features and implement best practices straight from the product team.

📖 All workshop content including hands-on labs can be found here: https://aka.ms/app-camp

✨ Video Presenters
• Naomi Moneypenny - Principal Group Product Manager
• CJ Tan - Principal PM Manager
• Maeneka Grewal - Product Manager

📃 Agenda
0:00 Introduction
0:33 Benefits of Viva Topics (as part of the Viva Suite)
1:43 Viva Topics Overview
3:54 Feature updates
4:04 Viva Topics in Teams
4:35 First Run Experience in Teams
5:02 Adaptive topic cards in Viva Connections
5:43 Microsoft Search in Bing, Office & SharePoint
6:11 Discover topic relationships
7:06 Language Expansion
8:19 Topic types: edit & consume
9:28 Add any resource to the topic
9:58 Updates to feedback questions UX
10:57 Manage Topics updates
12:30 Government Community Cloud (GCC-Mod)
13:07 Viva Topics Branding
13:42 What's next
13:50 Viva Engage (Yammer)
14:15 Deeper connection with People Profile
14:42 Dashboard to measure health of your adoption
15:16 Metrics to measure value of Topics
15:54 Increase the efficiency of managing topics

📖 Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1FrKVCOJiSnXpXDWZ3_0n
• Overview on Microsoft Viva Topics - https://www.microsoft.com/en-us/microsoft-viva/topics
• Adoption resources for Microsoft Viva Topics | Microsoft Learn - https://learn.microsoft.com/en-us/viva/topics/adoption-resources

📝 Learn more
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform Community - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

In this 12-minute developer-focused demo, Marcin Wojciechowski shares a method to expose content search almost natively in mobile. In this ACE see implementing the Search API client and exposing the setQuery method, creating an adaptive card with input and search button, creating an adaptive card to present the results (template by João Mendes), and adding navigation events. You can use SharePoint Search API or Graph Search API, use the quickViewNavigator.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 9, 2023.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Sample - primary-text-card-search | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Search
• npm Package - MGWDEV M365 Helpers | https://www.npmjs.com/package/mgwdev-m365-helpers
• Code snippet - sp-browser-utils | https://github.com/mgwojciech/sp-browser-utils/blob/main/utils.js

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 26-minute developer focused demo, Luca Bandinelli introduces viewers to the 36-member Team focused on the evolution of SPFx. Then he quickly reviews what’s available in SPFx v1.16 and deep dives into what may be shipped in v1.17, i.e., Adaptive Cards v1.5 schema support for Viva ACE Cards, bump to Teams manifest v1.13 and more, more. Hear about aspirations beyond v.1.17 like Bot driven ACEs, notifications in Viva Connections, move Cache APIs to GA and still more!

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 24, 2023.

Demo Presenter
• Luca Bandinelli (Microsoft) | @BandinelliLuca

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

In this 22-minute developer focused demo, the Microsoft presenters share the latest details for Viva Connections on desktop Viva Home, presently in targeted release. Broad overview on current Viva Connections experience – app in Teams with mobile and desktop experiences. Updated Connections desktop with new default home experience. Deep-dive into Viva Home – Desktop and Mobile. See branding, feeds, card templates. Easy for Admins to maintain and create content. Extensibility options and resources. Start with Dashboard and optionally add homesite.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 31, 2023.

Demo Presenters
• Tejas Mehta (Microsoft) | @tpmehta
• Anshuman Gaur (Microsoft) | @_AnshumanGaur
• Luca Bandinelli (Microsoft)

Supporting materials
• Article - More options coming soon for the Viva Connections desktop experience | https://techcommunity.microsoft.com/t5/microsoft-viva-blog/more-options-coming-soon-for-the-viva-connections-desktop/ba-p/3644419
• Sample - Adaptive Card Extension Design Gallery | aka.ms/viva/ace/design/gallery/sample
• Repo - ace-designtemplate-gallery | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-designtemplate-gallery
• Learn - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn
• Documentation - Customize and edit the Viva Connections home experience | https://learn.microsoft.com/viva/connections/edit-viva-home
• Article - See what you can do in the Viva Connections desktop experience | https://support.microsoft.com/office/see-what-you-can-do-in-the-viva-connections-desktop-experience-e1f53887-f3cc-4ec4-bdbd-2e2f673089b6
• Documentation - Overview of Viva Connections | https://learn.microsoft.com/viva/connections/viva-connections-overview
• Documentation - Choose the default landing experience for Viva Connections desktop | https://learn.microsoft.com/viva/connections/edit-viva-home#choose-the-default-landing-experience-for-viva-connections-desktop

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 20-minute developer focused demo, Vesa Juvonen recaps Viva Connections and Adaptive Card Extensions (ACEs). Andrew Connell steps through creation of an SPFx ACE with the Primary Text Card template that uses the geo location capabilities in Viva Connections. Scenario - campus shuttle service. The ACE is for shuttle diver with mobile device. Book a trip, indicate travel status – on route, pick up, drop off. All details stored in a SharePoint list. Push and Pop QuickView Card (activities) in stack. Exercise 3, Viva Connections learn module.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 24, 2023.

Demo Presenters
• Vesa Juvonen (Microsoft) | @vesajuvonen
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn
• Learn Exercise - Exercise - Create an SPFx ACE with geo-location capabilities | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/7-exercise-ace-geo-location-actions.
• Demo (#1 in this series) - Introduction to Microsoft Viva ACE development learn module - Getting started – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell
• Demo (#2 in this series) - Create an SPFx Image Card ACE displaying image carousel - ACE learning module – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

In this 22-minute developer focused demo, Vesa Juvonen opens with basics on ACEs and underlaying SPFx and Adaptive Cards technologies for building experiences in Microsoft Viva. Then Andrew Connell delivers a session geared for people with SPFx, but no experience building Adaptive Card Extensions. See UI for card that displays dynamic images from an external service, namely NASA. Configure Property pane for the ACEImageViewer component, look at the code for this web part. References Exercise 2 - Create ACEs for Microsoft Viva Connections Learn module.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 17, 2023.

Demo Presenters
• Vesa Juvonen (Microsoft) | @vesajuvonen
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn
• Learn Basics - Basics of ACEs: card templates, CardViews, properties, and states | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/2-adaptive-card-extension-basics
• Learn Exercise - Exercise - Create an SPFx Image Card ACE displaying image carousel | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/5-exercise-ace-image-card
• Demo (#1 in this series) - Introduction to Microsoft Viva ACE development learn module - Getting started – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

In this 14-minute developer-focused demo, Alex Clark shares a 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. Develop basic cards in Adaptive Card Designer or in VS Code.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 12, 2023.

Demo Presenter
📺 Alex Clark (Microsoft) | @sharepointalex

Supporting materials
• Templates - Adaptive Card templates - design examples | https://github.com/pnp/AdaptiveCards-Templates
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Learn - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types
• Documentation - Adaptive Cards Template Language | https://learn.microsoft.com/adaptive-cards/templating/language
• Tool – Adaptive Cards Designer | https://www.adaptivecards.io/designer/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

In this video, you'll learn more about QuickViews, view navigators, and some common optimization techniques and scenarios you can use in your card views.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=kefrLAS2DRw&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=2
➡️ Next vide on this series - https://www.youtube.com/watch?v=-Eb4KIMtwt0&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=4

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/4-quickview-view-navigators
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

This module introduces you to creating custom Adaptive Card Extensions (ACEs) with the SharePoint Framework (SPFx) that can be used in Viva Connections or in Viva Home.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

➡️ Next video on this series - https://www.youtube.com/watch?v=kefrLAS2DRw&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=2

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/2-adaptive-card-extension-basics
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

In this video, you'll create an Adaptive Card Extension (ACE) with the Primary Text Card template that uses the geo-location capabilities in Viva Connections.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=P4x2-xd3QbU&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=5

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/7-exercise-ace-geo-location-actions
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

In this video, you'll create an Adaptive Card Extension with the Image Card template that displays images taken by one of the cameras on the selected Mars Rover.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=plePKkwZU-c&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=3
➡️ Next vide on this series - https://www.youtube.com/watch?v=P4x2-xd3QbU&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=5

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/5-exercise-ace-image-card
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

In this video, you'll create an ACE with the Basic Card template that displays items in a SharePoint list and enables the user to add items to the list.

This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.

⬅️ Previous video on this series - https://www.youtube.com/watch?v=plIXeRPR92Y&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
➡️ Next vide on this series - https://www.youtube.com/watch?v=plePKkwZU-c&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=3

Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/3-exercise-ace-basic-card-rest
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/

Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

See the new learn module in general and do the 1st Exercise in this 20-minute developer focused demo, delivered by Vesa Juvonen and Andrew Connell. Create a SPFx Basic Card ACE showing SharePoint list data. This ACE reads and writes to a SharePoint List. In hands-on lab, open your Workbench and website and add ACE to page. Look at operation of Card View, Quick View and at the target SharePoint list. Step through the AdaptiveCardExtension.ts, CardView.ts and QuickView.ts files.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 10, 2023.

Demo Presenters
• Vesa Juvonen (Microsoft) | @vesajuvonen
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• Exercise - Exercise - Create SPFx Basic Card ACE showing SharePoint list data | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/3-exercise-ace-basic-card-rest
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

In this 5-minute developer-focused demo, Kunj Sangani delivers an Adaptive card extension that displays prices of US stocks, forex and crypto in real time with the help of finnhub APIs. Simple change in property pane to see pricing in local currency. Code walkthrough. Uses finnhub APIs and WebSocket for fetching real-time data and Viva dashboard to target audience inside an organization. Samples available now and feedback greatly appreciated.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 15, 2022.

Demo Presenter
• Kunj Sangani (Cognizant) | @sanganikunj

Supporting materials
• Resource - Finnhub Stock API | https://finnhub.io/
• Sample - primary-text-card-stock-bitcoin-feed |https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-StockBitcoinFeed

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 10-minute developer focused demo, Patrick Rodgers shares a technique for generating/adding dynamic SVGs (interactive images) to Adaptive Card Extensions in a way that fits into the Adaptive Card mind-set (small, dynamic, performant). Run through the code for adding a simple mathematically derived geometric graphic to a CardView and a more complex bar chart sample (image graphic bound to data) in a QuickView card. Follow this approach to create your own SVG generation functions. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 13, 2022.

Demo Presenter
• Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials
• Sample - ace-chart | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-chart
• Article - What Is an SVG File? SVG Image and Tags Explained | https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them
• Article - Everything You Need To Know About SVG | https://css-tricks.com/lodge/svg/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 15-minute developer focused tour, Vesa Juvonen highlights synergies between Viva Toolkit & SharePoint Framework (SPFx) – community created pro-code developer tooling that simplifies development, validation, and publishing of custom Microsoft Viva experiences. Toolkit features include connection between Visual Studio Code and tenant, environment validation, installation of technical dependencies, solution update with CLI for Microsoft 365, start from scenario or sample, CodeTour, and it works on any SPFx project! Create a Viva Connections project from scratch, from a scenario or from an ACE sample. Alignment to Teams Toolkit. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 6, 2022.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Marketplace - Viva Connections Toolkit (Preview) | aka.ms/viva/code
• Repo - Viva Connections Toolkit for Visual Studio Code | https://github.com/pnp/vscode-viva
• Feedback – vscode-viva/issues | https://github.com/pnp/vscode-viva/issues

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 21-minute developer-focused demo, Paolo Pialorsi steps through how capabilities in SPFx v1.15 make it easy (as in automate) for your customer to register, manage consent and deploy your SaaS app/ACE in their tenant. Step through configuration for managing a multi-tenant deployment including app registration in Azure AD, hosting multi-tenant aware back-end services on Azure, consent, permissions, etc. Understand architectural challenges and see an ACE on multiple tenants interact with the back-end multi-tenant API. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 3, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Sample - Contoso Orders ACE | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-ace-pnp-contoso-orders/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 15-minute developer-focused demo, Derek Cash-Peterson showcases 2 new Helpdesk related ACE samples - Help Ticket and Pending Helpdesk Tickets (for tracking tickets assigned to support person) to demonstrate how to leverage multiple quick card views, geo-location functionality, media upload functionality, and movement between cards. Walk through ACE code in Visual Studio Code and wrap with Q&A and supporting resources. On card, collect incident type, priority, location and images. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 6, 2022.

Demo Presenter
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials
• Samples - ace-designtemplate-gallery | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-designtemplate-gallery
• AppSource - Adaptive Card Extension Design Gallery | https://appsource.microsoft.com/product/office/wa200003929?tab=overview
• Repo - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 14-minute developer-focused demo, Nanddeep Nachan and Ravi Kulkarni deliver a thorough UX and code walkthrough on an Adaptive Card Extension (ACE) with a card view and multiple quick views to display the public holidays for user based on their detected or selected office location. Uses an ACE component type and ImageCard template in SharePoint Framework (SPFx) v1.15.0. Relies on a SharePoint list with simple schema (title, location, date, image) in back-end. See upcoming holidays in Quick view. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 22, 2022.

Demo Presenters
• Nanddeep Nachan | @NanddeepNachan
• Ravi Kulkarni (Microsoft) | @RaviKul16a87

Supporting material
• Sample – Public Holidays | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-PublicHolidays

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 14-minute developer/designer focused demo, Vesa Juvonen opens with recently released SPFx v1.16 features - Top Actions support for web parts (demoed today), Teams JavaScript SDK v2 native support in SPFx solutions, and Asynchronous support for Viva Connections ACEs rendering. Alex Terentiev shows Top Actions support that allows developers to add custom buttons or custom dropdowns to the web part’s command bar. Like property pane controls but based on cleaner UI approach. Also review features in development and tentative release dates. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 6, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Web page - Microsoft Viva Learning | aka.ms/VivaLearning
• Documentation - SharePoint Framework v1.16 release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.16
• Article - Public preview of SharePoint Framework 1.16 – First release of upcoming features | https://devblogs.microsoft.com/microsoft365dev/public-preview-of-sharepoint-framework-1-16-first-release-of-upcoming-features/
• Repo - SharePoint Framework v1.16 release notes | https://github.com/SharePoint/sp-dev-docs/blob/main/docs/spfx/release-1.16.md
• Feedback – sp-dev-docs issues list | https://github.com/SharePoint/sp-dev-docs/wiki/Issue-List

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 17-minute developer-focused demo, Elio Struyf unveils after months of work, the preview Viva Connections toolkit, available now. Streamline your development process. See how to access and install the pre-release version of this new toolkit. Create a Viva project from a clean slate, from a scenario with CodeTour guidance or from an example (sample). Check for and install dependencies (Node.js., npm, and npm dependencies). Please try out the toolkit and give us your feedback please. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 11, 2022.

Demo Presenter
• Elio Struyf (Struyf Consulting) | @eliostruyf

Supporting materials
• Tools - Viva Connections Toolkit for Visual Studio Code | https://github.com/pnp/m365-hosted-apps-vscode
• VisualStudio Marketplace - Viva Connections Toolkit (Preview) | https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 9-minute developer-focused demo, Marcin Wojciechowski relates how with complex ACE’s, handling many conditional quick view onActions (many if action.id statements), can seriously complicate code. Example scenario – exposing news items with next and previous actions, options to like and comment, and the ability to post news in a Teams channel. See how to move from many onActions to a single action with refactoring. See how actions are handled/combined by the ActionExecutor! Easily add new actions and zero impact to QuickView code. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 30, 2022.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Sample - ace-strategy-pattern | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/ace-strategy-pattern
• Wikipedia - Strategy pattern | https://wikipedia.org/wiki/Strategy_pattern

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 11-minute developer/designer focused demo – Divyanka Malik shows how Viva Learning is bridging the divide between Learning systems and Work systems by exposing learning sources on the same surface employees are working. Learn about out-of-box integrations and Microsoft Graph APIs for syncing with content catalog and learner records. Viva Learning Graph APIs and roadmap include Content Sync API (Public preview) and Learner record (Assignment Sync and Completion Sync) APIs (Future preview). Connect your customer’s Learning Content Repositories to Viva Learning through this extensible platform. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 28, 2022.

Demo Presenter
• Divyanka Malik (Microsoft)

Supporting materials
• Web page - Microsoft Viva Learning | aka.ms/VivaLearning
• Article - Viva Learning now generally available! | aka.ms/VivaLearningGA
• Get started - Microsoft Viva | aka.ms/VivaLearningAdoption
• Documentation - Introduction to Microsoft Viva Learning | aka.ms/VivaLearningDocs
• Skill up - Microsoft Viva Learning | aka.ms/Viva/Learning/PracticePage

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 20-minute developer-focused demo, Siddharth Vaghasia delivers a single ACE component to show multiple cards and items from a SharePoint list. Each list row is rendered separately in a Card view. Card view format based on schema and data stored in list row. Additional information in row rendered in Quick View card or link to external resource. Display and rotate card on Dashboard by time and date. Navigate through card items with Prev/Next. Update CardJSON and CardData in list with Power Automate. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 14, 2022.

Demo Presenter
• Siddharth Vaghasia | @siddh_me

Supporting materials
• Sample Repo - Dynamic Announcements | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Dynamic-Announcements
• Sample Repo - Event schedule and registration | https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/event-schedule

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 9-minute developer focused topic overview – Gloria Sánchez and Vesa Juvonen announce a new set of benefits (20 of them) for ISV partners publishing Microsoft Viva solutions to AppSource or to SharePoint/Viva Connections store. Microsoft’s committed to the Employee Experience Platform (EXP), a.k.a., Microsoft Viva Platform and Ecosystem. Hear about the new Microsoft 365 ISV Benefits program, go-to-market benefit highlights and how to enroll in the program. This “platform” is built for extensibility. Benefits include marketing support, technical support, monetary incentives, guidelines for IT Admins and more. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 24, 2022.

Demo Presenters
• Gloria Sánchez (Microsoft)
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Program - Build apps for Teams and Viva and take advantage of the Microsoft 365 ecosystem | aka.ms/modernworkisv

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 15-minute developer-focused demo, Fabio Franzini quite completely shows off the new control to be included in the next version of the PnP Reusable React controls library. The control facilitates the use of Designer inside a SPFx web part. Essentially, the Host renders a single Adaptive Card in a web part and on the selected Adaptive Card now is a superimposed button ‘Open Designer’ that brings up the new and SPFx optimized, Designer control. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 19, 2022.

Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio

Supporting materials
• Tools – Adaptive Cards | https://adaptivecards.io/
• SPFx Controls - Adaptive Card Host | https://pnp.github.io/sp-dev-fx-controls-react/controls/AdaptiveCardHost/
• Samples - Adaptive Card Host control | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-card-host-control

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

In this 20-minute developer-focused demo, Anoop Tatti acclimates viewers to his Office locations ACE starting in the property pane. See configuring this ACE with multiple card views showing details of geographically distributed offices for an organization. Key solution properties: Multiple data sources (local properties, taxonomy, or SharePoint list), Bing and Google for maps, PnP JS v3, OpenWeather API to get weather, Temporal API to get local time, Geolocation action type and Caching. Uses new Show location action. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 19, 2022.

Demo Presenter
• Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials
• Sample - Office locations | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-OfficeLocations
• Demo - Getting started on building Microsoft Viva Connection adaptive card components using SPFx – Patrick Rodgers (Microsoft) | @mediocrebowler | https://www.youtube.com/watch?v=KQGsY5fvLaY
• Ignite session - Get started with Microsoft Viva Connections Extensibility | aka.ms/CONLL112
• YouTube Channel - PiaSys Tech Bites | https://www.youtube.com/c/PiaSysTechBites
• Documentation - Location capabilities in Adaptive Card Extension | https://docs.microsoft.com/sharepoint/dev/spfx/viva/get-started/actions/geolocation/geolocationdocumentation
• Overview - JavaScript Temporal API Cheatsheet | https://temporal-api-cheatsheet.rodneylab.com/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pn

In this 15-minute developer-focused demo, Derek Cash-Peterson’s solution delivers 12 beautiful and very usable Adaptive Card Extensions (ACEs) and a personal app that shows the ACEs and how related deep links surface in Teams. Each ACE (Event scheduling, café menu, Calendar…) showcases functionality like collapsing menus, scrolling through articles, conditional formatting, UI design, etc. From the Teams app click to see ACE in Adaptive Cards Schema Explorer and alter card as desired. Step through code for Event Scheduler ACE. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.

Demo Presenter
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials
• Samples - ace-designtemplate-gallery - https://symp.info/ACEDesignGallery
• App Store: From App Catalog - SharePoint Store - https://appsource.microsoft.com/en-US/product/office/WA200003929

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

In this 18-minute developer focused demo – Waldek Mastykarz and Paolo Pialorsi confirm the benefits of using a common set of back-end APIs to provide enterprise level functionalities to a host of UIs - Teams, Outlook, Office.com, Viva and ACEs built with SPFx components. The example scenario – An office desk booking app. Security and API hosting from Azure, data in SharePoint lists. Reports in Power BI, Booking cards in Teams and Viva Connections Dashboard. Notifications in Outlook. Thorough code walkthrough. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 17, 2022.

Demo Presenters
• Waldek Mastykarz (Microsoft) | @waldekm
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Sample – PnP.SafeDesk365 | https://github.com/pnp/PnP.SafeDesk365

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

In this 8-minute developer-focused demo, Paolo Pialorsi focuses very specifically and concisely on how you can manage navigation inside ACEs with SPFx. Every ACE has navigation properties (Navigators) that can be used to navigate across Card View(s) and Quick View(s). Functionality includes Read the current item ID, Register and Push, Pop & Replace. You can rely on these objects to precisely manage the ACE navigation flow and stack. Code for functionality including Start and Restart logic shown. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Tools - Adaptive Cards Schema Explorer | https://adaptivecards.io/explorer/
• Documentation – ViewNavigator | https://docs.microsoft.com/sharepoint/dev/spfx/viva/get-started/advanced-quick-view-functionality#viewnavigator
• Sample - aces-navigation-demo | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-navigation-demo

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

In this 17-minute developer focused demo – Waldek Mastykarz and Anoop Tatti share the latest fully documented and available sample highlighting an end-to-end Microsoft 365 solution. Includes 2 ACEs, Viva Connections Dashboard, a list, an SPFx web part - Teams personal app using Microsoft Graph and MGT for data. See the app in action – initiate wellbeing request in ACE Card View with Quick View, then see details, approve, or reject in Teams Personal App. Step through code and view supporting resources. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 12, 2022.

Demo Presenters
• Waldek Mastykarz (Microsoft) | @waldekm
• Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials
• Sample - Wellbeing days requests and reminder - Adaptive Cards Extensions and Teams personal app | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-wellbeing
• Demo - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY&AB_channel=Microsoft365Community
• Ignite session - Get started with Microsoft Viva Connections Extensibility | https://aka.ms/CONLL112

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

In this 12-minute developer-focused demo, Siddharth Vaghasia shows an Adaptive Card Extension (ACE) that displays emails for the currently logged in user. Presenter steps through the code to show viewers how to get the current user’s email message from the Graph and render it in SPFx ACE Card View with previous and next buttons to navigate between emails. Demonstrates how to modify Quick View to display email details on click of any Email from Card View. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Siddharth Vaghasia | @siddh_me

Supporting materials:
• Article - How to call and show Graph API data in SPFx Adaptive Card Extensions (ACEs) | https://siddharthvaghasia.com/2022/01/02/how-to-call-and-show-graph-api-data-in-spfx-ace/
• Article - Create your first Adaptive Card Extensions (ACEs) with SPFx | https://siddharthvaghasia.com/2021/12/29/create-your-first-adaptive-card-extension-with-spfx/
• Sample - My Emails | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-MyEmails

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 18-minute developer-focused demo, Nanddeep Nachan delivers an inside view on building an ACE component with Card View and multiple Quick View cards to display Microsoft 365 (Unified) groups in a tenant of which user is owner or member. The Card View button allows the user to browse to groups. The Quick View card shows group details with buttons to visit associated SharePoint and or Teams sites. Card templates used were Basic, Image and Primary. Developed on SharePoint Framework v1.13.1. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.

Demo Presenter
• Nanddeep Nachan | @NanddeepNachan

Supporting materials
• Sample - My Microsoft 365 Groups | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-My-M365-Groups
• Article - Build ACE for Microsoft 365 Groups Membership | https://nanddeepnachanblogs.com/posts/2022-01-27-ace-m365-groups-membership/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 7-minute developer-focused demo, Paolo Pialorsi shews viewers how to use Quick View in an ACE to collect data. Using the Adaptive Cards JSON syntax/schema, you can request data, define rules to validate collected data, and define actions to submit data. In the Quick View class, you handle the onAction method with custom actions, i.e., view, edit, save, submit, close. Systematically create complex forms in Quick View with the Adaptive Card syntax. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Tools - Schema Explorer | https://adaptivecards.io/explorer/
• Documentation - Adaptive Cards Template Language | https://docs.microsoft.com/adaptive-cards/templating/language
• Sample - aces-submit-data | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-submit-data
• Sample - aces-actions | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-actions

Learn more
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 10-minute developer focused demo – Patrick Rodgers points out previously delivered demos addresses managing “state” inside an ACE. This demo is about efficiently sharing state/data across multiple ACEs. In a card, state is updated when run a query, display returned data. Instead, store data in local storage (cache), in a shared library that can be included in many cards, web parts, Application Customizers, pages and more. Get data once, deliver faster to cards/pages. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 29, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Documentation - Using library component type in SharePoint Framework | https://docs.microsoft.com/sharepoint/dev/spfx/library-component-overview
• Repo - Sharing State Across ACEs | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-shared-state
• Docs & Videos - Search Results for: library components | https://warner.digital/?s=library+components
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions | https://youtu.be/vcSM5PUgn0I - Paolo Pialorsi (PiaSys) | @PaoloPia
• Demo - Creating engaging and dynamic Viva Connections mobile experiences | https://youtu.be/e3CUtjIwW80 – Patrick Rodgers | @mediocrebowler https://youtu.be/e3CUtjIwW80

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 13-minute developer-focused demo, Paolo Pialorsi steps viewers through the setup and consumption of a 3rd party/custom API (Azure Functions, ASP.NET REST APIs) in an ACE. Start with registering the API in AAD as an AAD app, consenting the AAD app in target tenant, granting permissions to the app via SPO Admin UI to consume the API via SPFx context and AadHttpClient. After setup, see the code for calling and rendering stock values acquired via the third-party API. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 24, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Documentation - Connect to Azure AD-secured APIs in SharePoint Framework solutions | https://docs.microsoft.com/sharepoint/dev/spfx/use-aadhttpclient
• Documentation - AadHttpClient class | https://docs.microsoft.com/javascript/api/sp-http/aadhttpclient?view=sp-typescript-latest
• Sample - Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-3rd-party-api

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 16-minute developer-focused demo, Paolo Pialorsi guides viewers on how to consume Microsoft Graph APIs within ACEs. Use Graph in an ACE to read from and write to calendar. Step through configuring webApiPermissionRequests in package-solution.json file, granting permissions via SPO Admin UI and consuming Microsoft Graph via SPFx context object (MSGraphClient) and binding the data to the UI of CardView(s) and/or QuickView(s). Deploy solution with sppkg package with stated permissions requirements. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Documentation - List events | https://docs.microsoft.com/graph/api/user-list-events
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions – Paolo Pialorsi (PiaSys) | @PaoloPia | https://youtu.be/WkFVkFKPDMc?t=1297

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/vide

In this 16-minute developer focused demo – Microsoft continues to evolve SPFx experiences in Microsoft 365 that span SharePoint, Teams and Viva Connections canvases. The engineering team reviews capabilities delivered in SPFx v1.14 and on new capabilities being built for v1.15 to be released in phases. Two work-in-progress items shared are Command Set API update for ListViewAccessor (update asynchronously for list state changes) and a new action called VivaAction.SelectMedia providing media upload capabilities on an Adaptive Card Extension. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 1, 2022.

Demo Presenters:
• Luca Bandinelli (Microsoft)
• John Nguyen (Microsoft)
• Alex Terentiev (Microsoft) | @alexaterentiev
• Siddharth Gulati (Microsoft) | @sidvaani

Supporting material:
• Documentation - SharePoint Framework v1.14 release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.14

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 12-minute developer focused demo – Patrick Rodgers addresses the question: Do I build a web part or an ACE? Consider Lightweight (mobile first), Immediate (single idea, actionable) and Personal (provide direct value to user). Link out to richer experiences – Teams apps, SharePoint page, SaaS solutions. ACE use cases include – to solicit feedback, track task status, check paystub, clock in/out, to book travel... ACEs can be location based, allow audience targeting, and deliver an organization’s mobile portal experience. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 25, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• PnP JS Library - @pnp/odata/caching | https://pnp.github.io/pnpjs/odata/caching/
• Repo - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Demo - Deep dive on Viva Connections Adaptive Card Extension development – State management – Patrick Rodgers (Microsoft) | @mediocrebowler – 18 January 2022

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 10-minute developer-focused demo, Paolo Pialorsi show viewers 2 simple, quick and powerful examples of how to get and render a list of items from a Microsoft List/SharePoint list either using native SharePoint support in SPFx or using PnPjs into an ACE QuickView card. Uses Type arrays and SP object in PnPjs to get items. Key points to remember – ACEs are built on top of SPFx, also can use PnPjs, and data binding works as usual with Adaptive Card syntax. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 10, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions – Paolo Pialorsi (PiaSys) | @PaoloPia | https://youtu.be/WkFVkFKPDMc?t=1297

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 11-minute developer focused demo – Patrick Rodgers builds on his previous 2 ACE demos by combining the principles of State and Lightweight/Immediate/Personal to make dynamic (live tile-like) experiences in cards. Three ACE's highlight capabilities - text updates, dynamically created SVG images, and rotating content as simple ways to liven up the appearance of your ACE's. Observe code similarities across cards (set a state, use a timer, update state, render result). By design each ACE maintains its own state, autonomous cards. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 8, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Sample - ace-dynamic-card | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-dynamic-card
• Documentation - Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections
• Samples - Viva Connection Adaptive Card Extensions (ACEs) sample repository | https://github.com/pnp/sp-dev-fx-aces

Previous demos from Patrick Rodgers | @mediocrebowler - Adaptive Card Extensions series
• When to build Viva Connections Adaptive Card Extensions – 25th of January | https://youtu.be/F5JcbIlxSpo?t=1562
• Deep dive on Viva Connections Adaptive Card Extension development – State management – 30th of January | https://youtu.be/YG16snk1fJU?t=1718

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 8-minute developer-focused demo, Derek Cash-Peterson shows Creating, Reading, Updating, and Deleting data through an Adaptive Card Extension (ACE) that handles (reformats as necessary) data formatting (strings, arrays, time) from all field types in a SharePoint list. On CardView, there are buttons for “view items” in list and “add item” to list. From a QuickView card, call separate Display, Edit, New cards. Appreciate code for navigating between cards and for data reformatting. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.

Demo Presenter: Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials:
• Sample - basic-card-sharepoint-crud | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-SharePoint-CRUD
• Samples - ace-cardgallery | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ace-cardgallery

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 20-minute developer-focused demo – Paolo Pialorsi cites the fundamentals – data is stored in properties and state, CardView renders a limited set of information, and QuickView renders as much data as you like (many formatting options including conditional and JSON parsing). Step through various samples showing the many functions, keywords, properties in the Adaptive Card syntax used for dynamically formatting and rendering data. Last sample shows rendering user data from Graph into a QuickView card. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Documentation/Tools - A whole new way to deliver UI | https://adaptivecards.io/
• Documentation - Adaptive Cards Template Language | https://docs.microsoft.com/adaptive-cards/templating/language
• Samples - Conferences-Samples | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 12-minute developer-focused demo, Ejaz Hussain’s ACE sample shows all Microsoft Planner tasks (consolidated view) for logged-in user’s associated plans, deep links to specific tasks directly in Planner, and filters tasks based on selected plan. Uses aysnc dropdown property pane field to fetch current user's associated plans and Microsoft Graph to get plans and tasks. Submit action handling in ACE and Quick View, view multiple tasks within a single Adaptive Card. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 30, 2021.

Demo Presenter: Ejaz Hussain (Content and Cloud) | @EjazHussain_

Supporting material:
• Sample - Planner Tasks | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-PlannerTasks

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 12-minute developer focused demo – Patrick Rodgers answers what is State in SPFx ACEs and how to use State in SPFx apps to maximize initial load times, UI performance, and limit network traffic. State is shared across all views in SPFx ACES. Be mindful of tradeoffs between state and storage. Load as little as you need into State at any given time but load enough to optimize network calls. Cache previous states. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 18, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• PnP/PnPjs Library - @pnp/odata/caching | https://pnp.github.io/pnpjs/odata/caching/
• Samples - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Demo - State referenced in Introduction to Adaptive Card Extensions (ACEs) for Microsoft Viva Connections – Paolo Pialorsi (PiaSys) | @PaoloPia

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 13-minute developer focused demo – Vesa Juvonen delivers a quick review of the 3 key experiences in Microsoft Viva Connections, the 3-layer Viva Connections Adaptive Card Extension architecture specifically for mobile, and finally Card design templates created in the last month that you can paste into the Dashboard Card designer or Adaptive Card Designer to create refined mobile experiences in a short time. Step through Viva Connections adaptive cards designs guidance, samples and several modification options. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 4, 2022.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Samples - Adaptive Card templates - design examples | https://github.com/pnp/adaptivecards-templates
• Documentation - Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections
• Tools – Adaptive Cards Designer | https://adaptivecards.io/designer/
• Documentation – Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections
• Documentation - Extend Microsoft Viva Connections | https://docs.microsoft.com/learn/paths/m365-extend-viva-connections/
• Documentation - Designing Viva Connections custom cards for your dashboard | https://docs.microsoft.com/sharepoint/dev/spfx/viva/design/design-intro

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 12-minute developer-focused demo – Paolo Pialorsi delivers an overview on three ACE CardView types - BaseBasicCardView, BasePrimaryTextCardView and BaseImage CardView. All extensions you create in scaffolding tool rely on these 3 card types and rendering is predefined by Microsoft. In this session, look at properties, capabilities, and code for each type. Essentially BaseBasic (one text field, title and icon), BasePrimary (two text fields, title and icon), BaseImage (one text field, title, icon, image and buttons). This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 30, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Blog – Viva blog | aka.ms/viva/blog
• Documentation - Overview of Viva Connections Extensibility | aka.ms/viva/connections/extensibility
• Samples - Viva Connection Adaptive Card Extensions (ACEs) sample repository | aka.ms/spfx-aces

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 14-minute developer focused demo, Paolo Pialorsi and Vesa Juvonen step through a new reference (Order management) solution that shows surfacing relevant partner hosted business data from a secured API hosted through Azure AD and how to consume a multi-tenant API within a set of Microsoft Viva Connections Adaptive Card Extensions (ACEs) developed with SharePoint Framework (SPFx). ACE front-end, Azure functions back-end, and Azure AD secures communications. The API needs to be consented and API permissions approved to be called in the customer’s tenant. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 30, 2021.

Demo Presenters:
• Paolo Pialorsi (PiaSys) | @PaoloPia
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Article - Guidance for implementing partner offerings for Viva Connections with ACEs and custom APIs | https://devblogs.microsoft.com/microsoft365dev/guidance-on-implementing-partner-offerings-for-viva-connections-with-aces-and-custom-apis/
• Sample - Consume a multi-tenant API within a set of Microsoft Viva Connections Adaptive Card Extensions (ACEs) | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 21-minute developer-focused demo – Paolo Pialorsi opens with a high-level overview of Microsoft Viva with full integration with Microsoft Teams for developers. Developers extend Viva Connections with SPFx, exclusively. Step-by-step showing how to create your very first configurable (Property Pane) ACE with SPFx on SharePoint Workbench. Scaffold an SPFx project, register views and step through the files to understand what exactly was created. Subsequent demos will go deep in areas. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 16, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials:
• Blog - Microsoft Viva: Empowering every employee for the new digital age | http://aka.ms/viva/blog
• Documentation - Overview of Viva Connections Extensibility | https://aka.ms/viva/connections/extensibility
• Sample Repo - Viva Connection Adaptive Card Extensions (ACEs) sample repository | https://aka.ms/spfx-aces

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 28-minute developer focused demo, Waldek Mastykarz and Vesa Juvonen open with an objective: Build a SPFx 1.13 web part to surface important announcements (from a list) on Viva connections Desktop. Test web part in localhost, bundle and deploy. Developers own the web part’s UI – the HTML and CSS, leaving content owners to add and configure web parts on a page. This demo focuses on Web Parts. Related demos focus on Adaptive Card Extensions and Application Customizers. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 16, 2021.

Demo Presenters:
• Waldek Mastykarz (Microsoft) | @waldekm
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Learn – Extend Microsoft Viva Connections | https://docs.microsoft.com/learn/paths/m365-extend-viva-connections/
• Documentation - Plan, build, and launch a home site for your organization | https://docs.microsoft.com/sharepoint/home-site-plan
• Documentation - Support for Adaptive Cards | https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#support-for-adaptive-cards
• Exercise - Extend Viva Connections desktop with web parts | https://docs.microsoft.com/learn/modules/viva-connections-extend-with-web-parts/4-exercise-extend-viva-connections-desktop-with-web-parts

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

During this 13-minute Developer and Citizen Developer-focused demo, Microsoft presenters deliver an overview of Viva Connections Dashboard, elements of Dashboard, card layouts, information flow, rendering differences between web and mobile. Learn about Viva Connections’ 3 pillars – Dashboard, Applications and Feeds. Deep dive into Authoring a Quick View card in both Dashboard and in Adaptive Cards Designer – note (consistency) the same JSON, renders similar card, due to same Fluent UI/React behind scenes. Step through 6 different Quick View card layouts. This demo is taken from the Adaptive Cards community call – November 2021, recorded on November 11, 2021.

Demo Presenters:
• Emily Lynam (Microsoft)
• Max Kulakov (Microsoft)
• Siddharth Gulati (Microsoft)

Supporting materials:
• Blog - Announcing Adaptive Cards 1.5 | https://adaptivecards.io/blog/
• Blog - Guidance on implementing partner offerings for Viva Connections with ACEs and custom APIs | https://devblogs.microsoft.com/microsoft365dev/guidance-on-implementing-partner-offerings-for-viva-connections-with-aces-and-custom-apis/
• Blog - Viva Connections mobile and new partner integrations are now generally available | https://techcommunity.microsoft.com/t5/microsoft-viva-blog/viva-connections-mobile-and-new-partner-integrations-are-now/ba-p/2932217

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 34-minute developer focused demo, there is a presumption you have already installed the Viva Connections toolkit. Waldek Mastykarz and Vesa Juvonen step through creating an application customizer from scratch, edit the application customizer code, test the application customizer on a page, and deploy it to a Viva Connections site. Unlike web parts that can be positioned and configured by users, Application Customizers are created and positioned by developers, configured by Site Admins and work only with Viva Connections desktop experience. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 23, 2021.

Demo Presenters:
• Waldek Mastykarz (Microsoft) | @waldekm
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Learn module - Extend Microsoft Viva Connections with application customizers | https://docs.microsoft.com/learn/modules/viva-connections-extend-with-app-customizers/
• Tools - Viva Connections Toolkit (SPFx 1.13) | npm install -g @microsoft/generator-sharepoint
• Templates – SharePoint look book | https://lookbook.microsoft.com/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 19-minute developer-focused demo. The art-of-the-possible is revealed by Derek Cash-Peterson! Layout options on 11 Adaptive Card Extensions (ACE). Layouts - agenda, company news, expense report, flight itinerary, form sample, image rotator, stock ticker, task list, Twitter card, video card and weather. Focusing specifically on video card, it was initially created/tested in Adaptive Cards Designer. Then the JSON was copied into the ACE. Handling dynamic data is discussed in Q&A. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 18, 2021.

Demo Presenter: Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials:
• Repo - ace-cardgallery | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ace-cardgallery
• Adaptive Cards - Samples and Templates | https://adaptivecards.io/samples/
• Adaptive Cards – Designer | https://adaptivecards.io/designer/
• Video Demo - Building a COVID attestation solution for Microsoft Teams and Viva Connections with SPFx | https://www.youtube.com/watch?v=SAITSnFiAg8
• Sample - Covid Self-Attestation Microsoft Teams Personal App | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-teams-covid

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this video, you can see how to build Adaptive Card Extensions (ACEs) for Microsoft Viva Connections consuming Azure AD secured multi-tenant APIs.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Scenario ACEs Implementation Details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/ACEs-Implementation-Details.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this video, you can see how to develop Azure AD secured multi-tenant APIs that you can consume from Adaptive Card Extensions (ACEs) for Microsoft Viva Connections.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Scenario API implementation details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/APIs-Implementation-Details.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this video, you can see an introduction about building Adaptive Card Extensions (ACEs) for Microsoft Viva Connections using Microsoft SharePoint Framework (SPFx). This is the first video of a series of 4 episodes about consuming Azure AD secured multi-tenant APIs from ACEs.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this video, you can see how to register Azure AD secured multi-tenant APIs that you can consume from Adaptive Card Extensions (ACEs) for Microsoft Viva Connections. Specifically, you can learn how to expose an API from an Azure AD registered app, how to host the API on Azure as a Function App, and how to configure SharePoint Framework (SPFx) to consume it.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Scenario ACEs Implementation Details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/ACEs-Implementation-Details.md
- Scenario APIs Implementation Details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/APIs-Implementation-Details.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

During this 30-minute developer focused demo, Waldek Mastykarz and Vesa Juvonen show start-to-end how to configure Viva Connections to communicate important announcements to employees. Designate a home site and create an announcements list on SharePoint. Then create/scaffold a project, configure in VS Code how important announcements are surfaced, test card functionality in localhost, package and install card in App Catalog, deploy card to tenant and to site, and add card to dashboard. Develop one card used in both desktop and mobile. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 9, 2021.

Demo Presenters:
• Waldek Mastykarz (Microsoft) | @waldekm
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Learn - Extend Microsoft Viva Connections | https://docs.microsoft.com/learn/paths/m365-extend-viva-connections/
• Documentation - Plan, build, and launch a home site for your organization | https://docs.microsoft.com/sharepoint/home-site-plan

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 13-minute developer-focused demo, Anoop Tatti shows how he built an Adaptive Card Extension (ACE) to keep Tenant Admins up to date on tenant service health via mobile and desktop devices. The extension uses card view and multiple quick views to display affected issues and services in a tenant. Microsoft Graph is used to get service health data (issues). Submit action handling in ACE and Quick View, theme-based display. Complete and neatly delivered code walkthrough. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 4, 2021.

Demo Presenter: Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials:
• Sample - Service health | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Service-Health
• Video - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY
• Ignite Session – Get started with Microsoft Viva Connections Extensibility – Vesa Juvonen & Waldek Mastykarz | https://aka.ms/CONLL112

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 15-minute developer-focused demo, Anoop Tatti deliveres a sample web part and a sample ACE, that display the first few sentences of a news article in a carousel on a SharePoint page (desktop or mobile) or in cards in a Viva Connections Dashboard (Card view with deep link to full article). Control number sentences displayed - actual or curator authored sentences. Clean code to get articles, to extract sentences, to render. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 21, 2021.

Demo Presenter: Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials:
• Webpart sample - react-at-a-glance | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-at-a-glance
• Sample - News article content at a glance | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-At-a-glance
• Video - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

During this 25-minute developer focused demo, Tejas Mehta appealingly compels usage of Viva Connections in this presentation. Getting started – follow the Connections Setup Checklist – you need a SPO intranet, a home site, global navigation, a dashboard and Teams Admin setup. Demo steps through setting up a homesite, global nav, dashboard creation and enabling Viva Connections in Teams Admin Center so intended (by policy) users can use the app Inside Teams. Q&A – tenant rollout, why homesite requirement. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 5, 2021.

Demo Presenter: Tejas Mehta (Microsoft) | @tpmehta

Supporting materials:
• Documentation - Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 20-minute developer-focused demo, Ed Averett gives viewers a tour of Microsoft Viva - an Employee Experience Platform (EXP). Latest Viva Connection basics (more than you have seen previously), learn about integrated experiences, view the dashboard, default support for Teams Personal Apps & Bots, custom card capabilities and supports (extensibility). Opportunities for Information worker and front-line worker organizations. Step through Dashboard page configuration (no code) and card creation in Card Designer. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 28, 2021.

Demo Presenter: Ed Averett (Microsoft) | @Ed_Averett

Supporting materials:
• Documentation - Overview: Viva Connections (Preview) | http://aka.ms/viva/connections/gettingstarted
• Blog - Announcing public preview of SharePoint Framework 1.13 – with Viva Connections Extensibility | https://aka.ms/viva/connections/developer/preview
• Documentation - Overview of the SharePoint Framework | http://aka.ms/spfx
• Documentation - Overview of Viva Connections Extensibility | http://aka.ms/viva/connections/extensibility
• Documentation - Authenticate users in Microsoft Teams | https://aka.ms/viva/connections/teams/SSO
• Documentation - Create deep links | https://aka.ms/viva/connections/teams/deeplinks

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 37-minute developer-focused demo, Patrick Rodgers delivers a quick overview on how to think about ACEs (Adaptive Card Extensions) – container control and views (Card and Quick). He then steps through three scenarios (samples) UI and code. 1) Adding a deep link to card or quick view with basic properties, 2) Company news card - get information and display it in carousel, and 3) Microsoft Teams chat – notifications with multiple card views and quick views. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 26, 2021.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Resource site – Adaptive Cards | https://adaptivecards.io/
• Mozilla MDN Web Docs - Destructuring assignment | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
• TypeScript site - Object destructuring | https://www.typescriptlang.org/docs/handbook/variable-declarations.html#object-destructuring
• Sample - basic-card-deep-link | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-basiccard
• Sample - Company News ACE | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-companynews
• Sample - teams-chat-card | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-chat

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

For this 15-minute developer-focused demo, Julie Turner and Derek Cash-Peterson walk through an app for booking limited rooms by authorized users. See app in Teams and then view the ACE (Adaptive Card Extension) cards with deep links to other Teams apps, in the Viva Connections Dashboard. ACE cards can be targeted to specific users. Look at code for CardView, QuickVew, Card State, button actions and at how data is accessed and merged with template. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 12, 2021.

Demo Presenters:
• Julie Turner (Sympraxis Consulting) | @jfj1997
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting content:
• Samples - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Get Started – Adaptive Cards | https://adaptivecards.io

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this 8-minute business user focused demo, Emily Mancini delivers an overview of a COVID-19 Attestation solution that can help your organization manage the status and contact tracing of your employees through an easy to use Check-In form and front desk dashboard. The video starts with an overview of the challenges this solution addresses and then gives a step by step review of all the features.

Demo Presenter: Emily Mancini (Sympraxis Consulting) | @EEMancini

Supporting documents:
• Solution - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Stay connected:
• Twitter - https://twitter.com/microsoft365dev
• YouTube - https://aka.ms/M365DevYouTube
• Microsoft 365 Developer Blog - https://aka.ms/M365DevBlog
• Microsoft 365 PnP Blog - https://aka.ms/m365pnp/community/blog

In this 10-minute business user focused demo, Emily Mancini delivers an overview of a World Clock solution that can help you and your teams manage scheduling meetings across time zones. The video starts with an overview of the challenges this solution addresses and then gives a step-by-step review of all the features.

Demo Presenter: Emily Mancini (Sympraxis Consulting) | @EEMancini

Supporting documents:
• Solution - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Stay connected:
• Twitter - https://twitter.com/microsoft365dev
• YouTube - https://aka.ms/M365DevYouTube
• Microsoft 365 Developer Blog - https://aka.ms/M365DevBlog
• Microsoft 365 PnP Blog - https://aka.ms/m365pnp/community/blog

Through this 26-minute developer-focused demo, Julie Turner and Derek Cash-Peterson walks viewers through a personal app that collects information from users and provides a custom dashboard for working with the results. Dashboard has a Viva Connection COVID-19 attestation card built with Adaptive Card Extensions (ACE) and SPFx v1.13. From Card View, users answer attestation questions in Quick View. A cool capability - questions on Quick View card can be updated by Admin without having to modify Quick View template! This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 15, 2021.

Demo Presenters:
• Julie Turner (Sympraxis Consulting) | @jfj1997
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting content:
• Sample - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this 22-minute developer-focused demo, Luca Bandinelli and John Nguyen introduce viewers to desktop and mobile instances of Viva Connections Dashboard. To create Dashboards, open your Communications site, add a Dashboard web part – a.k.a. Dashboard or Dashboard Authoring Tool, then add cards (apps, links and Card Designer) to Dashboard. Configure each card in property pane. The Card Designer card – allows end-users to create no code custom cards leveraging Adaptive Cards Designer in backend. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 3, 2021.

Notice that the features shown in this video will be released in summer 2021. At the time of the video recording, they were only available for preview program attendees.

Demo Presenters:
• Luca Bandinelli (Microsoft) | @BandinelliLuca
• John Nguyen (Microsoft)

Supporting materials:
• Viva Connections https://aka.ms/VivaConnections
• Register - Register for Viva Connections developer platform updates and private Beta | http://aka.ms/viva/connections/preview/register
• Designer – Adaptive Cards | https://adaptivecards.io/designer/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

During this 16-minute developer-focused demo, Luca Bandinelli and John explain how SPFx powered cards connect users to resources. Native 1st party cards – include Teams apps, SharePoint Pages, Tasks, Shift, Card Designer, Web Links, etc. and 3rd party custom cards - Adaptive Card Extensions (ACEs) – built using a new SPFx component type. Then deep dive into card templates and code. Developers can build cards from scratch or start with existing personal apps or bots, SPFx solutions and web parts. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 3, 2021.

Notice that the features shown in this video will be released in summer 2021. At the time of the video recording, they were only available for preview program attendees.

Demo Presenters:
• Luca Bandinelli (Microsoft) | @BandinelliLuca
• John Nguyen (Microsoft)

Supporting materials:
• Viva Connections https://aka.ms/VivaConnections
• Register - Register for Viva Connections developer platform updates and private Beta | http://aka.ms/viva/connections/preview/register
• Designer – Adaptive Cards | https://adaptivecards.io/designer/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

Microsoft Viva Connections provides a curated, company branded experience in the context of the apps used every day, like Microsoft Teams. Adam Harmetz, lead engineer, joins host Jeremy Chapman to walk through the user experience, how to set it up, and options for personalizing information sharing by role.

If you're new to Microsoft Viva, it comprises four modules that deliver new employee experiences across knowledge, communications, resources, learning and insights. These leverage the foundational technologies of Microsoft 365, Microsoft Graph, and AI to deliver a modern employee experience platform.

Viva Connections is specifically about boosting employee engagement. This spans everyone in your organization, from everyday users, specific groups in departments, to frontline workers. It expands on your SharePoint home site and newsfeed and is designed to offer a destination that delivers personalized news, conversations, and commonly used resources.

► QUICK LINKS:

00:00 - Introduction
01:45 - Desktop UX
02:24 - Web UX
03:32 - How to set it up through PowerShell
05:54 - Mobile UX
07:26 - How to build adaptive cards
09:40 - Audience targeting
10:34 - How to get started
11:15 - Wrap up

► Link References:

To get started and find PowerShell scripts, go to https://aka.ms/VivaConnectionsPSBlog

Watch our Essentials episode at https://aka.ms/VivaEssentials

Set up Global Nav in your SharePoint Homesite at https://aka.ms/SetupGlobalNav

Watch the rest of our series on Microsoft Viva at https://aka.ms/VivaMechanics

► Unfamiliar with Microsoft Mechanics?
We are Microsoft’s official video series for IT. You can watch and share valuable content and demos of current and upcoming tech from the people who build it at #Microsoft.
Subscribe to our YouTube: https://www.youtube.com/c/MicrosoftMechanicsSeries?sub_confirmation=1
Join us on the Microsoft Tech Community: https://techcommunity.microsoft.com/t5/microsoft-mechanics-blog/bg-p/MicrosoftMechanicsBlog
Watch or listen via podcast here: https://microsoftmechanics.libsyn.com/website

► Keep getting this insider knowledge, join us on social:
Follow us on Twitter: https://twitter.com/MSFTMechanics
Follow us on LinkedIn: https://www.linkedin.com/company/microsoft-mechanics/
Follow us on Facebook: https://facebook.com/microsoftmechanics/

Tour Microsoft Viva, the new employee experience platform that connects learning, insights, resources, and communication. Viva is a unique set of curated and AI enriched experiences built on top of and integrated with the foundational services of Microsoft 365. Join Jeremy Chapman as he shares Viva’s capabilities, the underlying tech, and your core options for enabling and configuring Microsoft Viva as a team leader or admin.

Microsoft Viva’s 4 core modules:
Viva Topics - builds a knowledge system for your organization
Viva Connections - boosts employee engagement
Viva Learning - creates a central hub to discover learning content and build new skills
Viva Insights - recommends actions to help improve productivity and wellbeing

As an employee:
Get more time to focus and recharge – no matter where you’re working from.
Connect with others, stay informed and engage
Accelerate learning new skills, and balance your time at work.

At an organizational level:
Boost morale and retention and the overall success of your organization.
Foster a new culture of support for employees, so even when not physically together with colleagues, they feel connected to collective goals.
Employees can easily leverage the knowledge and connections of their work community to get things done and feel invested in their career growth.

► QUICK LINKS:
00:00 - Introduction
01:13 - Viva Topics
01:54 - Viva Connections
02:21 - Viva Learning
02:56 - Viva Insights
03:38 - Implementing Viva
04:18 - Upcoming highlights
05:49 - Privacy and security
06:50 - Platform extensibility
08:21 - Wrap Up

► Link References:
For deep dives on all the Viva modules, go to https://aka.ms/VivaMechanics

Learn more at https://aka.ms/Viva
► Unfamiliar with Microsoft Mechanics?
We are Microsoft’s official video series for IT. You can watch and share valuable content and demos of current and upcoming tech from the people who build it at #Microsoft.
Subscribe to our YouTube: https://www.youtube.com/c/MicrosoftMechanicsSeries?sub_confirmation=1
Join us on the Microsoft Tech Community: https://techcommunity.microsoft.com/t5/microsoft-mechanics-blog/bg-p/MicrosoftMechanicsBlog
Watch or listen via podcast here: https://microsoftmechanics.libsyn.com/website

► Keep getting this insider knowledge, join us on social:
Follow us on Twitter: https://twitter.com/MSFTMechanics
Follow us on LinkedIn: https://www.linkedin.com/company/microsoft-mechanics/
Follow us on Facebook: https://facebook.com/microsoftmechanics/

In this 36-minute all audiences-focused demo, Microsoft program managers Tejas Mehta and Prateek Dudeja demystify this employee centric app in Teams that delivers one stop access to internet resources, global search, contextual actions, and company branded experience. A SharePoint home site powered by Microsoft Teams, backed by Microsoft security, privacy and compliance. No additional licensing, just switch it on. Use SPFx to extend desktop today, mobile devices later this summer. Create Viva Connections app package in PowerShell, upload to Teams Admin Center, manage user access, pin app for users. This PnP Community demo is taken from the SharePoint monthly community call recorded on April 13, 2021.

Demo Presenters:
• Tejas Mehta (Microsoft) @tpmehta
• Prateek Dudeja (Microsoft) @PrateekDudeja4

Supporting documents:
• Documentation - Add Viva Connections for Microsoft Teams desktop | https://docs.microsoft.com/en-us/SharePoint/viva-connections
• Overview - Microsoft Viva | https://aka.ms/Viva
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this 18-minute Developer-focused demo, Vesa Juvonen positions Microsoft Viva as a suite of products. One product - Viva Connections is an integrated experience with Microsoft Teams and SharePoint backed by Microsoft security, privacy, and compliance.  Viva Connections is extensible – create/use existing extensions and web parts using SPFx. Customers/Partners determine what capabilities specifically to make available in their Viva Connections implementation (UX). The Worldwide roll out of Viva Connections capabilities will occur over months - a journey. This demo is taken from the SharePoint Framework community call recorded on April 8, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Website - Microsoft Viva Connections | https://aka.ms/VivaConnections
• Blog Post - Install Viva Connections today | https://techcommunity.microsoft.com/t5/microsoft-viva-blog/install-viva-connections-today/ba-p/2245410
• Look book - SharePoint look book | https://lookbook.microsoft.com/
• Documentation - Embedding modern SharePoint pages in Microsoft Teams as personal apps (preview) | https://docs.microsoft.com/en-us/sharepoint/dev/features/embed-pages-to-teams

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this 46-minute all audiences-focused demo, Naomi Moneypenny steps through the latest system and tools to help customers manage knowledge within their organizations through a conscious AI assisted strategy of connecting people and actionable knowledge. Content is ultimately rendered through the Topic web part. Topics along with aligned content and SMEs are initially discovered through AI algorithms, then confirmed and curated by humans. Topics draws on numerous product and services capabilities from across Microsoft and can be extended by you. This PnP Community demo is taken from the SharePoint monthly community call recorded on March 9, 2021.

Demo Presenter: Naomi Moneypenny (Microsoft) | @nmoneypenny

Supporting documents:
• Documentation - Set up Microsoft Viva Topics | https://docs.microsoft.com/en-us/microsoft-365/knowledge/set-up-topic-experiences
• Overview - Microsoft Viva | https://aka.ms/Viva
• Microsoft Viva Topics | https://aka.ms/Viva/Topics
• SharePoint Syntex | https://aka.ms/SharePointSyntex
• Content Services Partner Program | https://aka.ms/ContentServicesProgram
• Microsoft Knowledge & Content Services Resource Center | https://aka.ms/KCS
• Documentation - Microsoft Search Graph Content Connectors | https://aka.ms/Iwantconnectors

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

In this 12-minute developer-focused demo – Paolo Pialorsi demystifies working with State and Properties in ACEs that includes managing interfaces for Properties (Property pane or code) and State (code) used by CardView and QuickViews. The basic property pane is generated by the SPFx scaffolding tool. Learn about building functions into ACE component and exposing the functions to your ACEs cards. See how State is updated only for the active component, if 2 components displayed. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 13, 2021.

Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

This engineering demo is taken from the monthly SharePoint Community (PnP) call recorded on March 10, 2020.

In this 40-minute update with demos, Tejas Mehta and Prateek Dudeja - SharePoint Program Managers at Microsoft, deliver a 2-part session on SharePoint and Microsoft Teams – better together updates.

• Part 1: Getting the most out of current Teams integrations - Groupify & Teamify, Lists & Libraries, and Pages and News. Teamify = add a Team to a Group and Groupify = add a group to a Team site.
• Part 2: A glimpse into what's coming - Teamify v2, New pages tab, and richer SharePoint resources in chat – Adaptive Cards.
• Q&A

Presenters:
• Tejas Mehta (Microsoft) | @tpmehta
• Prateek Dudeja (Microsoft)

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.