Card View App: Create Adaptive Cards with Copilot (AI)
The latest release of the Card View App adds a powerful new feature for presenting SharePoint list data: Adaptive Cards can now be designed directly inside the web part with support from Microsoft Copilot. An integrated chat allows users to describe the required layout in natural language and refine it step by step, significantly reducing the need to work manually with Adaptive Card JSON.
 |
| Card View App in SharePoint edit mode with an integrated Copilot chat and an automatically generated adaptive contact card |
From SharePoint list data to individual data cards
The Card View App is designed to display SharePoint list data in modern, easy-to-read card layouts instead of relying exclusively on traditional table views. After adding the web part to a SharePoint page, users first select the required data source. They can then choose the SharePoint list and define how many list items should be displayed.
Several presentation options are available, with Adaptive Cards providing the highest level of flexibility. They make it possible to organize list data in custom sections, columns and information groups. Profile pictures, contact details, status information, addresses and custom fields can therefore be presented in a much more attractive and user-friendly format than in a standard list view.
The key highlight: Designing Adaptive Cards with Copilot
The most important enhancement in this release is the direct Copilot integration within the app configuration interface. A chat is now available above the card preview, allowing users to describe the desired card layout in natural language. Instead of creating the entire Adaptive Card definition manually, users can simply explain how the information should be arranged.
In the example shown in the video, the user asks Copilot to create an Adaptive Card, move the profile image to the right-hand side and place the remaining personal information on the left. The request is submitted directly through the chat. Copilot then generates the corresponding card structure and immediately applies it to the preview inside the Card View App.
Copilot does not only return the updated result. It also explains which layout changes were made. In the example, a two-column header is created: personal information is placed in a wider column on the left, while the profile image is aligned to the right in a narrower column. Additional sections, such as contact data, contact history, address information and notes, are displayed below the header in a clearly structured layout.
Refining the layout through conversation
The AI-assisted workflow does not end after the initial card has been generated. The design can be modified through additional messages in the same chat. For example, if the image should be moved from the right side to the left, the user only needs to submit a short follow-up instruction. Copilot then updates the existing card without requiring the entire definition to be recreated.
This conversational design process makes card creation much more intuitive. Users can begin with a general description, review the generated result and then refine the layout step by step. Spacing, column structure, image placement and the grouping of individual information areas can all be optimized iteratively.
Live preview in SharePoint edit mode
During configuration, the generated data card remains visible directly below the Copilot chat. This allows every change to be reviewed immediately. The screenshot shows a contact card for “Mr Max Mustermann”. Alongside the profile image, the card displays information such as status, date of birth, place of birth, telephone number, mobile number, email address and website.
The live preview makes it easy to determine whether the structure produced by Copilot meets both the business and visual requirements. If further changes are required, another instruction can be entered directly in the chat.
Combining AI assistance with manual editing
Although Copilot handles a significant part of the layout creation process, it does not replace the existing manual editing capabilities. The generated Adaptive Card can still be opened and edited in the integrated Adaptive Card Designer.
This makes the new feature useful for both business users who want to create cards quickly without writing code and experienced developers or power users who require detailed control. Copilot can provide a strong starting point, which can then be refined manually in the editor. AI-based generation and traditional configuration therefore complement each other.
Benefits of the Copilot integration
- Adaptive Cards can be created through natural-language instructions.
- The need to manually edit complex Adaptive Card structures is reduced.
- Layout changes can be requested through follow-up messages in the chat.
- The result is displayed immediately as a preview inside the SharePoint web part.
- Copilot explains the structural changes it has applied.
- Generated cards can still be edited manually in the Adaptive Card Designer.
Requirement for the AI feature
A valid Microsoft Copilot license is required to use the new AI-assisted design feature. The Card View App can still be used to display SharePoint list data and work with Adaptive Cards without the chat-based generation functionality. However, creating and modifying layouts through the integrated Copilot chat requires an appropriately licensed Copilot environment.
Conclusion
With the addition of Copilot, the Card View App evolves from a flexible SharePoint presentation web part into an AI-assisted design tool. Adaptive Cards no longer have to be created exclusively through manual configuration. Users can describe the desired result in natural language, review it directly in the live preview and optimize it through further chat instructions.
This lowers the barrier for less technical users while also accelerating the work of experienced SharePoint developers. The release opens up new possibilities for employee directories, contact cards, project overviews, customer information and many other scenarios involving structured SharePoint list data.
Kommentare