How to connect SPFx to Viva Engage

By João Ferreira Feb 18, 2023 Development 0 Comments

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.

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
   
3. From the SharePoint Application click on API Permissions and then Add a permission
   
4. From the Request API Permission blade select Yammer
   
5. Select user_userimpersonation and click Add permission
   
6. From the API permissions page click on Grant Admin consent, in the end the Yammer API must display a granted status
   

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("https://api.yammer.com").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(`https://api.yammer.com/api/v1/messages.json?limit=30&threaded=true`,
           HttpClient.configurations.v1,
           {
               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 => {
               console.log(err);
           });
     }
   

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.

Explore Solution on GitHub