SharePoint Adaptive Cards Extension SPFx To Extend Viva Connection

• BasePrimaryTextCardView is responsible for Primary Text Template
• BaseBasicCardView is responsible for Basic Card Template
• BaseImageCardView is responsible for Image Card Template

Now, we are taking the example of BasePrimaryTextCardView. Will explore the other two in the next article.

export class CardView extends BasePrimaryTextCardView < IPrimaryTextFirstSampleAdaptiveCardExtensionProps, IPrimaryTextFirstSampleAdaptiveCardExtensionState > {
    public get cardButtons(): [ICardButton, ICardButton] | undefined {
        // Add Json to display buttons in card view.
    }
}

cardButtons() method is used to display buttons on the Primary text card view.

card button supports three types of buttons.

• QuickView
• ExternalLink
• Submit

catrdButons() method returns JSON text which includes properties like Title,action,type, view,target.

return [{
    title: strings.QuickViewButton,
    action: {
        type: 'QuickView',
        parameters: {
            view: QUICK_VIEW_REGISTRY_ID // this is initialize in AdaptiveCardextension.ts file
        }
    }
}, {
    title: 'Bing',
    action: {
        type: 'ExternalLink',
        parameters: {
            target: 'https://www.bing.com'
        }
    }
}];

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
    // Responsible to handle on selection event.
    // This code run when user click on card view
}

onCardSelection() method handles click event on cardview component.

return {
    type: 'ExternalLink', // either type can be Externalink or QuickView
    parameters: {
        target: 'https://www.google.com' // if Type ExternalLink
        // View : ViewID // if Type QuickView
    }
};

Explore Quick View component

Open file "\src\adaptiveCardExtensions\primaryTextFirstSample\quickView\QuickView.ts" handle Quick View Component.

QuickView component extends from BaseAdaptiveCardView,

export class QuickView extends BaseAdaptiveCardView<
  IPrimaryTextFirstSampleAdaptiveCardExtensionProps,
  IPrimaryTextFirstSampleAdaptiveCardExtensionState,
  IQuickViewData
>
{ 
 // Add code
}

IQuickViewData will be any JSON object which we want to render in the Quick View Component.

Data() method is used to get data from the IQuickViewData and return JSON data which will be used in the JSON template to render values.

public get data(): IQuickViewData {
    return {
        subTitle: strings.SubTitle,
        title: strings.Title,
        description: this.properties.description
    };
}

template() is get adaptive card schema.

public get template(): ISPFxAdaptiveCard {
    return require('./template/QuickViewTemplate.json');
}

template() return json from the json file.

Open "\src\adaptiveCardExtensions\primaryTextFirstSample\quickView\template\QuickViewTemplate.json" file which includes JSON schema which will be render in quick view component along with IQuickViewData.

{
  "schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "weight": "Bolder",
      "text": "${title}" // Value replace from IQuickViewData
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "weight": "Bolder",
              "text": "${subTitle}", Value replace from IQuickViewData
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "${description}", Value replace from IQuickViewData
      "wrap": true
    }
  ]
}

The developer can create complex JSON using https://adaptivecards.io/samples/.

Full Component looks like as below,

import { ISPFxAdaptiveCard, BaseAdaptiveCardView } from '@microsoft/sp-adaptive-card-extension-base';
import * as strings from 'PrimaryTextFirstSampleAdaptiveCardExtensionStrings';
import { IPrimaryTextFirstSampleAdaptiveCardExtensionProps, IPrimaryTextFirstSampleAdaptiveCardExtensionState } from '../PrimaryTextFirstSampleAdaptiveCardExtension';
export interface IQuickViewData {
  subTitle: string;
  title: string;
  description: string;
}
export class QuickView extends BaseAdaptiveCardView<
  IPrimaryTextFirstSampleAdaptiveCardExtensionProps,
  IPrimaryTextFirstSampleAdaptiveCardExtensionState,
  IQuickViewData
> {
  public get data(): IQuickViewData {
    return {
      subTitle: strings.SubTitle,
      title: strings.Title,
      description: this.properties.description
    };
  }
  public get template(): ISPFxAdaptiveCard {
    return require('./template/QuickViewTemplate.json');
  }
}

Configure Property Panel Controls

property pane controls are used to provide configurations settings for custom components same as webparts.

Open "\src\adaptiveCardExtensions\primaryTextFirstSample\PrimaryTextFirstSamplePropertyPane.ts". This file handles property controls.

getPropertyPaneConfiguration() method used to render controls in the property panel to get input from the user to run the components.

public getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
        pages: [{
            header: {
                description: strings.PropertyPaneDescription
            },
            groups: [{
                groupName: strings.BasicGroupName,
                groupFields: [
                    PropertyPaneTextField('title', {
                        label: strings.TitleFieldLabel
                    }),
                    PropertyPaneTextField('iconProperty', {
                        label: strings.IconPropertyFieldLabel
                    }),
                    PropertyPaneTextField('description', {
                        label: strings.DescriptionFieldLabel,
                        multiline: true
                    })
                ]
            }]
        }]
    };
}

This Propertyconfigurations are used by "\src\adaptiveCardExtensions\primaryTextFirstSample\PrimaryTextFirstSampleAdaptiveCardExtension.ts" file inside getPropertyPaneConfiguration() method.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return this._deferredPropertyPane!.getPropertyPaneConfiguration();
}

Run project in Workbench and display component-wise output

Run below command to execute code in workbench.

gulp serve -l --nobrowser

Open workbench URL in SharePoint.

https://<tenantName>.sharepoint.com/_layouts/15/workbench.aspx

Let's Understand Component Wise Output.

Follow the below GIF to configure the full Adaptive card component and check the output.

Conclusion

After this article, you will be familiar with Adaptive cards extension and its different components. You will have a basic idea of the ACEs solution structure and how can we implement it and test it.

I hope, you enjoyed this article.