How to connect SPFx to Viva Engage

Microsoft has a lot of application under Microsoft 365 but unfortunately not all of them have API endpoints available in Microsoft Graph.

Yammer now rebranded as Viva Engage is one of those applications and in this article I’ll explain you how to connect old API from a SPFx solution that you can use to build web parts, extensions, Teams apps or ACE cards for Viva Connections.

Connect SPFx to Viva Engage

Grant Viva Engage permissions

In order to consume information form the Yammer/Viva Engage API we will need to grant the permissions to the modern SharePoint application by doing the following:

  1. Open the Azure Poral and go to Azure Active Directory followed by App Registrations and then All Applications
  2. Open the SharePoint Online Client Extensibility Web Application Principal
    Connect SPFx to Viva Engage
  3. From the SharePoint Application click on API Permissions and then Add a permission
    Connect SPFx to Viva Engage
  4. From the Request API Permission blade select Yammer
    Connect SPFx to Viva Engage
  5. Select user_userimpersonation and click Add permission
    Connect SPFx to Viva Engage
  6. From the API permissions page click on Grant Admin consent, in the end the Yammer API must display a granted status
    Connect SPFx to Viva Engage

Consume Viva Engage API from SPFx

To get content from the Yammer / Viva Engage API first you need to get a token to then be able to query the endpoints and get data or make posts to Viva Engage.

The Yammer API as mentioned before is old and does not cover all the new features supported by the platform, I recommend you to check the official documentation available here before jumping into a new project to make sure that what you are trying to do is actually supported.

Just to demonstrate how it works I’ll use a SPFx web part that is also available on my GitHub to show information from Viva Engage in SharePoint:

  1. In the main web part file start by adding the following imports
    import { AadTokenProvider, HttpClient, HttpClientResponse} from '@microsoft/sp-http';
  2. Create an async function to get the API token
      private async getViVaEngageToken(){
        const tokenProvider: AadTokenProvider = await this.context.aadTokenProviderFactory.getTokenProvider();    
        await tokenProvider.getToken("").then(async token => {
          this.vivaEngageToken = token;
  3. Change the onInit method to async and call the token function
  4. Use the token to make queries to the endpoint, in the example below I’m getting the latest posts from Viva Engage
      private async getPosts() {
        let tempData: any;
        await this.context.httpClient.get(``,
                headers: {
                "Authorization": `Bearer ${this.vivaEngageToken}`,
                'Content-type': 'application/json'
            ).then((response: HttpClientResponse) => {
                return response.json();
            }).then((data: object) => {            
                tempData = data;
                tempData.messages.forEach((message: any) => {   
                  this.vivaEngagePosts += `${message.body.plain}`;                               
            }, (err: any): void => {

In the animation you can see how it works, the latest posts are displayed in the SharePoint page as links and on click they redirect the user to the original content. If you want to give it a try you can find the link for the GitHub project at the end of the article.

Connect SPFx to Viva Engage

Explore Solution on GitHub

No comments yet

Leave a Reply

I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: