Cross platform renderer for Adaptive Cards

Overview

Most people have impressive proficiency in assimilating information or data from visual representations rather than words since human memory is more sensitive to visuals. MicrosoftAdaptiveCardsprovides an efficient way to represent data into an interactive and delightful experience in the form of cards on your websites or mobile apps. AdaptiveCard community provides SDK support for all the major platforms that are popular in the industry. In this blog, we would like to brief our journey with the AdaptiveCard community as we own the SDK for theReact-Native Platform

Functionality

The card author creates their content as a simple JSON object. The host application can render this data into the respective card format with the help of Adaptive card SDK. The SDK validates the schema, converts it into native UI, and adapts to the look and feel of the host application. The adaptive card designer helps authors in designing the card and generating the corresponding JSON payload. Also, the designer provides a set of sample templates, or you can convert any card image to the adaptive card format. Adaptive card schema gives an easy and convenient way to define the UI components and layouts based on the individual requirement. The SDK also has the flexibility for developers to specify platform-agnostic properties through a custom configuration called HostConfig.

The major advantages of using AdaptiveCard SDK in your client applications are

• As the schema is uniform across the platforms, the same data can be used across your applications to obtain uniformity

• Integrate with your chatbot to give an excellent user experience

• Any type of data can be rendered as cards with fewer development efforts

• Very easy to create forms to capture the user’s data for registration, SignIn, Q&A, etc

• The card’s design can be changed without redeploying the application

• More effective and understandable for the end-users

React Native Renderer

When the Adaptive card was published initially, the SDK for the React-Native platform was unavailable. As this was one of the predominant demands inside the adaptive card community, our team built the React-Native SDK and released it as a community contribution. Since the adaptive card features are constantly evolving, we follow all the approved features from the community ZenHub and add support in the SDK according to the timeline. Along with React Native SDK, we provide a visualizer application with substantial payloads that gives all the features, including the supported components and their behaviors with actual use cases.

The RN renderer processes the payload in a top-down approach, and elements are created based on the container layout specified in the JSON payload. The renderer engine makes use of an element registry that has all the registered components. It converts the payload into the object model corresponding to each element type with the parent information. While rendering each element, the renderer decides the styling and position based on its parent. If the payload has any unregistered element type, the renderer will discard it and proceed with the following element. When we designed the adaptive card SDK, we considered the native iOS and Android SDKs as a reference to provide a consistent experience across the mobile platforms.

Key Features

Markdown Engine

The renderer uses an inbuilt expression engine to identify the markdown languages in the text elements and transform them to the expected format. All the TextBlock and RichTextBlock elements in the JSON payload are processed by the markdown rule engine using the predefined regex configurations. It provides an added advantage for the adaptive card designers to include the markdown contents in their cards to make them more attractive for the readers.

Theme Config

Moreover, React-Native renderer provides a customized theme config support that facilitates the developers to amend the card theme according to their host application. The theme config supports customized styling for card elements that give the privilege for developers to change the styling based on individual requirements. Though the SDK provides a default theme config for the application, the developers can override the defaults.

Extensibility

To support the extensibility, developers can override the existing card elements using their custom types. All these extended components are required to register in the SDK's element registry. The renderer identifies the custom types in the JSON payload and loads the corresponding element from the registry while transforming to UI elements.

ReactNative Windows

The SDK provides support for the Windows platform. Changes were made to the renderer to work in ReactNative windows by using alternate approaches for the problems faced such as using ContextAPI via component wrapper instead of the static type. The SDK provides specific project config files for the Windows platform to avoid issues concerning the Windows platform.

Summary

The React-Native renderer is used extensively in Microsoft’s Viva connection app within the MS Teams. Our team has worked with the MS team to support react-native adaptive card integration and promptly resolve the issues.

If you want to contribute with us, visit theBigThinkCode AdaptiveCards Repoand check the readme to proceed further. To integrate the react-native adaptive card SDK with your application, please get the latest version and usage details fromnpm