Use HTML in the Quick View of an Adaptive Card Extension

Introduction

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 HTML!

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 HTML with custom styles and structure.

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

Starting with the visual appearance of the ACE in my sample project here you can see how the Card View is:

It’s a pretty basic Card View, with a message and a button that opens the HTML Quick View.

Once clicked on the button the Quick View will open:

In this sample the content of the Quick View is just a basic HTML to demonstrate how to use it.

Now let’s see how to achieve this!

Show me the code

Usually, when developing an ACE, the Quick View/s are defined inside a quickView folder and the JSON definition/s file are declared inside a template folder.

For example, usually you would have the following structure:

When defining the HTML for the Quick View you won’t need the template folder anymore so the folder structure will become as following:

After removing the template folder there are some changes to be made to the QuickView.ts file in order to use HTML.

First you need to import the BaseWebQuickView class to extend the Quick View. This will be imported as follows:

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

After importing the class you can change the definition of the Quick View class specifying the newly imported definition. This new class accept two arguments in the definition and those are the properties and the state interfaces:

export class QuickView extends BaseWebQuickView<
  IHtmlQuickViewAdaptiveCardExtensionProps,
  IHtmlQuickViewAdaptiveCardExtensionState> {

Finally you will need to set the custom HTML to the innerHTML of the domElement of the ACE:

render(): void {
    this.domElement.innerHTML = `
      <section class=${styles.container}>
        <h2>${strings.HtmlTitle}</h2>
        <div>
          ${strings.HtmlDescription}
        </div>
        <br />
        <table class=${styles.customTable}>
          <!-- Omitted for brevity -->
        </table>
      </section>`;
  }

As you can see it’s pretty straight forward using HTML in a Quick View and it’s also possible to use custom styling too!

Conclusions

Using HTML in the Quick View of an Adaptive Card Extension is really simple and enables further customization instead of using the JSON to define the Adaptive Card.

If you’re interested in knowing more about this topic there’s a tutorial on Microsoft learn that may suits you, it can be found here.

Hope this helps!