How To Use Adaptive Cards In SharePoint Using SPFx

Hi,

In the below article we will go through – what adaptive card and how it can be used in SharePoint using React. Adaptive cards – are used to interchange content in a collective and constant way and it is open framework also it supports multiple platform. In simple words, it is a collection of JSON and array of JSON objects which will render and gives output with all the data and actions.

In the below example, We will demonstrate how to include Adaptive card in our SharePoint Framework, for this example I am getting current User Information and populating it in Adaptive Card.

Here I created simple SPFx webpart with React, which get user properties through pnp js and put those values in Adaptive card payload,

Installing adaptivecards, pnp js and office ui fabric package, updated typescript version (not necessary),

npm i @pnp/sp @pnp/pnpjs react-adaptivecards office-ui-fabric-core@9.0.0 office-ui-fabric-react@5.69.0 typescript@2.8.4

In the code, I create a component called UserAdaptiveCard which will retrieve user information on ComponentDidMount method and based on the response it shows the data.

 import * as React from "react";
 import AdaptiveCard from "react-adaptivecards";
 import styles from "./UserAdaptiveCard.module.scss";
 import {
   IUserAdaptiveCardState,
   ICurrentUser
 } from "../models/IUserAdaptiveCardState";
 import { Loader } from "./Loader";
 import { getCurrentUser, InitialState } from "../services/UserProfileService";
 
 export class UserAdaptiveCard extends React.Component<
   {},
   IUserAdaptiveCardState
 > {
   constructor(props: {}) {
     super(props);
     this.state = InitialState;
   }
   public componentDidMount() {
     // get CurrentUserInfo
     getCurrentUser(
       this.state.currentUser,
       (user: ICurrentUser) => {
         this.setState({ currentUser: user, isCurrentUserFetched: true });
       },
       (error: string) => {
         console.error(error);
         this.setState({ isError: true });
       }
     );
   }
 
   public render(): JSX.Element {
     return (
       <div className={`${styles.userAdaptive}`}>
         {!this.state.isCurrentUserFetched ? (
           <Loader
             isFetched={this.state.isCurrentUserFetched}
             isError={this.state.isError}
           />
         ) : (
           <div>
             <AdaptiveCard
               payload={{
                 $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
                 type: "AdaptiveCard",
                 version: "1.0",
                 body: [
                   {
                     type: "Container",
                     items: [
                       {
                         type: "Image",
                         horizontalAlignment: "Center",
                         spacing: "Large",
                         style: "Person",
                         url: `${
                           this.state.currentUser.imageURL
                             ? this.state.currentUser.imageURL
                             : "http://www.sharepointpals.com/image.axd?picture=/avatars/Authors/ahamed-fazil-buhari.png"
                         }`,
                         size: "Large"
                       },
                       {
                         type: "TextBlock",
                         size: "Large",
                         horizontalAlignment: "Center",
                         weight: "Lighter",
                         text: `${this.state.currentUser.fullName}`
                       },
                       {
                         type: "TextBlock",
                         horizontalAlignment: "Center",
                         weight: "Bolder",
                         text: `Email: ${this.state.currentUser.email}`,
                         wrap: true
                       }
                     ]
                   }
                 ]
               }}
             />
           </div>
         )}
       </div>
     );
   }
 }
 
 

Loader component is just to show spinner while we make api call (in my O365 Dev tenant I do not have Exchange server enabled for my account – that’s the reason I couldn’t set my profile picture. Instead I hardcoded profile picture URL if PictureURL from SharePoint is null)

Deploy:

To deploy, run

gulp bundle –ship

Once bundling is completed successfully run below command to package the solution

gulp package-solution –ship

The sppkg file will be available in :\yourproject\sharepoint\solution\yourproject.sppkg

Upload solution to App Catalog site

This app is not available for all the site collection, only the site collection which adds this app will consume it.

Before searching for this app in modern page, include this app in your site.

In the modern page add the webpart as shown below,

The SPFx web part will be rendered as follows,

The whole code for this solution is available here in github – https://github.com/ahamedfazil/sppals/tree/master/samples/spfx-adaptivecards-demo-sppals

Please checkout to the branch feature/user-info to get solution related to this demo explained above.

Happy Coding

Ahamed