📣 Community Call - March, 2022

Adaptive Cards Host Control in Microsoft PnP Library

Profile image of J.P. Roca

J.P. Roca

· 4 min read

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


  • 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 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:

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:

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.

Profile image of J.P. Roca

Program Manager at Microsoft working on Adaptive Cards!