Copilot Studio: Adaptive Cards with No Code Solutions

Key insights

• Adaptive Cards are lightweight UI components written in JSON, allowing seamless integration into various platforms like Microsoft Teams and Outlook.


• The primary advantages of Adaptive Cards include their Platform Agnosticism, enabling use across multiple platforms, and their ability to create an Interactive UI with elements like buttons and input fields.


• Dynamic Content: They support dynamic content through variables, offering personalized interactions for users.


• The creation process involves using the Adaptive Cards Designer or directly writing JSON code. Integration with Copilot Studio requires adding a card node with at least one submit button for interaction.


• The "NO CODE solution" aims to make Adaptive Cards accessible without extensive coding knowledge by using tools like the Adaptive Cards Designer for visual card creation.


• A sample lead collection form demonstrates how inputs such as name, email, phone number, and product interest can be collected using Adaptive Cards in applications.

Introduction to Adaptive Cards in Copilot Studio

Adaptive Cards are a powerful tool in Microsoft Copilot Studio, designed to enhance the user interface of chatbot interactions with rich, interactive content. This technology enables the creation of platform-agnostic UI snippets that can be easily exchanged between different cloud apps and services. In this article, we will explore what Adaptive Cards are, their advantages, the basics of using them, and what's new about this approach.

What is This Technology About?

Adaptive Cards are lightweight UI components written in JSON, which can be transformed into native UI elements by the host application. This adaptability allows them to seamlessly integrate into various platforms and frameworks, such as Teams and Outlook, regardless of whether the user is in dark or light mode. In Copilot Studio, Adaptive Cards are used to validate customer information, ask questions, or simply enhance the conversation experience.

Advantages of Using This Technology

• Platform Agnosticism: Adaptive Cards can be used across multiple platforms without needing significant modifications, making them highly versatile.
• Interactive UI: They allow for interactive elements like buttons and input fields, which can significantly enhance user engagement.
• Dynamic Content: Adaptive Cards can include dynamic content using variables, making them suitable for personalized interactions.
• Easy Integration: They can be easily integrated into Copilot conversation nodes, streamlining the development process.

Basics of the Technology

To create Adaptive Cards, developers can use the Adaptive Cards Designer or write JSON code directly. Here are the basic steps:

• Designing Cards: Use the Designer to visually create cards or write JSON code for more control.
• Integration with Copilot Studio: Add an Adaptive Card node in Copilot Studio and enter the JSON code for the card. The node must include at least one submit button for interactive functionality.
• Dynamic Variables: Use Power Fx formulas to include dynamic information on the card, allowing for personalized interactions.

What is New About This Approach?

The "NO CODE solution for Making Adaptive Cards for Copilot Studio" refers to the ability to create and integrate Adaptive Cards without extensive coding knowledge. This approach is facilitated by tools like the Adaptive Cards Designer, which allows users to visually design cards without writing JSON code. Additionally, tutorials and guides are available to help developers set up Adaptive Cards in Copilot Studio, making it more accessible for non-technical users. While there isn't a specific "NO CODE" solution explicitly mentioned in recent updates, the emphasis on visual design tools and comprehensive tutorials indicates a push towards making Adaptive Cards more accessible to a broader range of developers, including those without extensive coding experience. This approach aligns with Microsoft's broader strategy of empowering Citizen Developer and enhancing user experience through interactive and dynamic UI elements. For the latest information on creating Adaptive Cards without code, users can explore the Adaptive Cards Designer and tutorials available online, which provide step-by-step guidance on designing and integrating Adaptive Cards into Copilot Studio.

Case Study: Lead Collection Sample

The lead collection sample is an Adaptive Card input form designed for collecting leads from anyone that may come into contact with individuals interested in a set of products. Feel free to change the choices for the products, remembering that each choice can have display text, as well as an internal value which will be output after someone submits the card. Inputs/Outputs and Notes:

• Dynamic Token Name: Placeholder Text, Notes
• Title: Display text
• acInstructions: Display text
• acLeadFName: {firstName}, Response output
• acLeadLName: {lastName}, Response output
• acLeadEmail: {emailAddress}, Response output
• acLeadPrimaryPhone: {primaryPhone10digits}, Response output
• acLeadProductInterest: {productInterests}, Response output as multi-select values, where each selection will be separated by a comma.

This example demonstrates how Adaptive Cards can be used to collect structured data efficiently. By using placeholders and dynamic content, the cards can adapt to the user's input, providing a personalized experience.

Conclusion

Adaptive Cards offer a versatile and interactive way to enhance user experiences within Microsoft Copilot Studio. With the introduction of no-code solutions, even those without extensive technical knowledge can create and integrate these cards into their applications. As technology continues to evolve, Adaptive Cards will likely become an essential tool for developers looking to create dynamic and engaging user interfaces.

Keywords

No Code, Adaptive Cards, Copilot Studio, Microsoft 365, Automation Tools, Low-Code Solutions, Business Productivity, Workflow Integration