Microsoft Viva Connections presents a curated experience and insights into the organizational culture to engage employees by bringing together news, announcements, and resources. The dashboard offers a consistent experience across mobile and desktop devices.
In this chapter, we will extend Viva Connections with the SharePoint Framework (SPFx) to meet custom business scenarios. This chapter assumes prior experience with SPFx.
SPFx provides extensibility for Viva Connections by implementing web parts, application customizers, and adaptive card extensions.
The Need for Extensibility
The dashboard provides a consistent experience across desktop and mobile devices. The dashboard is authored by placing cards on it. The cards provide a flexible way for employees to get quick updates, keep a list of their tasks, and complete the tasks from a single interface.
Various first-party card types available from Microsoft (including Web link, Assigned tasks, Teams App, Shifts, Approvals, Card designer, etc.) make it easy to present cards to the users. Users can take action on a card to complete their tasks.
The Card designer is a special type of card that offers low-code extensibility to author JSON-based cards with more customization options.
Various partners and ISVs have rolled out the experience of cards for IT, HR, finance, employee experiences, and other services, which can be easily plugged into Viva Connections. The names include ServiceNow, WorkDay, Moveworks, Limeade, Tribute, LifeWorks, Talentsoft, StandOut, EdCast, Zebra-Reflexis, BlueYonder, Espressive, and many more.
For organizations looking for an experience beyond what is offered by Microsoft’s out-of-the-box cards , as well partner solutions, they can involve IT to build the customized solutions using SPFx. Every organization uses various services and systems that are being used by their employees daily. With a Viva implementation, organizations are looking forward to having all the information in one place, i.e., in Microsoft Teams. Presenting employees with the information they need to work effectively can be achieved by developing custom cards on the dashboard. The dashboard experience can be extended with developer experience.
Extensibility Options with SPFx
Viva Connections is surfacing a modern SharePoint home site in Microsoft Teams. Modern SharePoint supports extensibility with modern web tools. SharePoint Framework is the extensibility model for Viva Connections, Microsoft Teams, and SharePoint.
SharePoint Framework supports platform-agnostic, client-side development for SharePoint using modern web technologies and tools (e.g., NodeJS, NPM, Gulp, TypeScript, Yeoman, Webpack, etc.).
Web parts: These are HTML widgets. Modern SharePoint supports web parts developed with SPFx.
Application customizers : This SPFx-based approach allows you to inject HTML and JavaScript to predefined locations on the SharePoint page.
Adaptive card extensions (ACEs) : ACEs developed with the SharePoint Framework are implemented as JSON structures, which can be placed on the Viva Connections dashboard.
Tools and Libraries for SPFx
SharePoint Framework v1.13 (and newer) supports extending applications for Viva Connections. To build customizations using SPFx, we need to install modern tools and libraries as follows:
Node.js
Node.js is an open-source JavaScript runtime, used to host and serve JavaScript-based applications. Install Node.js v14 from https://nodejs.org .
NPM
This stands for Node Package Manager , which installs modules and their dependencies in the node_modules folder.
Gulp
This automates SPFx development and deployment tasks. It performs bundling and minification tasks before each build.
Yeoman
This is a scaffolding tool to generate an SPFx solution and build the required project structure.
Yeoman SPFx Generator
This helps to generate a SharePoint client-side solution project with the needed toolchain and project structure.
TypeScript
This is a superset of JavaScript. SPFx applications are written in TypeScript, which is a strongly typed language.
Visual Studio Code
This is a lightweight IDE for writing code for SPFx solutions.
Extensibility with Web Parts
Web parts built with the SharePoint Framework help to implement widgets to surface SharePoint data with REST APIs and also consume Graph APIs to surface data from Microsoft 365 apps and services. The property pane of the web part allows end users to configure the web part.
Viva Connections web parts work only for the desktop experience.
To surface information from SharePoint data (e.g., news, SharePoint lists, document libraries)
To surface information from Microsoft 365 apps and services (e.g., Microsoft 365 Groups, Yammer, Microsoft Teams, etc.)
To surface information by consuming web services
Extensibility with Application Customizers
Consider building application customizers to extend Viva Connections when you need to add custom code or HTML elements on all the pages in Viva Connections. It is not necessary to have a UI element for the application customizer. You can use an application customizer to run any background code for all pages in Viva Connections.
On a broader term, SPFx extensions allow you to extend the user experience for SharePoint including the notification area, list views, and toolbars.
From the Viva Connections point of view, application customizers are effective to render the custom visualization on the header and footer sections of the page. With application customizers, one can add HTML and JavaScript to a predefined location on the page (e.g., top and bottom sections).
An application customizer can be used to place important notifications or announcements at the top of the page or important links at the bottom of the page. The app bar may affect the customizations that can be achieved using application customizers. Viva Connections application customizers work only for the desktop experience.
Extensibility with Adaptive Card Extensions
Adaptive card extension (ACE) is a new component type available in the SharePoint Framework to build a rich experience with cards for the dashboard. ACEs use a declarative JSON schema to generate the card UI. When the ACEs are compared with the web part, the main difference is that the web parts can be placed on pages, and developers use web frameworks to implement them. In comparison, ACEs work only on the dashboard and use adaptive cards for the UI. This section is relevant only to developers who are planning to build ACE customizations with the SharePoint Framework.
Basic card template
Image card template
Primary text template
Scaffold SPFx Solution for ACE
ACE Class (Base Class)
A card view is the view of the card on the dashboard. A quick view is available as a dialog box after acting on the card view.
Card View
A card view defines the UI and behavior of the card when added to the dashboard.
Quick View
The quick view is implemented with JSON templates, which can be seen after acting on the card view actions.
Deploy the Solution
Follow these steps to prepare the package (.sppkg) and deploy it to the SharePoint app catalog:
- 1.Create a solution package by running the following commands:
gulp bundle --ship
gulp package-solution --ship
- 2.
Upload the generated solution package (.sppkg) to the SharePoint tenant app catalog.
- 3.
Edit the dashboard page on the SharePoint home site.
- 4.
Add the custom ACE to the page.
For the implementation of ACEs targeting various business scenarios, please refer to the PnP repository for the Viva Connections Viva Adaptive Card (ACE) sample solutions available at https://github.com/pnp/sp-dev-fx-aces .
Conclusion
To implement an experience beyond what is offered by the out-of-the-box Microsoft cards, as well partner solutions, you can build customized solutions using the SharePoint Framework. The SharePoint Framework provides extensibility for Viva Connections by implementing web parts, application customizers, and adaptive card extensions.
In the next chapter, you will understand the importance of defining governance for Viva Connections.