How to call and show Graph API data in SPFx Adaptive Card Extensions(ACEs)

Published Feb 07 2022 02:37 AM 1,345 Views
Senior Member

In this article, we will learn how to get data from Graph API and display it in SPFx Adaptive Card Extensions(ACEs). if you are new to ACEs then I would recommend going through my previous article where I have covered the concept and basics of ACEs along with step by step tutorial on understanding how the ACEs components work together especially Card View and Quick View.

Scenario

In this tutorial, we will cover the below use cases

  • We will get the current user’s email message from the Graph API call and then show it in Card View with the previous and next button to navigate between emails
  • We will modify Quick View to display email detail on click of any Email from Card View.

Step – Install latest SPFx Version

As of writing this article, the latest beta SPFx version is v1.14, use the below command to install the latest beta version, you can also install stable version SPFx 1.13.1

In this article, we will learn how to get data from Graph API and display it in SPFx Adaptive Card Extensions(ACEs). if you are new to ACEs then I would recommend going through my previous article where I have covered the concept and basics of ACEs along with step by step tutorial on understanding how the ACEs components work together especially Card View and Quick View.

Scenario

In this tutorial, we will cover the below use cases

  • We will get the current user’s email message from the Graph API call and then show it in Card View with the previous and next button to navigate between emails
  • We will modify Quick View to display email detail on click of any Email from Card View.

Step – Install latest SPFx Version

As of writing this article, the latest beta SPFx version is v1.14, use the below command to install the latest beta version, you can also install stable version SPFx 1.13.1

 

npm install /generator-sharepoint@next --global

 

Step – Create a new SPFx solution

Go to the targeted path in your command prompt where you wanted to create a new SPFx solution, run the below command

 

yo /sharepoint

 

We will be asked a series of questions, you can choose/enter below for our sample

img_61d1bb39c2a12.png

Once completed you would see below

img_61d1bb5863a19.png

Step – Create Required properties/attributes to handle required state object

Based on what we are trying to build we will need 3 attributes

Go to “src\adaptiveCardExtensions\graphdatademo\GraphdatademoAdaptiveCardExtension.ts”

emails – to store an array of email messages which will be retrieved by Graph API

currentIndex : to hold current email item’s index

currentEmail : to hold current email object returned by Graph API to use it in Quick view to display details of email when clicked.

Modify the ACEState interface to below

 

export interface IGraphdatademoAdaptiveCardExtensionState {
  emails: any;
  currentIndex:any;
  currentEmail:any;
}

 

Next, modify onInit method to intialize

public onInit(): Promise<void> {
   this.state = {
     emails: [],
     currentIndex:0,
     currentEmail:{}
   };
   this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
   this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
   this.getOutlookData()
   return Promise.resolve();
 }

Step – Create a method to get data from Graph API

Go to “src\adaptiveCardExtensions\graphdatademo\GraphdatademoAdaptiveCardExtension.ts”

Import the MSGraphClient using which we will make Graph API calls.

import { MSGraphClient } from '@microsoft/sp-http';

Add a new method getOutlookData to make Graph API call and set State of currentEmail and emails from the return object.

private getOutlookData(){
    
    this.context.msGraphClientFactory.getClient().then((client: MSGraphClient): void => {
      client.api("/me/mailfolders/Inbox/messages").get((error, messages: any) => {
        console.log(messages);
        this.setState({currentEmail:messages.value[this.state.currentIndex],emails:messages.value});
      });
    });
  }

Step – Modify Card View to show data using the State object

Go to src\adaptiveCardExtensions\graphdatademo\cardView\CardView.ts

Modify data method to set primaryText and Description as we have primary text card template.

We will use state object to read the subject and from the email address.

public get data(): IPrimaryTextCardParameters {
    if(this.state.emails.length >0 ) {
    return {
      primaryText: "Sub: " + this.state.emails[this.state.currentIndex].subject,
      description: "From: " + this.state.emails[this.state.currentIndex].from.emailAddress.address
    }
    }
    else{
      return {
        primaryText: "Loading",
        description: "Loading"
      }
    }
  }

Step – Modify cardButtons methods to add 2 buttons to navigate through email using previous and next 

Go to src\adaptiveCardExtensions\graphdatademo\cardView\CardView.ts

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
   const buttons: ICardButton[] = [];
   if (this.state.currentIndex > 0) {
     buttons.push({
       title: 'Previous',
       action: {
         type: 'Submit',
         parameters: {
           id: 'previous'
         }
       }
     });
   }
   if (this.state.currentIndex < this.state.emails.length - 1) {
     buttons.push({
       title: 'Next',
       action: {
         type: 'Submit',
         parameters: {
           id: 'next'
         }
       }
     });
   }
   return buttons as [ICardButton] | [ICardButton, ICardButton];
 }

Add onAction item method to handle the submit action type of previous and next button

 

Note here using a case statement to increment or decrement the index, this will change the state object by modifying currentIndex and currentEmail and forcing to re-render the card view component.

public onAction(action: IActionArguments): void {
   if (action.type === 'Submit') {
     const { id, op } = action.data;
     switch (id) {
       case 'previous': {
         this.setState({ currentIndex: this.state.currentIndex - 1 , currentEmail:this.state.emails[this.state.currentIndex - 1]});
         break;
       }
       case 'next': {
         this.setState({ currentIndex: this.state.currentIndex + 1 , currentEmail:this.state.emails[this.state.currentIndex + 1]});
         break;
       }
       case 'default' : {}
           
     }
   }
 }

Step – Modify Quick view adaptive card JSON template to display details of the email. 

First thing we need to do is modify the QuickView Adaptive Card template json object. I have used https://adaptivecards.io/designer to design the adaptive card and set the dynamic properties to set based on how the email object is coming…

Modify src\adaptiveCardExtensions\graphdatademo\quickView\template\QuickViewTemplate.json  to below

If you notice here

  • We would be using message object from state to populate the dynamic values…
  • For user photo, we are using the userphoto.aspx page and passing the sender’s email address. this is one of the way to get photo
  • We have also added one button in Quick view which will take user to target outlook email link, this we get from webLink property of email object.
  • To find list of properties returend by the email object, you can refer to this  link
    {
      "type": "AdaptiveCard",
      "body": [
          {
              "type": "TextBlock",
              "size": "Medium",
              "weight": "Bolder",
              "text": "${message.subject}",
              "wrap": true,
              "style": "heading"
          },
          {
              "type": "ColumnSet",
              "columns": [
                  {
                      "type": "Column",
                      "items": [
                          {
                              "type": "Image",
                              "style": "Person",
                              "url": "/_layouts/15/userphoto.aspx?size=S&username=${message.from.emailAddress.address}",
                              "size": "Small"
                          }
                      ],
                      "width": "auto"
                  },
                  {
                      "type": "Column",
                      "items": [
                          {
                              "type": "TextBlock",
                              "weight": "Bolder",
                              "text": "${message.from.emailAddress.address}",
                              "wrap": true
                          },
                          {
                              "type": "TextBlock",
                              "spacing": "None",
                              "text": "Created {{DATE(${string(message.sentDateTime)}, SHORT)}}",
                              "isSubtle": true,
                              "wrap": true
                          }
                      ],
                      "width": "stretch"
                  }
              ]
          },
          {
              "type": "TextBlock",
              "text": "${message.bodyPreview}",
              "wrap": true
          }
      ],
      "actions": [
          {
              "type": "Action.OpenUrl",
              "title": "View",
              "url": "${message.webLink}"
          }
      ],
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.3"
    }

    Step Modify QuickView to pass the message object from state to Adaptive Card

    Go to src\adaptiveCardExtensions\graphdatademo\quickView\QuickView.ts

    Modify IQuickViewDate interface to hold the message object

    Step Modify QuickView to pass the message object from state to Adaptive Card

    Go to src\adaptiveCardExtensions\graphdatademo\quickView\QuickView.ts

    Modify IQuickViewDate interface to hold the message object\

export interface IQuickViewData {
  message:any
}

Modify data() method to set and return the current message object from state property currentEmail

public get data(): IQuickViewData {
    return {
      message: this.state.currentEmail
    };
  }

Step – Testing the ACE component

Testing the ACE component would be similar to how we test our SPFx web part, we will have to run the gulp serve command then open workbench to add the component created on the Page.

Run below command

gulp serve -l --nobrowser

Open a SharePoint Workbench in the browser

https://yourtenant.sharepoint.com/sites/mysites1/_layouts/15/workbench.aspx

Click on Add icon, Click on the graphDataDemo,

We should see something like below

img_61d1fa09cf8c2-768x338.png

Notice here that once you click Next, it loads the next email but it does not show the Prev button, this is because by default the Card Size is set to Medium in ACE properties configuration, click on Edit web part and chase the Card Size to Large

img_61d1fa7f3080a-1024x343.png

Now you should see something like below

img_61d1fabba64be.png

You can use Previous and Next to move around different emails. If you would have noticed we have written logic to handle that previous and next buttons will be visible based on item index and total email counts(by default we will only get 10 from Graph API). You can make this configurable in the property window and use this number to pass to Graph API GraphdatademoAdaptiveCardExtension.tx file

 

Click on any of the emails and we should see the email detail

img_61d1fb4343467.png

img_61d1fd38e908b.png

That’s it for this article, Hope this helps..!!!

Happy Coding..!!!

The source code for this article is available at this location for quick reference.

%3CLINGO-SUB%20id%3D%22lingo-sub-3070982%22%20slang%3D%22en-US%22%3EHow%20to%20call%20and%20show%20Graph%20API%20data%20in%20SPFx%20Adaptive%20Card%20Extensions(ACEs)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3070982%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20this%20article%2C%20we%20will%20learn%20how%20to%20get%20data%20from%20Graph%20API%20and%20display%20it%20in%20SPFx%20Adaptive%20Card%20Extensions(ACEs).%20if%20you%20are%20new%20to%20ACEs%20then%20I%20would%20recommend%20going%20through%20my%20previous%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fsiddharthvaghasia.com%2F2021%2F12%2F29%2Fcreate-your-first-adaptive-card-extension-with-spfx%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20nofollow%22%3Earticle%26nbsp%3B%3C%2FA%3Ewhere%20I%20have%20covered%20the%20concept%20and%20basics%20of%20ACEs%20along%20with%20step%20by%20step%20tutorial%20on%20understanding%20how%20the%20ACEs%20components%20work%20together%20especially%20Card%20View%20and%20Quick%20View.%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EScenario%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EIn%20this%20tutorial%2C%20we%20will%20cover%20the%20below%20use%20cases%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EWe%20will%20get%20the%20current%20user%E2%80%99s%20email%20message%20from%20the%20Graph%20API%20call%20and%20then%20show%20it%20in%20Card%20View%20with%20the%20previous%20and%20next%20button%20to%20navigate%20between%20emails%3C%2FLI%3E%0A%3CLI%3EWe%20will%20modify%20Quick%20View%20to%20display%20email%20detail%20on%20click%20of%20any%20Email%20from%20Card%20View.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Install%20latest%20SPFx%20Version%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EAs%20of%20writing%20this%20article%2C%20the%20latest%20beta%20SPFx%20version%20is%20v1.14%2C%20use%20the%20below%20command%20to%20install%20the%20latest%20beta%20version%2C%20you%20can%20also%20install%20stable%20version%20SPFx%201.13.1%3C%2FP%3E%0A%3CP%3EIn%20this%20article%2C%20we%20will%20learn%20how%20to%20get%20data%20from%20Graph%20API%20and%20display%20it%20in%20SPFx%20Adaptive%20Card%20Extensions(ACEs).%20if%20you%20are%20new%20to%20ACEs%20then%20I%20would%20recommend%20going%20through%20my%20previous%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fsiddharthvaghasia.com%2F2021%2F12%2F29%2Fcreate-your-first-adaptive-card-extension-with-spfx%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20nofollow%22%3Earticle%26nbsp%3B%3C%2FA%3Ewhere%20I%20have%20covered%20the%20concept%20and%20basics%20of%20ACEs%20along%20with%20step%20by%20step%20tutorial%20on%20understanding%20how%20the%20ACEs%20components%20work%20together%20especially%20Card%20View%20and%20Quick%20View.%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EScenario%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EIn%20this%20tutorial%2C%20we%20will%20cover%20the%20below%20use%20cases%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EWe%20will%20get%20the%20current%20user%E2%80%99s%20email%20message%20from%20the%20Graph%20API%20call%20and%20then%20show%20it%20in%20Card%20View%20with%20the%20previous%20and%20next%20button%20to%20navigate%20between%20emails%3C%2FLI%3E%0A%3CLI%3EWe%20will%20modify%20Quick%20View%20to%20display%20email%20detail%20on%20click%20of%20any%20Email%20from%20Card%20View.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Install%20latest%20SPFx%20Version%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EAs%20of%20writing%20this%20article%2C%20the%20latest%20beta%20SPFx%20version%20is%20v1.14%2C%20use%20the%20below%20command%20to%20install%20the%20latest%20beta%20version%2C%20you%20can%20also%20install%20stable%20version%20SPFx%201.13.1%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Enpm%20install%20%2Fgenerator-sharepoint%40next%20--global%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Create%20a%20new%20SPFx%20solution%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EGo%20to%20the%20targeted%20path%20in%20your%20command%20prompt%20where%20you%20wanted%20to%20create%20a%20new%20SPFx%20solution%2C%20run%20the%20below%20command%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Eyo%20%2Fsharepoint%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe%20will%20be%20asked%20a%20series%20of%20questions%2C%20you%20can%20choose%2Fenter%20below%20for%20our%20sample%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1bb39c2a12.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342154iA036A1A3B02DF550%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1bb39c2a12.png%22%20alt%3D%22img_61d1bb39c2a12.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3EOnce%20completed%20you%20would%20see%20below%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1bb5863a19.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342155i47C66ED98CA91BA5%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1bb5863a19.png%22%20alt%3D%22img_61d1bb5863a19.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Create%20Required%20properties%2Fattributes%20to%20handle%20required%20state%20object%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EBased%20on%20what%20we%20are%20trying%20to%20build%20we%20will%20need%203%20attributes%3C%2FP%3E%0A%3CP%3EGo%20to%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3E%E2%80%9Csrc%5CadaptiveCardExtensions%5Cgraphdatademo%5CGraphdatademoAdaptiveCardExtension.ts%E2%80%9D%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3Eemails%20%E2%80%93%20to%20store%20an%20array%20of%20email%20messages%20which%20will%20be%20retrieved%20by%20Graph%20API%3C%2FP%3E%0A%3CP%3EcurrentIndex%20%3A%20to%20hold%20current%20email%20item%E2%80%99s%20index%3C%2FP%3E%0A%3CP%3EcurrentEmail%20%3A%20to%20hold%20current%20email%20object%20returned%20by%20Graph%20API%20to%20use%20it%20in%20Quick%20view%20to%20display%20details%20of%20email%20when%20clicked.%3C%2FP%3E%0A%3CP%3EModify%20the%20ACEState%20interface%20to%20below%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Eexport%20interface%20IGraphdatademoAdaptiveCardExtensionState%20%7B%0A%20%20emails%3A%20any%3B%0A%20%20currentIndex%3Aany%3B%0A%20%20currentEmail%3Aany%3B%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENext%2C%20modify%20onInit%20method%20to%20intialize%3C%2FP%3E%0A%3CDIV%20class%3D%22EnlighterJSWrapper%20enlighterEnlighterJSWrapper%22%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Epublic%20onInit()%3A%20Promise%3CVOID%3E%20%7B%0A%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20emails%3A%20%5B%5D%2C%0A%20%20%20%20%20currentIndex%3A0%2C%0A%20%20%20%20%20currentEmail%3A%7B%7D%0A%20%20%20%7D%3B%0A%20%20%20this.cardNavigator.register(CARD_VIEW_REGISTRY_ID%2C%20()%20%3D%26gt%3B%20new%20CardView())%3B%0A%20%20%20this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID%2C%20()%20%3D%26gt%3B%20new%20QuickView())%3B%0A%20%20%20this.getOutlookData()%0A%20%20%20return%20Promise.resolve()%3B%0A%20%7D%3C%2FVOID%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Create%20a%20method%20to%20get%20data%20from%20Graph%20API%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EGo%20to%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3E%E2%80%9Csrc%5CadaptiveCardExtensions%5Cgraphdatademo%5CGraphdatademoAdaptiveCardExtension.ts%E2%80%9D%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3EImport%20the%20MSGraphClient%20using%20which%20we%20will%20make%20Graph%20API%20calls.%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Eimport%20%7B%20MSGraphClient%20%7D%20from%20'%40microsoft%2Fsp-http'%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EAdd%20a%20new%20method%20getOutlookData%20to%20make%20Graph%20API%20call%20and%20set%20State%20of%20currentEmail%20and%20emails%20from%20the%20return%20object.%3C%2FP%3E%0A%3CDIV%20class%3D%22EnlighterJSWrapper%20enlighterEnlighterJSWrapper%22%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Eprivate%20getOutlookData()%7B%0A%20%20%20%20%0A%20%20%20%20this.context.msGraphClientFactory.getClient().then((client%3A%20MSGraphClient)%3A%20void%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20client.api(%22%2Fme%2Fmailfolders%2FInbox%2Fmessages%22).get((error%2C%20messages%3A%20any)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20console.log(messages)%3B%0A%20%20%20%20%20%20%20%20this.setState(%7BcurrentEmail%3Amessages.value%5Bthis.state.currentIndex%5D%2Cemails%3Amessages.value%7D)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Modify%20Card%20View%20to%20show%20data%20using%20the%20State%20object%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EGo%20to%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3Esrc%5CadaptiveCardExtensions%5Cgraphdatademo%5CcardView%5CCardView.ts%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3EModify%20data%20method%20to%20set%20primaryText%20and%20Description%20as%20we%20have%20primary%20text%20card%20template.%3C%2FP%3E%0A%3CP%3EWe%20will%20use%20state%20object%20to%20read%20the%20subject%20and%20from%20the%20email%20address.%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Epublic%20get%20data()%3A%20IPrimaryTextCardParameters%20%7B%0A%20%20%20%20if(this.state.emails.length%20%26gt%3B0%20)%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20primaryText%3A%20%22Sub%3A%20%22%20%2B%20this.state.emails%5Bthis.state.currentIndex%5D.subject%2C%0A%20%20%20%20%20%20description%3A%20%22From%3A%20%22%20%2B%20this.state.emails%5Bthis.state.currentIndex%5D.from.emailAddress.address%0A%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20else%7B%0A%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20primaryText%3A%20%22Loading%22%2C%0A%20%20%20%20%20%20%20%20description%3A%20%22Loading%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Modify%20cardButtons%20methods%20to%20add%202%20buttons%20to%20navigate%20through%20email%20using%20previous%20and%20next%26nbsp%3B%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EGo%20to%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3Esrc%5CadaptiveCardExtensions%5Cgraphdatademo%5CcardView%5CCardView.ts%3C%2FEM%3E%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Epublic%20get%20cardButtons()%3A%20%5BICardButton%5D%20%7C%20%5BICardButton%2C%20ICardButton%5D%20%7C%20undefined%20%7B%0A%20%20%20const%20buttons%3A%20ICardButton%5B%5D%20%3D%20%5B%5D%3B%0A%20%20%20if%20(this.state.currentIndex%20%26gt%3B%200)%20%7B%0A%20%20%20%20%20buttons.push(%7B%0A%20%20%20%20%20%20%20title%3A%20'Previous'%2C%0A%20%20%20%20%20%20%20action%3A%20%7B%0A%20%20%20%20%20%20%20%20%20type%3A%20'Submit'%2C%0A%20%20%20%20%20%20%20%20%20parameters%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20id%3A%20'previous'%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D)%3B%0A%20%20%20%7D%0A%20%20%20if%20(this.state.currentIndex%20%26lt%3B%20this.state.emails.length%20-%201)%20%7B%0A%20%20%20%20%20buttons.push(%7B%0A%20%20%20%20%20%20%20title%3A%20'Next'%2C%0A%20%20%20%20%20%20%20action%3A%20%7B%0A%20%20%20%20%20%20%20%20%20type%3A%20'Submit'%2C%0A%20%20%20%20%20%20%20%20%20parameters%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20id%3A%20'next'%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D)%3B%0A%20%20%20%7D%0A%20%20%20return%20buttons%20as%20%5BICardButton%5D%20%7C%20%5BICardButton%2C%20ICardButton%5D%3B%0A%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EAdd%20onAction%20item%20method%20to%20handle%20the%20submit%20action%20type%20of%20previous%20and%20next%20button%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENote%20here%20using%20a%20case%20statement%20to%20increment%20or%20decrement%20the%20index%2C%20this%20will%20change%20the%20state%20object%20by%20modifying%20currentIndex%20and%20currentEmail%20and%20forcing%20to%20re-render%20the%20card%20view%20component.%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Epublic%20onAction(action%3A%20IActionArguments)%3A%20void%20%7B%0A%20%20%20if%20(action.type%20%3D%3D%3D%20'Submit')%20%7B%0A%20%20%20%20%20const%20%7B%20id%2C%20op%20%7D%20%3D%20action.data%3B%0A%20%20%20%20%20switch%20(id)%20%7B%0A%20%20%20%20%20%20%20case%20'previous'%3A%20%7B%0A%20%20%20%20%20%20%20%20%20this.setState(%7B%20currentIndex%3A%20this.state.currentIndex%20-%201%20%2C%20currentEmail%3Athis.state.emails%5Bthis.state.currentIndex%20-%201%5D%7D)%3B%0A%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20case%20'next'%3A%20%7B%0A%20%20%20%20%20%20%20%20%20this.setState(%7B%20currentIndex%3A%20this.state.currentIndex%20%2B%201%20%2C%20currentEmail%3Athis.state.emails%5Bthis.state.currentIndex%20%2B%201%5D%7D)%3B%0A%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20case%20'default'%20%3A%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%7D%0A%20%20%20%7D%0A%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Modify%20Quick%20view%20adaptive%20card%20JSON%20template%20to%20display%20details%20of%20the%20email.%26nbsp%3B%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EFirst%20thing%20we%20need%20to%20do%20is%20modify%20the%20QuickView%20Adaptive%20Card%20template%20json%20object.%20I%20have%20used%20%3CA%20href%3D%22https%3A%2F%2Fadaptivecards.io%2Fdesigner%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fadaptivecards.io%2Fdesigner%3C%2FA%3E%20to%20design%20the%20adaptive%20card%20and%20set%20the%20dynamic%20properties%20to%20set%20based%20on%20how%20the%20email%20object%20is%20coming%E2%80%A6%3C%2FP%3E%0A%3CP%3EModify%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3Esrc%5CadaptiveCardExtensions%5Cgraphdatademo%5CquickView%5Ctemplate%5CQuickViewTemplate.json%26nbsp%3B%3C%2FEM%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eto%20below%3C%2FP%3E%0A%3CP%3EIf%20you%20notice%20here%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EWe%20would%20be%20using%20message%20object%20from%20state%20to%20populate%20the%20dynamic%20values%E2%80%A6%3C%2FLI%3E%0A%3CLI%3EFor%20user%20photo%2C%20we%20are%20using%20the%20userphoto.aspx%20page%20and%20passing%20the%20sender%E2%80%99s%20email%20address.%20this%20is%20one%20of%20the%20way%20to%20get%20photo%3C%2FLI%3E%0A%3CLI%3EWe%20have%20also%20added%20one%20button%20in%20Quick%20view%20which%20will%20take%20user%20to%20target%20outlook%20email%20link%2C%20this%20we%20get%20from%20webLink%20property%20of%20email%20object.%3C%2FLI%3E%0A%3CLI%3ETo%20find%20list%20of%20properties%20returend%20by%20the%20email%20object%2C%20you%20can%20refer%20to%20this%26nbsp%3B%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fgraph%2Fapi%2Fresources%2Fmessage%3Fview%3Dgraph-rest-1.0%23properties%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Elink%3C%2FA%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3E%7B%0A%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22weight%22%3A%20%22Bolder%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22%24%7Bmessage.subject%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22wrap%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%22heading%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22ColumnSet%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22columns%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Column%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22items%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%22Person%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22%2F_layouts%2F15%2Fuserphoto.aspx%3Fsize%3DS%26amp%3Busername%3D%24%7Bmessage.from.emailAddress.address%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Small%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22auto%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Column%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22items%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22weight%22%3A%20%22Bolder%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22%24%7Bmessage.from.emailAddress.address%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22wrap%22%3A%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22spacing%22%3A%20%22None%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Created%20%7B%7BDATE(%24%7Bstring(message.sentDateTime)%7D%2C%20SHORT)%7D%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22isSubtle%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22wrap%22%3A%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22stretch%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22%24%7Bmessage.bodyPreview%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22wrap%22%3A%20true%0A%20%20%20%20%20%20%7D%0A%20%20%5D%2C%0A%20%20%22actions%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Action.OpenUrl%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22View%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22%24%7Bmessage.webLink%7D%22%0A%20%20%20%20%20%20%7D%0A%20%20%5D%2C%0A%20%20%22%24schema%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fschemas%2Fadaptive-card.json%22%2C%0A%20%20%22version%22%3A%20%221.3%22%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%3CSTRONG%3EStep%20Modify%20QuickView%20to%20pass%20the%20message%20object%20from%20state%20to%20Adaptive%20Card%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EGo%20to%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3Esrc%5CadaptiveCardExtensions%5Cgraphdatademo%5CquickView%5CQuickView.ts%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3EModify%20IQuickViewDate%20interface%20to%20hold%20the%20message%20object%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EStep%20Modify%20QuickView%20to%20pass%20the%20message%20object%20from%20state%20to%20Adaptive%20Card%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EGo%20to%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3Esrc%5CadaptiveCardExtensions%5Cgraphdatademo%5CquickView%5CQuickView.ts%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3EModify%20IQuickViewDate%20interface%20to%20hold%20the%20message%20object%5C%3C%2FP%3E%0A%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Eexport%20interface%20IQuickViewData%20%7B%0A%20%20message%3Aany%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EModify%20data()%20method%20to%20set%20and%20return%20the%20current%20message%20object%20from%20state%20property%20currentEmail%3C%2FP%3E%0A%3CDIV%20class%3D%22EnlighterJSWrapper%20enlighterEnlighterJSWrapper%22%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Epublic%20get%20data()%3A%20IQuickViewData%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20message%3A%20this.state.currentEmail%0A%20%20%20%20%7D%3B%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%3CSTRONG%3EStep%20%E2%80%93%20Testing%20the%20ACE%20component%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3ETesting%20the%20ACE%20component%20would%20be%20similar%20to%20how%20we%20test%20our%20SPFx%20web%20part%2C%20we%20will%20have%20to%20run%20the%20gulp%20serve%20command%20then%20open%20workbench%20to%20add%20the%20component%20created%20on%20the%20Page.%3C%2FP%3E%0A%3CP%3ERun%20below%20command%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Egulp%20serve%20-l%20--nobrowser%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EOpen%20a%20SharePoint%20Workbench%20in%20the%20browser%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fyourtenant.sharepoint.com%2Fsites%2Fmysites1%2F_layouts%2F15%2Fworkbench.aspx%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fyourtenant.sharepoint.com%2Fsites%2Fmysites1%2F_layouts%2F15%2Fworkbench.aspx%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EClick%20on%20Add%20icon%2C%20Click%20on%20the%20graphDataDemo%2C%3C%2FP%3E%0A%3CP%3EWe%20should%20see%20something%20like%20below%3C%2FP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1fa09cf8c2-768x338.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342157i374505BBB9A7DA9C%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1fa09cf8c2-768x338.png%22%20alt%3D%22img_61d1fa09cf8c2-768x338.png%22%20%2F%3E%3C%2FSPAN%3E%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3ENotice%20here%20that%20once%20you%20click%20Next%2C%20it%20loads%20the%20next%20email%20but%20it%20does%20not%20show%20the%20Prev%20button%2C%20this%20is%20because%20by%20default%20the%20Card%20Size%20is%20set%20to%20Medium%20in%20ACE%20properties%20configuration%2C%20click%20on%20Edit%20web%20part%20and%20chase%20the%20Card%20Size%20to%20Large%3C%2FP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1fa7f3080a-1024x343.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342158i9FAD70D0046FBAE7%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1fa7f3080a-1024x343.png%22%20alt%3D%22img_61d1fa7f3080a-1024x343.png%22%20%2F%3E%3C%2FSPAN%3E%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3ENow%20you%20should%20see%20something%20like%20below%3C%2FP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1fabba64be.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342159i46298011A600AE65%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1fabba64be.png%22%20alt%3D%22img_61d1fabba64be.png%22%20%2F%3E%3C%2FSPAN%3E%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3EYou%20can%20use%20Previous%20and%20Next%20to%20move%20around%20different%20emails.%20If%20you%20would%20have%20noticed%20we%20have%20written%20logic%20to%20handle%20that%20previous%20and%20next%20buttons%20will%20be%20visible%20based%20on%20item%20index%20and%20total%20email%20counts(by%20default%20we%20will%20only%20get%2010%20from%20Graph%20API).%20You%20can%20make%20this%20configurable%20in%20the%20property%20window%20and%20use%20this%20number%20to%20pass%20to%20Graph%20API%20GraphdatademoAdaptiveCardExtension.tx%20file%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EClick%20on%20any%20of%20the%20emails%20and%20we%20should%20see%20the%20email%20detail%3C%2FP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1fb4343467.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342160i135547B594D4CA12%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1fb4343467.png%22%20alt%3D%22img_61d1fb4343467.png%22%20%2F%3E%3C%2FSPAN%3E%3CP%3E%E2%80%83%3C%2FP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1fd38e908b.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342161i5AAB6A44C4B83690%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1fd38e908b.png%22%20alt%3D%22img_61d1fd38e908b.png%22%20%2F%3E%3C%2FSPAN%3E%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3EThat%E2%80%99s%20it%20for%20this%20article%2C%26nbsp%3BHope%20this%20helps..!!!%3C%2FP%3E%0A%3CP%3EHappy%20Coding..!!!%3C%2FP%3E%0A%3CP%3EThe%20source%20code%20for%20this%20article%20is%20available%20at%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fsiddharth-vaghasia%2Face-graphdata%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ethis%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Elocation%20for%20quick%20reference.%3C%2FP%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-3070982%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20this%20article%2C%20we%20will%20learn%20how%20to%20get%20data%20from%20Graph%20API%20and%20display%20it%20in%20SPFx%20Adaptive%20Card%20Extensions(ACEs).%20if%20you%20are%20new%20to%20ACEs%20then%20I%20would%20recommend%20going%20through%20my%20previous%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fsiddharthvaghasia.com%2F2021%2F12%2F29%2Fcreate-your-first-adaptive-card-extension-with-spfx%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20nofollow%22%3Earticle%26nbsp%3B%3C%2FA%3Ewhere%20I%20have%20covered%20the%20concept%20and%20basics%20of%20ACEs%20along%20with%20step%20by%20step%20tutorial%20on%20understanding%20how%20the%20ACEs%20components%20work%20together%20especially%20Card%20View%20and%20Quick%20View.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22img_61d1fb4343467.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F342160i135547B594D4CA12%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img_61d1fb4343467.png%22%20alt%3D%22img_61d1fb4343467.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3070982%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHow%20to%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Feb 06 2022 08:45 PM
Updated by: