DOCSEARCHbyAlgolia
Submit Docs

Adaptive Cards Framework

repository·main·Indexed 24 days ago

https://github.com/microsoft/adaptivecards

An open-source framework for exchanging UI content consistently across platforms like Microsoft Teams, Outlook, and custom applications using a common schema. It provides SDKs for JavaScript/Web, .NET (Core, WPF, HTML), Windows UWP, Android, and iOS, as well as community SDKs for React Native and Vue.js. The framework includes a strict JSON schema, a templating engine for .NET, and tools like the Interactive Designer, Sample Browser, and Schema Explorer.

Tokens
201K
Snippets
104
Records
1.3K
Agent score
83%

What's inside Adaptive Cards

  1. Overview of Adaptive Cards for .NET

    main

    The Adaptive Cards for .NET ecosystem provides tools for working with Adaptive Cards within the .NET framework. It includes core serialization capabilities and specialized renderers for different output formats.

    Key components include:

    • AdaptiveCards library: The core library used for serializing Adaptive Card objects to and from JSON.
    • AdaptiveCards.Rendering.Wpf: A renderer for WPF applications that also supports server-side rendering of cards to PNG images.
    • AdaptiveCards.Rendering.Html: A renderer designed for server-side HTML generation of Adaptive Cards.

  2. Overview of marked-schema

    main

    The marked-schema package is a fork of wetzel designed to generate Markdown documentation directly from a JSON schema. It is specifically optimized for the Adaptive Cards JSON schema.

    Key features include:

    1. Table of Contents (TOC) support: Allows you to specify a custom order for the generated types.
    2. Example path support: Allows you to provide a path to specific examples for each property within objects, which are then included in the documentation.

  3. Overview of Adaptive Cards JavaScript packages

    main

    The JavaScript ecosystem for Adaptive Cards consists of several specialized packages:

    • adaptivecards: The core renderer library.
    • adaptivecards-controls: A controls library primarily used by the designer.
    • adaptivecards-templating: A JSON-to-JSON templating and data binding library.
    • adaptivecards-designer: The drag-and-drop designer component.
    • adaptivecards-designer-app: The application that consumes the designer component.
    • adaptivecards-site: The package used to generate the documentation website.
    • adaptivecards-react: A React.js library for Adaptive Cards.

    Note on Deprecation: The adaptivecards-fabric package is deprecated. Users should migrate to adaptivecards-fluentui.

  5. Overview of ConsistentCards

    main
    ConsistentCards is a web-based application designed to help card authors, host app developers, and the Adaptive Cards team ensure visual consistency across different platforms. Instead of manually building and running platform-specific visualizers (which may require specific hardware like a Mac for iOS), users can upload their Adaptive Card JSON or templates to a central web interface. The application then provides screenshots of how the card renders on various supported platforms (e.g., Android, iOS, UWP, .NET) along with any rendering errors or warnings.

  6. Debug and visualize AdaptiveTemplate parsers

    main

    The AdaptiveCards.Templating tool is used for debugging the AdaptiveTemplate parser. It provides two primary capabilities:

    1. Visualization: It visualizes the parse tree generated by the parser.
    2. Code Generation: It can generate a C# parser from the grammar definitions.

    To use this tool, you must first set up ANTLR following the official ANTLR getting started guide.

  7. Configure host application behavior with HostConfig

    main

    The host-config module provides the classes and interfaces necessary to define how an Adaptive Card is rendered within a specific host application. By configuring a HostConfig object, you can control global styles such as colors, fonts, container styles, and input behaviors.

    Key configuration areas include:

    Styling and Appearance

    • Colors: Use ColorSetDefinition and ColorDefinition to manage the color palette.
    • Fonts: Use FontTypeSet and FontTypeDefinition to define typography, including IFontSizeDefinitions and IFontWeightDefinitions.
    • Containers: Use ContainerStyleSet and ContainerStyleDefinition to control the look of card containers.
    • Text: Use BaseTextDefinition and TextColorDefinition for text-specific styling.

    Component-Specific Settings

    • Actions: Use ActionsConfig to define how buttons and other actions behave.
    • Inputs: Use InputConfig and InputLabelConfig to manage user input elements and their labels.
    • Media: Use MediaConfig and ImageSetConfig to control how images and other media are displayed.
    • FactSets: Use FactSetConfig, FactTextDefinition, and FactTitleDefinition to style key-value pair displays.

    Layout

    • Line Height: Use ILineHeightDefinitions to control spacing between lines of text.

  8. Understand how the AdaptiveCards website is generated

    main

    The site (https://adaptivecards.io) is built using Hexo and NodeJS. Different sections of the site are derived from various source files:

    • Schema Explorer: Generated from markdown and the adaptive-card.json schema file.
      • Default examples follow the pattern: ../../../samples/v1.*/Elements/<ElementName>.json.
      • Property examples follow the pattern: ../../../samples/v1.*/Elements/<ElementName>.<PropertyName>.json.
    • Samples: Automatically built by scanning for JSON files matching ../../../samples/v1.*/Scenarios/*.json.
    • Designer: Built from the ../adaptivecards-designer project.
    • Blog: Built from the ./pages/_posts directory.
    • Documentation: Hosted separately at docs.microsoft.com, built from the MicrosoftDocs/AdaptiveCards repository.

  9. Adaptive Card Templating components

    main

    The templating ecosystem consists of three main parts:

    1. Template Language: The syntax used to author templates (using data-binding expressions).
    2. Templating SDKs: Available on supported platforms (e.g., .NET, JavaScript) to populate templates with real data on the back-end or client.
    3. Template Service: A service for finding, contributing to, and sharing well-known templates.

  10. New features in Adaptive Cards 1.2

    main

    Adaptive Cards v1.2 introduced several enhancements to interactivity, styling, and compatibility. Key features include:

    • Element-level fallback support: Allows cards to be exchanged between hosts with different rendering capabilities by providing fallback content.
    • Enhanced Interactivity:
      • Action.ToggleVisibility: Allows users to show or hide elements.
      • TextBlock inline Actions: Actions can now be embedded directly within text.
      • Input.Text with associated action (Quick-Reply).
      • ActionSet: Allows placing actions anywhere in the card rather than just at the bottom.
      • Action sentiment support (e.g., primary or destructive).
    • Visual Styling:
      • Full bleed background images and containers.
      • Background image properties: Stretch and Repeat.
      • More Container styles to match TextBlock styles.
      • TextBlock font styles and improved inline text formatting.
      • MinHeight property on Containers.
    • Data & Inputs:
      • Support for Base64 encoded image URIs (Data URIs).
      • Wrap property on ChoiceSet and Toggle elements.

  11. Use the Adaptive Cards Templating Engine for .NET

    main
    The Adaptive Cards Templating Engine for .NET (Preview) is a JSON-to-JSON templating and data-binding library. While optimized for Adaptive Cards, it is a general-purpose engine that can be used in any context requiring JSON data binding. It uses a template string containing placeholders and an evaluation context containing the data to produce a final expanded JSON object.

  12. What is covered by Automated UI testing in AdaptiveCards

    main

    Automated UI testing in AdaptiveCards focuses on validating interactivity, rendered properties, and the visual tree structure to prevent regressions in user experience.

    Key areas for automation include:

    Interactable Elements

    • Actions: Verifying behaviors for OpenUrl, Submit, Showcard, Toggle, and Execute (e.g., checking if Submit retrieves all inputs or if Showcard toggles visibility correctly).
    • Container Actions: Validating actions on Column, ColumnSet, Container, and Images.
    • TextBlock: Ensuring links within text blocks are clickable.
    • Inputs: Testing input validation, correct value retrieval on submission, editability, and control accessibility (e.g., Input.Time).
    • Media Controls: Verifying media interaction.

    Rendered Properties

    • Card & Host Config Properties: Verifying that properties like attention color in a TextBlock are respected and rendered correctly according to the API.

    Visual Tree

    • Visual Tree Dumps: Capturing and comparing visual tree structures per platform to detect rendering changes.