Adaptive Cards community call – March 2022

Adaptive Cards community call – March 2022

Call summary

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.

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

Resources in General

Stay connected