Connecting SPFx to Viva Engage: A Guide to Custom Employee Communication Solutions

As more organizations move towards remote work, it is increasingly important to have effective communication and collaboration tools. Microsoft has recently introduced Viva Engage, a new employee communication and engagement platform that integrates with SharePoint. SharePoint Framework (SPFx) is a powerful tool that allows developers to create custom solutions for SharePoint. This blog post will explore how to connect SPFx to Viva Engage.

Step 1: Set up Viva Engage

Before connecting SPFx to Viva Engage, you need to set up Viva Engage in your SharePoint environment. To do this, follow these steps:

1. Go to your SharePoint admin center and select the “Viva Connections” option.
2. Click on “Add Connection”.
3. Enter the required information, such as your Viva Engage app’s name, URL, and logo.
4. Click “Save”.

Step 2: Add the Viva Engage API to your SPFx project

Next, you must add the Viva Engage API to your SPFx project. The API allows your SPFx solution to communicate with Viva Engage. To do this, follow these steps:

1. Open your SPFx project in your code editor.
2. Install the Viva Engage API package by running the following command in the terminal: npm install @microsoft/viva-engage-api
3. Import the Viva Engage API in your code by adding the following line to your TypeScript file: import { VivaEngageAPI } from ‘@microsoft/viva-engage-api’;

Step 3: Connect to Viva Engage using the API

Now that you have added the Viva Engage API to your SPFx project, you can connect to Viva Engage using the API. To do this, follow these steps:

• Instantiate the VivaEngageAPI class by adding the following code to your TypeScript file:

const vivaEngageAPI = new VivaEngageAPI({
    webPartId: this.context.instanceId.toString(),
    siteUrl: this.context.pageContext.site.absoluteUrl,
});

• Use the vivaEngageAPI instance to call the Viva Engage API methods. For example, to get the current user’s profile, you can use the following code:

const profile = await vivaEngageAPI.getUserProfile();
console.log(profile);

Step 4: Test your SPFx solution with Viva Engage

Finally, you should test your SPFx solution with Viva Engage to ensure everything is working correctly. To do this, follow these steps:

1. Deploy your SPFx solution to your SharePoint environment.
2. Navigate to the SharePoint page where your SPFx solution is deployed.
3. Verify that your SPFx solution is displayed correctly.
4. Use the Viva Engage app to test the functionality of your SPFx solution.

Conclusion

If you need help connecting SPFx to Viva Engage or any other SharePoint development needs, consider contacting Prakash Software Solutions Pvt Ltd. As a SharePoint development company based in the USA, they have a team of experienced developers who can help you create custom solutions that meet your business requirements. Whether you need to integrate with Viva Engage or build a custom SharePoint application, Prakash Software Solutions can provide the expertise and support you need. Contact them today to learn more about their SharePoint development services.