Use React in the Quick View of an Adaptive Card Extension

Introduction

Do you know that there is the ability to use a client side technology in the Quick View of an Adaptive Card Extension?

Since the release of the version 1.20 of SharePoint Framework a new way of defining the Quick View of Adaptive Card Extensions has been introduced: now you can define the Quick View using client side technologies!

If you’re interested in the release notes of SPFx version 1.20 check the official release notes here.

Previously the ACEs (Adaptive Card Extensions) supported only a JSON definition, now you can define your own client side technology component with custom styles and structure.

It is possible to also define an HTML instead of a client side technology component. If interested I’ve blogged how to use HTML in a previous post, you can find it here.

I’ve prepared a sample solution to demonstrate how to use this new functionality, you can find it here if interested.

Visual appearance

Starting with the visual appearance of the ACE here you can see the Card View.

It’s pretty basic with a text and a button that will open the Quick View.

Once clicked on the button the Quick View will open. The content that it’s displayed in the Quick View is defined using React.

Let’s cover the code about how to achieve the use of React inside the Quick View.

Show me the code

To use React or HTML inside the Quick View you will need to update a bit your SharePoint Framework solution.

The Quick View will use React. Therefore, the JSON representing the Adaptive Card will no longer be needed. It’s possible to remove the template folder from the solution.

Previously the folder structure would look like the following:

After updating it to use a React component the structure may look like the following screenshot. It may be different because I choose to create a components folder to better scaffold the code, but this is not a requirement.

Before covering how the React component is defined let’s cover how to update the Quick View file to use the new component.

First thing to update is the import statement.

To use the React (or HTML) code you will need to update the class that the Quick View will extend. The new class will be the BaseWebQuickView class imported as follows:

import { BaseWebQuickView } from "@microsoft/sp-adaptive-card-extension-base";

Since the solution will be using React to create the custom component is required to also import React.

import * as React from "react";

Once imported the new class it’s required to update the Quick View definition using the newly imported class:

export class QuickView extends BaseWebQuickView<
    IReactQuickViewAdaptiveCardExtensionProps,
    IReactQuickViewAdaptiveCardExtensionState>

The BaseWebQuickView type will need the properties and state to be defined as argument of the type.

Now it’s time to update the render method.

Here it’s best to check for the domElement to exist since the React component will be mounted inside it.

Once assured that the element exists React.createElement will be used to create an instance of the custom component.

render(): void {
  if (this.domElement) {
    const element = React.createElement(CustomComponent, {
                      message: strings.Message,
                    });

    ReactDOM.render(element, this.domElement);
  } else {
    console.error(strings.DomElementNotFound);
  }
}

The custom React component is simple. It will require a message property to be displayed. The solution also contains an interface for the properties for this custom component.

interface ICustomComponentProps {
  message: string;
}

Finally here is the custom React component which will simply display the message set as a property of the control itself.

export default class CustomComponent extends React.Component<ICustomComponentProps> {
  public render(): React.ReactElement<ICustomComponentProps> {
    return (
      <div className={styles.container}>
        <h2>{strings.Title}</h2>
        <p className={styles.message}>
          {this.props.message}
        </p>
      </div>
    );
  }
}

Conclusions

As per the HTML Quick View definition, the React Quick View is very simple to use. It enhances our development possibilities. It allows us to reuse React components that may have been created elsewhere!

Hope this helps!