The following topics are covered in this month’s community call. Demo: Adaptive Cards Host Control in Microsoft PnP Library (use an Adaptive Card in an SPFx solution that allows UI changes at runtime) – Fabio Franzini (Apvee Solutions), Designer Device Emulator (quick way to see Adaptive Card layout at various selected screen resolutions) – Will Shown (Microsoft), and 15 minute live Q&A – host and demo presenters answer questions about their demos and on building Teams apps with React; which React library to use - React Northstar, React Teams or Fluent UI? This call was hosted by J.P. Roca (Microsoft) | @jpthepm. Recorded on March 10, 2022.
Watch the call here
Agenda:
- Adaptive Cards Host Control in Microsoft PnP Library – Fabio Franzini (Apvee Solutions) | @franzinifabio – 00:38
- Designer Device Emulator – Will Shown (Microsoft) – 20:20
- Q&A – J.P. Roca (Microsoft) | @jpthepm & demo presenters – 23:49
Demo:
Demo 1: Adaptive Cards Host Control in Microsoft PnP Library – customers want same functionality, different UI. Needed a way to change UI at runtime (no recompiling required). This SPFx solution contains a web part that hosts an AdaptiveCardhost control. Same web part can be used in a SharePoint page, Teams tab and Teams personal app. Hear the rationale behind this React control, why use the Adaptive Cards SDK, Fluent UI, and how control is implemented.
Demo 2: Designer Device Emulator - created by the Teams Platform group, this emulator shows Adaptive Card layouts for selected screen widths/resolutions. Desktop (unconstrained), small mobile (320px), large mobile (414px), small tablet (768px), large tablet (1024px). If you host your own Designer, then you can add additional resolution options. Great for mobile projects. Emulator will show up on AdaptiveCards.io shortly.
Referenced in this call:
- D1: SPFx Controls - Adaptive Card Host
- D1: SPFx Samples - SharePoint Framework Client-Side Web Part Samples (Demo will be posted here when complete)
- D2: Nightly build for Adaptive Cards Designer with Device Emulator
- Power Automate for Desktop Announcement - https://powerautomate.microsoft.com/en-us/blog/power-automate-for-desktop-february-2022-update/
- The latest Fluent React v9 here - fluentui/packages/react-components at master · microsoft/fluentui (github.com)
Next month’s call will be held on Thursday, April 14, 2022 at 9:00am PST. We look forward to talking to you then! Download a recurring calendar invite here at https://aka.ms/adaptivecardscommunitycall.
Check out the previous month’s call recording on our Office Development YouTube Channel
Resources in General:
- Let us know the features you need https://aka.ms/ACRoadmap
- Schema Explorer - https://adaptivecards.io/explorer/Action.Execute.html
- Designer - https://adaptivecards.io/designer/
- Get started with Templating - https://aka.ms/ACTemplating
- Browse the Adaptive Cards Code - https://aka.ms/ACRepo
- Find tools, sample cards and more - https://www.madewithcards.io
- Contribution Guidelines – https://aka.ms/ACRepo
Adaptive Cards feedback channels
The Adaptive Cards developer community call is on the 2nd Thursday of each month. We will provide you with the opportunity to learn about Adaptive Cards in general, how they could be a great tool in your applications and contribute to the evolution of the format and SDKs. Each month, we’ll discuss new features we are bringing to the platform, our roadmap, and listen to your feedback and suggestions.
