Overview
With Microsoft Viva Engage (formerly Yammer) becoming a central hub for company-wide communication and community engagement, integrating its content directly into SharePoint through SPFx (SharePoint Framework) can provide a seamless user experience.
While Viva Engage content can be embedded using the out-of-the-box (OOTB) web part, it may not provide the flexibility and customization required for more complex or tailored use cases. That’s where SPFx steps in. With custom development, you can fetch and display posts from specific communities, apply filters, or even perform additional business logic as needed.
In this blog post, we will walk you through how to retrieve Viva Engage posts using SPFx and Microsoft Graph API. This is especially useful when the OOTB web part doesn't offer sufficient customization for your needs.
Prerequisites
Before diving into code, make sure you have the following ready:
- SPFx development environment set up
- Access to Microsoft 365 admin portal (to grant API permissions)
- Viva Engage license and active community
- Basic knowledge of React (optional, but helpful)
Step 1: Register Your App in Azure AD
To access Viva Engage data, you need permissions via Microsoft Graph API.
- Go to Azure Portal
- Navigate to Azure Active Directory > App registrations
- Click New registration
- Name your app (e.g., SPFxVivaEngageIntegration)
- Add redirect URI:
https://localhost:5432 - Once registered, go to API permissions > Add permission
- Choose APIs my organization uses and search for
Yammer - Select
Yammerand then Delegated permissions - Add:
user_impersonation - Click Grant admin consent
Step 2: Get Access Token
Here’s how to get a token for Yammer (Viva Engage) using AAD token provider in SPFx:
private async getViVaEngageToken(): Promise<void> {
try {
const tokenProvider = await this.props.spcontext.aadTokenProviderFactory.getTokenProvider();
const token = await tokenProvider.getToken("https://api.yammer.com");
this.setState(
{ vivaEngageToken: token },
this.getAllPostsfromGroups
);
} catch (error) {
console.error("Error getting token: ", error);
}
}
Step 3: Retrieve Group ID Using Community Name
This method fetches all groups and finds the group ID based on the community name.
private async getGroupIdByName(communityName: string): Promise<{ topLevelMessages: any[] }> {
try {
const response = await this.props.spcontext.httpClient.get(
`https://api.yammer.com/api/v1/groups.json`,
HttpClient.configurations.v1,
{
headers: {
Authorization: `Bearer ${this.state.vivaEngageToken}`,
"Content-type": "application/json",
},
}
);
const data = await response.json();
const group = data.find((g: any) => g.full_name === communityName);
if (group) {
return await this.getPosts(group.id);
} else {
console.warn("Community not found.");
return { topLevelMessages: [] };
}
} catch (error) {
console.error("Error fetching group ID: ", error);
return { topLevelMessages: [] };
}
}
Step 4: Retrieve Posts from Viva Engage
This method calls the messages API and returns only the top-level posts (ignores replies).
private async getPosts(communityId: string): Promise<{ topLevelMessages: any[] }> {
try {
const apiUrl = `https://api.yammer.com/api/v1/messages/in_group/${communityId}.json?threaded=true`;
const response = await this.props.spcontext.httpClient.get(
apiUrl,
HttpClient.configurations.v1,
{
headers: {
Authorization: `Bearer ${this.state.vivaEngageToken}`,
"Content-type": "application/json",
},
}
);
const data = await response.json();
const messages = data?.messages || [];
const topLevelMessages = messages.filter((msg: any) => !msg.replied_to_id);
return { topLevelMessages };
} catch (error) {
console.error("Error fetching posts: ", error);
return { topLevelMessages: [] };
}
}
Conclusion
By following the steps above, you can build a custom SPFx web part to pull Viva Engage posts using a community name and show them dynamically in your SharePoint site. This allows for a much more flexible and personalized experience beyond the OOTB web part.
You now have a streamlined way to:
- Authenticate with Azure AD
- Retrieve a Viva Engage community’s group ID using its name
- Fetch and return only the main posts (excluding replies)
This approach is perfect if you're building SPFx web parts or extensions to display real-time conversations and announcements from Viva Engage.
