Consume Graph API to Adaptive Card Extension (ACEs) SPFx component type

Published Aug 04 2021 03:14 AM 1,764 Views
New Contributor

Introduction
SPFx is getting matured platform day by day to make extended application to M365 platform. Recently, SPFx 1.13.0 Beta launched with extensive capabilities to extend modern employee experience through ACEs. ACEs is a type of component which is stand for  Adaptive Cards Extensions.
ACEs come up with extensive possibilities to make a component which will be enabled customization to modern employee experience in Microsoft viva connection dashboard.
Learning Objectives
1. Create SPFx using Adaptive Card Extension

2. Consume Graph API in ACEs project
3. Render My team in Card View in ACEs

4. View user details in Quick View in ACEs

Prerequisites for SPFx ACEs Project:

  1. Node.js v12 LTS
  2. Gulp v4
  3. Yeoman v3
  4. Set up SPFx Development Environment

Install latest beta release using below code

 

npm install /generator-sharepoint@next --global

 

Create SPFx using Adaptive Card Extension

Open node command prompt

Reach to your desire location where you want to create a solution

Run below command

 

yo @microsoft/sharepoint

 

When prompted, enter the below values to each parameter.
People1.jpg

 Once all required packages are downloaded then you will get a message as below.
People2.jpg

Now open a solution in visual studio code or editor that you want to use.

The below command is used to open the solution in VS Code.

 

code .

 

Install require packages to connect graph in solution.

 

npm install @pnp/sp @pnp/graph @pnp/logging

 

Consume Graph API in ACEs project
Create folder called "Models" in "..\src\".
Create file with name "mmp.models.ts" in folder models at location "..\src\models\".
Copy below code and paste it in file.

 

export interface IMyTeam {
  userPrincipalName: string;
  displayName: string;
  givenName: string;
  id: string;
  mobilePhone: string;
  officeLocation: string;
  preferredLanguage: string;
  surname: string;
  jobTitle: string;
  mail: string;
}

export interface IConfig {
  members: IMyTeam[];
}

export class Config implements IConfig {
  constructor(
    public members: IMyTeam[] = []
  ) { }
}

 

Create a folder called Services in "..\src\".
Create a new file called "mmp.service.ts" in Folder "Services" at location "..\src\Services".
Copy below code to it.

 

import { Logger, LogLevel } from "@pnp/logging";
import "@pnp/graph/users";
import "@pnp/graph/onedrive";
import "@pnp/graph/groups";
import { graph, graphGet, GraphQueryable } from "@pnp/graph";
import forEach from "lodash/forEach";
import { IConfig, Config, IMyTeam } from "../models/mmp.models";
export interface IMMPService {
    GenerateConfig: () => Promise<IConfig>;
}

export class MMPServie implements IMMPService {
    private LOG_SOURCE: string = "MMPServie";
    constructor() {

    }
    public async GenerateConfig(): Promise<IConfig> {
        let mmpConfig: IConfig = null;
        try {
            mmpConfig = new Config();
            mmpConfig.members = await this._directReportsToMe();
        } catch (error) {
            Logger.write(`${this.LOG_SOURCE} (GenerateConfig) - ${error} - `, LogLevel.Error);
        }
        return mmpConfig;
    }

    private async _directReportsToMe(): Promise<IMyTeam[]> {
        let returnValue: IMyTeam[] = [];
        try {
            let directReports = await graph.me.directReports();
            if (directReports.length > 0) {
                forEach(directReports, (o: any) => {
                    returnValue.push({
                        displayName: o.displayName,
                        id: o.id,
                        jobTitle: o.jobTitle,
                        givenName: o.givenName,
                        mail: o.mail,
                        mobilePhone: o.mobilePhone,
                        officeLocation: o.officeLocation,
                        preferredLanguage: o.preferredLanguage,
                        surname: o.surname,
                        userPrincipalName: o.userPrincipalName 
                    });
                });
            }
        } catch (error) {
            Logger.write(`${this.LOG_SOURCE} (_directReportsToMe) - ${error} - `, LogLevel.Error);
        }
        return returnValue;
    }
}

 

Create a new file called "service.ts" in folder "Services" and add below code in that.

 

import { IConfig, IMyTeam } from "../models/mmp.models";
import { Logger, LogLevel } from "@pnp/logging";
import { IMMPService, MMPServie } from "../services/mmp.service";
export interface IService {
    Init(): Promise<void>;
}

export class Service implements IService {
    private LOG_SOURCE: string = "Service";
    private _mmpService: IMMPService = new MMPServie();
    private _ready: boolean = false;
    private _currentConfig: IConfig = null;
    public async Init(): Promise<void> {
        await this._getConfig();
    }
    public get Ready(): boolean {
        return this._ready;
    }
    public get Config(): IConfig {
        return this._currentConfig;
    }
    private async _getConfig(): Promise<void> {
        try {
            this._currentConfig = await this._mmpService.GenerateConfig();
            this._ready = true;
        } catch (error) {
            Logger.write(`${this.LOG_SOURCE} (_getConfig) - ${error} - `, LogLevel.Error);
        }

    }
}

 

Open file "MyPeopleAdaptiveCardExtension.ts" at location "..\src\adaptiveCardExtensions\myPeople\MyPeopleAdaptiveCardExtension.ts"
Import below statement on top.

 

import { sp } from "@pnp/sp";
import { graph } from "@pnp/graph";
import { Logger, LogLevel, ConsoleListener } from "@pnp/logging";
import { IConfig, IMyTeam } from '../../models/mmp.models';
import { Service } from "../../services/service";

 

 Update Interface with below code

 

export interface IMyPeopleAdaptiveCardExtensionState {
  currentIndex:number;
  currentConfig: IConfig;
}

 

Define private variable in class.

 

 private LOG_SOURCE: string = "MyPeopleAdaptiveCardExtension";
  private service: Service = new Service();

 

Update OnInit() with below lines of code

 

public async onInit(): Promise<void> {
    Logger.subscribe(new ConsoleListener());
    Logger.activeLogLevel = LogLevel.Info;
    try {
      sp.setup({ spfxContext: this.context });
      graph.setup({ spfxContext: this.context });
      await this.service.Init();
      this.state = {
        currentIndex:0,
        currentConfig: this.service.Config
      };
    } catch (error) {
      Logger.write(`${this.LOG_SOURCE} (_onInit) - ${error} - `, LogLevel.Error);
    }
    this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
    this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
    return Promise.resolve();
  }

 

Render My team in Card View in ACEs

Open file Cardview.ts at location "..\src\adaptiveCardExtensions\myPeople\cardView\CardView.ts".
Update three methods(Cardbuttons(), data() and onCardSelection()) with below code.

 

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',
            op: -1
          }
        }
      });
    }
    if (this.state.currentIndex < this.state.currentConfig.members.length - 1) {
      buttons.push({
        title: 'Next',
        action: {
          type: 'Submit',
          parameters: {
            id: 'next',
            op: 1 // Increment the index
          }
        }
      });
      return buttons as [ICardButton] | [ICardButton, ICardButton];
    }
  }

  public get data(): IBasicCardParameters {
    const { givenName, mail,displayName } = this.state.currentConfig.members[this.state.currentIndex];
    return {
      primaryText: `Display Name: ${displayName} | mail: ${mail}`, 
    };
  }

  public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
    return {
      type: 'QuickView',
      parameters: {
        view: QUICK_VIEW_REGISTRY_ID,
      }
    };
  }

 

View user details in Quick View in ACEs
QuickView.ts file is responsible to render user details on card click.
Open Quickview.ts file and import models in it and add new property to IQuickViewData

 

import { IMyTeam } from '../../../models/mmp.models';

export interface IQuickViewData {
  subTitle: string;
  title: string;
  description: string;
  item: IMyTeam; // Add it 
}

 

Update Data method in QuickView.ts file with below code.

 

 public get data(): IQuickViewData {
    return {
      subTitle: strings.SubTitle,
      title: strings.Title,
      description: this.properties.description,
      item: this.state.currentConfig.members[this.state.currentIndex]
    };
  }

 

Update template() in Quickview.ts file with custom JSON format to display user information.

 

public get template(): ISPFxAdaptiveCard {
    return {
      "type": "AdaptiveCard",
      "version": "1.0",
      "body": [
        {
          "type": "Container",
          "$data": "${item}",
          "items": [
            {
              "type": "TextBlock",
              "weight": "Bolder",
              "text": "Display Name: ${displayName}",
              "color":"attention"
            },
            {
              "type": "Container",
              "spacing": "Small",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Surname: ${surname}",
                  "spacing": "Small" 
                },
                {
                  "type": "TextBlock",
                  "text": "Given Name: ${givenName}",
                  "spacing": "Small" 
                },
                {
                  "type": "TextBlock",
                  "text": "Mail: ${mail}",
                  "spacing": "Small",
                  "color": "good",
                }
              ]
            }
          ],
          "separator": true
        }
      ],
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
    }
  }

 

Set permission to access graph API from SPFx.
open package-solution.json file at location " ..\Manageteam\config\package-solution.json" and add below code.

 

 "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Directory.ReadWrite.All"
      }
    ]}

 

Run solution using below command

 

gulp serve -l --nobrowser

 

Open URL https://contoso.sharepoint.com/_layouts/workbench.aspx
Add your extension using click on add webpart button.
1.gif

 Conclusion
In this article, We explored how to create ACEs solution using SPFx, How to Consume Graph API in ACEs, How to render custom adaptive card using customization of JSON and add multiple button in card view.

%3CLINGO-SUB%20id%3D%22lingo-sub-2603659%22%20slang%3D%22en-US%22%3EConsume%20Graph%20API%20to%20Adaptive%20Card%20Extension%20(ACEs)%20SPFx%20component%20type%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2603659%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3EIntroduction%3CBR%20%2F%3E%3C%2FSTRONG%3ESPFx%20is%20getting%20matured%20platform%20day%20by%20day%20to%20make%20extended%20application%20to%20M365%20platform.%20Recently%2C%20SPFx%201.13.0%20Beta%20launched%20with%20extensive%20capabilities%20to%20extend%20modern%20employee%20experience%20through%20ACEs.%20ACEs%20is%20a%20type%20of%20component%20which%20is%20stand%20for%26nbsp%3B%20Adaptive%20Cards%20Extensions.%3CBR%20%2F%3EACEs%20come%20up%20with%20extensive%20possibilities%20to%20make%20a%20component%20which%20will%20be%20enabled%20customization%20to%20modern%20employee%20experience%20in%20Microsoft%20viva%20connection%20dashboard.%3CBR%20%2F%3E%3CSTRONG%3ELearning%20Objectives%3C%2FSTRONG%3E%3CBR%20%2F%3E1.%20Create%20SPFx%20using%20Adaptive%20Card%20Extension%3C%2FP%3E%0A%3CP%3E2.%20Consume%20Graph%20API%20in%20ACEs%20project%3CBR%20%2F%3E3.%20Render%20My%20team%20in%20Card%20View%20in%20ACEs%3C%2FP%3E%0A%3CP%3E4.%20View%20user%20details%20in%20Quick%20View%20in%20ACEs%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSTRONG%3EPrerequisites%20for%20SPFx%20ACEs%20Project%3A%3C%2FSTRONG%3E%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fnodejs.org%2Fen%2Fblog%2Frelease%2Fv12.13.0%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ENode.js%20v12%20LTS%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3EGulp%20v4%3C%2FLI%3E%0A%3CLI%3EYeoman%20v3%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fset-up-your-development-environment%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ESet%20up%20SPFx%20Development%20Environment%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%3CSPAN%3EInstall%20latest%20beta%20release%20using%20below%20code%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%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%3CU%3E%3CSTRONG%3ECreate%20SPFx%20using%20Adaptive%20Card%20Extension%3C%2FSTRONG%3E%3C%2FU%3E%3C%2FP%3E%0A%3CP%3EOpen%20node%20command%20prompt%3C%2FP%3E%0A%3CP%3EReach%20to%20your%20desire%20location%20where%20you%20want%20to%20create%20a%20solution%3C%2FP%3E%0A%3CP%3ERun%20below%20command%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eyo%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F41501%22%20target%3D%22_blank%22%3E%40microsoft%3C%2FA%3E%2Fsharepoint%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EWhen%20prompted%2C%20enter%20the%20below%20values%20to%20each%20parameter.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22People1.jpg%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F300117i5AAAA3EEA67B2886%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22People1.jpg%22%20alt%3D%22People1.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3CSPAN%3EOnce%20all%20required%20packages%20are%20downloaded%20then%20you%20will%20get%20a%20message%20as%20below.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22People2.jpg%22%20style%3D%22width%3A%20695px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F300118iF000A8F1E3649FE1%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22People2.jpg%22%20alt%3D%22People2.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3ENow%20open%20a%20solution%20in%20visual%20studio%20code%20or%20editor%20that%20you%20want%20to%20use.%3C%2FP%3E%0A%3CP%3EThe%20below%20command%20is%20used%20to%20open%20the%20solution%20in%20VS%20Code.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Ecode%20.%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EInstall%20require%20packages%20to%20connect%20graph%20in%20solution.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Enpm%20install%20%40pnp%2Fsp%20%40pnp%2Fgraph%20%40pnp%2Flogging%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CU%3E%3CSTRONG%3EConsume%20Graph%20API%20in%20ACEs%20project%3C%2FSTRONG%3E%3C%2FU%3E%3CBR%20%2F%3ECreate%20folder%20called%20%22Models%22%20in%20%22..%5Csrc%5C%22.%3CBR%20%2F%3ECreate%20file%20with%20name%20%22mmp.models.ts%22%20in%20folder%20models%20at%20location%20%22..%5Csrc%5Cmodels%5C%22.%3CBR%20%2F%3ECopy%20below%20code%20and%20paste%20it%20in%20file.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eexport%20interface%20IMyTeam%20%7B%0A%20%20userPrincipalName%3A%20string%3B%0A%20%20displayName%3A%20string%3B%0A%20%20givenName%3A%20string%3B%0A%20%20id%3A%20string%3B%0A%20%20mobilePhone%3A%20string%3B%0A%20%20officeLocation%3A%20string%3B%0A%20%20preferredLanguage%3A%20string%3B%0A%20%20surname%3A%20string%3B%0A%20%20jobTitle%3A%20string%3B%0A%20%20mail%3A%20string%3B%0A%7D%0A%0Aexport%20interface%20IConfig%20%7B%0A%20%20members%3A%20IMyTeam%5B%5D%3B%0A%7D%0A%0Aexport%20class%20Config%20implements%20IConfig%20%7B%0A%20%20constructor(%0A%20%20%20%20public%20members%3A%20IMyTeam%5B%5D%20%3D%20%5B%5D%0A%20%20)%20%7B%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ECreate%20a%20folder%20called%20Services%20in%20%22..%5Csrc%5C%22.%3CBR%20%2F%3ECreate%20a%20new%20file%20called%20%22mmp.service.ts%22%20in%20Folder%20%22Services%22%20at%20location%20%22..%5Csrc%5CServices%22.%3CBR%20%2F%3ECopy%20below%20code%20to%20it.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%7B%20Logger%2C%20LogLevel%20%7D%20from%20%22%40pnp%2Flogging%22%3B%0Aimport%20%22%40pnp%2Fgraph%2Fusers%22%3B%0Aimport%20%22%40pnp%2Fgraph%2Fonedrive%22%3B%0Aimport%20%22%40pnp%2Fgraph%2Fgroups%22%3B%0Aimport%20%7B%20graph%2C%20graphGet%2C%20GraphQueryable%20%7D%20from%20%22%40pnp%2Fgraph%22%3B%0Aimport%20forEach%20from%20%22lodash%2FforEach%22%3B%0Aimport%20%7B%20IConfig%2C%20Config%2C%20IMyTeam%20%7D%20from%20%22..%2Fmodels%2Fmmp.models%22%3B%0Aexport%20interface%20IMMPService%20%7B%0A%20%20%20%20GenerateConfig%3A%20()%20%3D%26gt%3B%20Promise%3CICONFIG%3E%3B%0A%7D%0A%0Aexport%20class%20MMPServie%20implements%20IMMPService%20%7B%0A%20%20%20%20private%20LOG_SOURCE%3A%20string%20%3D%20%22MMPServie%22%3B%0A%20%20%20%20constructor()%20%7B%0A%0A%20%20%20%20%7D%0A%20%20%20%20public%20async%20GenerateConfig()%3A%20Promise%3CICONFIG%3E%20%7B%0A%20%20%20%20%20%20%20%20let%20mmpConfig%3A%20IConfig%20%3D%20null%3B%0A%20%20%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20mmpConfig%20%3D%20new%20Config()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20mmpConfig.members%20%3D%20await%20this._directReportsToMe()%3B%0A%20%20%20%20%20%20%20%20%7D%20catch%20(error)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Logger.write(%60%24%7Bthis.LOG_SOURCE%7D%20(GenerateConfig)%20-%20%24%7Berror%7D%20-%20%60%2C%20LogLevel.Error)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20return%20mmpConfig%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20private%20async%20_directReportsToMe()%3A%20Promise%3CIMYTEAM%3E%20%7B%0A%20%20%20%20%20%20%20%20let%20returnValue%3A%20IMyTeam%5B%5D%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20let%20directReports%20%3D%20await%20graph.me.directReports()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(directReports.length%20%26gt%3B%200)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20forEach(directReports%2C%20(o%3A%20any)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20returnValue.push(%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%20displayName%3A%20o.displayName%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%20id%3A%20o.id%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%20jobTitle%3A%20o.jobTitle%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%20givenName%3A%20o.givenName%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%20mail%3A%20o.mail%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%20mobilePhone%3A%20o.mobilePhone%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%20officeLocation%3A%20o.officeLocation%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%20preferredLanguage%3A%20o.preferredLanguage%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%20surname%3A%20o.surname%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%20userPrincipalName%3A%20o.userPrincipalName%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%20catch%20(error)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Logger.write(%60%24%7Bthis.LOG_SOURCE%7D%20(_directReportsToMe)%20-%20%24%7Berror%7D%20-%20%60%2C%20LogLevel.Error)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20return%20returnValue%3B%0A%20%20%20%20%7D%0A%7D%3C%2FIMYTEAM%3E%3C%2FICONFIG%3E%3C%2FICONFIG%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ECreate%20a%20new%20file%20called%20%22service.ts%22%20in%20folder%20%22Services%22%20and%20add%20below%20code%20in%20that.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%7B%20IConfig%2C%20IMyTeam%20%7D%20from%20%22..%2Fmodels%2Fmmp.models%22%3B%0Aimport%20%7B%20Logger%2C%20LogLevel%20%7D%20from%20%22%40pnp%2Flogging%22%3B%0Aimport%20%7B%20IMMPService%2C%20MMPServie%20%7D%20from%20%22..%2Fservices%2Fmmp.service%22%3B%0Aexport%20interface%20IService%20%7B%0A%20%20%20%20Init()%3A%20Promise%3CVOID%3E%3B%0A%7D%0A%0Aexport%20class%20Service%20implements%20IService%20%7B%0A%20%20%20%20private%20LOG_SOURCE%3A%20string%20%3D%20%22Service%22%3B%0A%20%20%20%20private%20_mmpService%3A%20IMMPService%20%3D%20new%20MMPServie()%3B%0A%20%20%20%20private%20_ready%3A%20boolean%20%3D%20false%3B%0A%20%20%20%20private%20_currentConfig%3A%20IConfig%20%3D%20null%3B%0A%20%20%20%20public%20async%20Init()%3A%20Promise%3CVOID%3E%20%7B%0A%20%20%20%20%20%20%20%20await%20this._getConfig()%3B%0A%20%20%20%20%7D%0A%20%20%20%20public%20get%20Ready()%3A%20boolean%20%7B%0A%20%20%20%20%20%20%20%20return%20this._ready%3B%0A%20%20%20%20%7D%0A%20%20%20%20public%20get%20Config()%3A%20IConfig%20%7B%0A%20%20%20%20%20%20%20%20return%20this._currentConfig%3B%0A%20%20%20%20%7D%0A%20%20%20%20private%20async%20_getConfig()%3A%20Promise%3CVOID%3E%20%7B%0A%20%20%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this._currentConfig%20%3D%20await%20this._mmpService.GenerateConfig()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20this._ready%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%7D%20catch%20(error)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Logger.write(%60%24%7Bthis.LOG_SOURCE%7D%20(_getConfig)%20-%20%24%7Berror%7D%20-%20%60%2C%20LogLevel.Error)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%7D%0A%7D%3C%2FVOID%3E%3C%2FVOID%3E%3C%2FVOID%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOpen%20file%20%22MyPeopleAdaptiveCardExtension.ts%22%20at%20location%20%22..%5Csrc%5CadaptiveCardExtensions%5CmyPeople%5CMyPeopleAdaptiveCardExtension.ts%22%3CBR%20%2F%3EImport%20below%20statement%20on%20top.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%7B%20sp%20%7D%20from%20%22%40pnp%2Fsp%22%3B%0Aimport%20%7B%20graph%20%7D%20from%20%22%40pnp%2Fgraph%22%3B%0Aimport%20%7B%20Logger%2C%20LogLevel%2C%20ConsoleListener%20%7D%20from%20%22%40pnp%2Flogging%22%3B%0Aimport%20%7B%20IConfig%2C%20IMyTeam%20%7D%20from%20'..%2F..%2Fmodels%2Fmmp.models'%3B%0Aimport%20%7B%20Service%20%7D%20from%20%22..%2F..%2Fservices%2Fservice%22%3B%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3BUpdate%20Interface%20with%20below%20code%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eexport%20interface%20IMyPeopleAdaptiveCardExtensionState%20%7B%0A%20%20currentIndex%3Anumber%3B%0A%20%20currentConfig%3A%20IConfig%3B%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EDefine%20private%20variable%20in%20class.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%20private%20LOG_SOURCE%3A%20string%20%3D%20%22MyPeopleAdaptiveCardExtension%22%3B%0A%20%20private%20service%3A%20Service%20%3D%20new%20Service()%3B%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EUpdate%20OnInit()%20with%20below%20lines%20of%20code%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Epublic%20async%20onInit()%3A%20Promise%3CVOID%3E%20%7B%0A%20%20%20%20Logger.subscribe(new%20ConsoleListener())%3B%0A%20%20%20%20Logger.activeLogLevel%20%3D%20LogLevel.Info%3B%0A%20%20%20%20try%20%7B%0A%20%20%20%20%20%20sp.setup(%7B%20spfxContext%3A%20this.context%20%7D)%3B%0A%20%20%20%20%20%20graph.setup(%7B%20spfxContext%3A%20this.context%20%7D)%3B%0A%20%20%20%20%20%20await%20this.service.Init()%3B%0A%20%20%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20%20%20currentIndex%3A0%2C%0A%20%20%20%20%20%20%20%20currentConfig%3A%20this.service.Config%0A%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%7D%20catch%20(error)%20%7B%0A%20%20%20%20%20%20Logger.write(%60%24%7Bthis.LOG_SOURCE%7D%20(_onInit)%20-%20%24%7Berror%7D%20-%20%60%2C%20LogLevel.Error)%3B%0A%20%20%20%20%7D%0A%20%20%20%20this.cardNavigator.register(CARD_VIEW_REGISTRY_ID%2C%20()%20%3D%26gt%3B%20new%20CardView())%3B%0A%20%20%20%20this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID%2C%20()%20%3D%26gt%3B%20new%20QuickView())%3B%0A%20%20%20%20return%20Promise.resolve()%3B%0A%20%20%7D%3C%2FVOID%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CU%3E%3CSTRONG%3ERender%20My%20team%20in%20Card%20View%20in%20ACEs%3C%2FSTRONG%3E%3C%2FU%3E%3C%2FP%3E%0A%3CP%3EOpen%20file%20Cardview.ts%20at%20location%20%22..%5Csrc%5CadaptiveCardExtensions%5CmyPeople%5CcardView%5CCardView.ts%22.%3CBR%20%2F%3EUpdate%20three%20methods(Cardbuttons()%2C%20data()%20and%20onCardSelection())%20with%20below%20code.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%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%20%20const%20buttons%3A%20ICardButton%5B%5D%20%3D%20%5B%5D%3B%0A%20%20%20%20if%20(this.state.currentIndex%20%26gt%3B%200)%20%7B%0A%20%20%20%20%20%20buttons.push(%7B%0A%20%20%20%20%20%20%20%20title%3A%20'Previous'%2C%0A%20%20%20%20%20%20%20%20action%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20type%3A%20'Submit'%2C%0A%20%20%20%20%20%20%20%20%20%20parameters%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20'previous'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20op%3A%20-1%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(this.state.currentIndex%20%26lt%3B%20this.state.currentConfig.members.length%20-%201)%20%7B%0A%20%20%20%20%20%20buttons.push(%7B%0A%20%20%20%20%20%20%20%20title%3A%20'Next'%2C%0A%20%20%20%20%20%20%20%20action%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20type%3A%20'Submit'%2C%0A%20%20%20%20%20%20%20%20%20%20parameters%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20'next'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20op%3A%201%20%2F%2F%20Increment%20the%20index%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20return%20buttons%20as%20%5BICardButton%5D%20%7C%20%5BICardButton%2C%20ICardButton%5D%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20public%20get%20data()%3A%20IBasicCardParameters%20%7B%0A%20%20%20%20const%20%7B%20givenName%2C%20mail%2CdisplayName%20%7D%20%3D%20this.state.currentConfig.members%5Bthis.state.currentIndex%5D%3B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20primaryText%3A%20%60Display%20Name%3A%20%24%7BdisplayName%7D%20%7C%20mail%3A%20%24%7Bmail%7D%60%2C%20%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20public%20get%20onCardSelection()%3A%20IQuickViewCardAction%20%7C%20IExternalLinkCardAction%20%7C%20undefined%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20type%3A%20'QuickView'%2C%0A%20%20%20%20%20%20parameters%3A%20%7B%0A%20%20%20%20%20%20%20%20view%3A%20QUICK_VIEW_REGISTRY_ID%2C%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%3B%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CU%3E%3CSTRONG%3E%20View%20user%20details%20in%20Quick%20View%20in%3C%2FSTRONG%3E%20ACEs%3C%2FU%3E%3CBR%20%2F%3EQuickView.ts%20file%20is%20responsible%20to%20render%20user%20details%20on%20card%20click.%3CBR%20%2F%3EOpen%20Quickview.ts%20file%20and%20import%20models%20in%20it%20and%20add%20new%20property%20to%20IQuickViewData%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Eimport%20%7B%20IMyTeam%20%7D%20from%20'..%2F..%2F..%2Fmodels%2Fmmp.models'%3B%0A%0Aexport%20interface%20IQuickViewData%20%7B%0A%20%20subTitle%3A%20string%3B%0A%20%20title%3A%20string%3B%0A%20%20description%3A%20string%3B%0A%20%20item%3A%20IMyTeam%3B%20%2F%2F%20Add%20it%20%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EUpdate%20Data%20method%20in%20QuickView.ts%20file%20with%20below%20code.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%20public%20get%20data()%3A%20IQuickViewData%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20subTitle%3A%20strings.SubTitle%2C%0A%20%20%20%20%20%20title%3A%20strings.Title%2C%0A%20%20%20%20%20%20description%3A%20this.properties.description%2C%0A%20%20%20%20%20%20item%3A%20this.state.currentConfig.members%5Bthis.state.currentIndex%5D%0A%20%20%20%20%7D%3B%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EUpdate%20template()%20in%20Quickview.ts%20file%20with%20custom%20JSON%20format%20to%20display%20user%20information.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Epublic%20get%20template()%3A%20ISPFxAdaptiveCard%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%20%20%22version%22%3A%20%221.0%22%2C%0A%20%20%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Container%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22%24data%22%3A%20%22%24%7Bitem%7D%22%2C%0A%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%7B%0A%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%22weight%22%3A%20%22Bolder%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Display%20Name%3A%20%24%7BdisplayName%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%22attention%22%0A%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%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Container%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22spacing%22%3A%20%22Small%22%2C%0A%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%7B%0A%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%22text%22%3A%20%22Surname%3A%20%24%7Bsurname%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22spacing%22%3A%20%22Small%22%20%0A%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%7B%0A%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%22text%22%3A%20%22Given%20Name%3A%20%24%7BgivenName%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22spacing%22%3A%20%22Small%22%20%0A%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%7B%0A%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%22text%22%3A%20%22Mail%3A%20%24%7Bmail%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22spacing%22%3A%20%22Small%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22good%22%2C%0A%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%5D%0A%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%2C%0A%20%20%20%20%20%20%20%20%20%20%22separator%22%3A%20true%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%22%24schema%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fschemas%2Fadaptive-card.json%22%0A%20%20%20%20%7D%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESet%20permission%20to%20access%20graph%20API%20from%20SPFx.%3CBR%20%2F%3Eopen%20package-solution.json%20file%20at%20location%20%22%20..%5CManageteam%5Cconfig%5Cpackage-solution.json%22%20and%20add%20below%20code.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%20%22webApiPermissionRequests%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22resource%22%3A%20%22Microsoft%20Graph%22%2C%0A%20%20%20%20%20%20%20%20%22scope%22%3A%20%22Directory.ReadWrite.All%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ERun%20solution%20using%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%3Egulp%20serve%20-l%20--nobrowser%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOpen%20URL%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fcontoso.sharepoint.com%2F_layouts%2Fworkbench.aspx%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fcontoso.sharepoint.com%2F_layouts%2Fworkbench.aspx%3C%2FA%3E%3CBR%20%2F%3EAdd%20your%20extension%20using%20click%20on%20add%20webpart%20button.%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%221.gif%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F300121i5CBF5831FDE3426F%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%221.gif%22%20alt%3D%221.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3CU%3E%3CSTRONG%3EConclusion%3CBR%20%2F%3E%3C%2FSTRONG%3E%3C%2FU%3EIn%20this%20article%2C%20We%20explored%20how%20to%20create%20ACEs%20solution%20using%20SPFx%2C%20How%20to%20Consume%20Graph%20API%20in%20ACEs%2C%20How%20to%20render%20custom%20adaptive%20card%20using%20customization%20of%20JSON%20and%20add%20multiple%20button%20in%20card%20view.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2603659%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EGetting%20started%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EHow%20to%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Aug 03 2021 03:39 AM
Updated by: