Power Automate: Build Responsive Adaptive Cards Easily

Key insights

• Adaptive Cards are interactive UI snippets used in Power Automate and Copilot Studio, designed to collect user input and display information within automation workflows. They use a JSON schema to define elements like text, inputs, choice sets, and buttons.

• Responsive layouts allow Adaptive Cards to adjust their appearance based on screen size. The main layout types include Very Narrow, Narrow, Standard, and Wide. Choosing the right layout depends on your project needs and target devices.

• Power Fx integration enables dynamic content binding within Adaptive Cards. You can use variables from flows or agents to populate card fields at runtime, making cards more flexible and personalized for users.

• A submit button is required on cards that collect user input. When clicked, it sends output variables back to the system for further processing in the flow or by an AI agent.

• Recent updates (2025) include enhanced responsive design features, a built-in drag-and-drop card designer in Copilot Studio, improved variable management, and deeper Power Automate integration. These changes make creating adaptive cards easier and more powerful.

• When designing Adaptive Cards, pay attention to building clear JSON schemas and testing across all layout types. Using the designer tool helps visualize how cards will appear on different devices before deployment.

Introduction: Exploring Responsive Adaptive Cards in Power Automate and Copilot Studio

In a recent YouTube video published by Andrew Hess - MySPQuestions, viewers are guided through the nuances of designing responsive Adaptive Cards specifically for use in Microsoft Power Automate and Copilot Studio. The video targets those who aim to create visually appealing and functional cards that adapt fluidly across devices and interfaces. With adaptive layouts becoming increasingly vital, Andrew’s walkthrough offers clarity on which layouts merit the most development attention and how to balance aesthetics with project requirements.

Throughout the video, Andrew addresses a common pain point: understanding when to use each layout type—Very Narrow, Narrow, Standard, and Wide—and how these choices impact the user experience across various platforms. By clarifying these differences, the video aims to save developers time and help them focus on what matters most for their specific use cases.

Understanding Adaptive Card Technology

Adaptive Cards are a technology designed to facilitate the exchange of rich, interactive content across multiple platforms. Within Power Automate and Copilot Studio, they serve as a medium to present questions or information to users, capturing their responses effectively within automation workflows or AI-driven agents.

These cards are structured using JSON schemas, allowing developers to include elements such as text blocks, input fields, choice sets, and submit buttons. This approach not only streamlines data collection but also ensures that user interactions remain intuitive and visually consistent, regardless of where the card is displayed. As a result, Adaptive Cards enhance the overall automation process by bridging the gap between user input and backend systems.

Designing and Implementing Adaptive Cards

The video demonstrates how to add Adaptive Card nodes within Copilot Studio, enabling users to construct cards by dragging and dropping elements or editing the JSON directly. A key feature is the support for Power Fx formulas, which introduce dynamic content binding. This capability allows variables from agents or flows to populate card elements at runtime, making each interaction contextually relevant.

For cards intended to capture user input, it is essential to include at least one submit button. This button triggers the transmission of user responses as output variables, which can then be processed by the underlying agent or flow. Moreover, the integration with Power Automate enables these inputs to drive further actions, such as sending emails or initiating workflows, thereby extending the card's functionality.

Key Advantages and Recent Enhancements

Adaptive Cards offer several advantages, including interactive and dynamic communication, seamless cross-platform compatibility, and low-code customization. The ability to design cards that adjust responsively to different screen sizes is particularly valuable, ensuring a consistent experience on both desktop and mobile devices.

Recent updates in 2025 have introduced enhanced responsive design capabilities, allowing cards to better adapt to varying device sizes and user contexts. Additionally, the Copilot Studio now features a built-in designer panel, simplifying the creation and editing process for both novice and experienced developers. The integration of Power Fx expressions further empowers developers to embed dynamic logic and real-time data binding within cards, elevating the sophistication of user interactions.

Challenges, Tradeoffs, and Best Practices

Despite the robust feature set, designing Adaptive Cards comes with its own set of challenges. Constructing complex JSON payloads requires precision, as even minor errors can disrupt the card’s functionality. Moreover, balancing the need for visual appeal with performance and accessibility considerations can be tricky, especially when targeting diverse platforms.

To address these challenges, Andrew recommends thorough testing across all supported layouts—Very Narrow, Narrow, Standard, and Wide—ensuring that each card maintains its integrity and usability. Leveraging the built-in designer and preview tools can also help streamline the development workflow and reduce the risk of errors.

Conclusion: Looking Ahead

Andrew Hess’s video provides a comprehensive guide for anyone looking to master responsive Adaptive Card layouts in Power Automate and Copilot Studio. By highlighting recent enhancements, common pitfalls, and best practices, the video serves as a valuable resource for developers aiming to deliver compelling and adaptable user experiences. As Microsoft continues to evolve its low-code platforms, mastering Adaptive Cards will remain essential for building modern, interactive automation solutions.

Keywords

Responsive Adaptive Cards Power Automate Copilot Studio Adaptive Card Design Power Automate Tips Adaptive Cards Best Practices Copilot Studio Integration