Microsoft recently released a preview version 1.20 of SharePoint Framework with several updates for Viva Connections cards, four months after the last minor version 1.19. The public release is expected for September 2024.
Version 1.20 of SPFx contains two feature updates for Microsoft Viva Connections components. The Viva Connections components in SPFx are delivered in the form of Adaptive Card Extensions (ACEs), UI components that leverage adaptive cards' visual language. While adaptive cards are broader in scope and present in several Microsoft products such as Outlook, Teams or SharePoint, the adaptive card extensions are a component of Viva Connections.
When support for ACEs was introduced in SharePoint Framework 1.13, the adaptive card extension visualisation in the UI, called card view in SPFx, was restricted to a choice of one of the fixed templates. Version 1.18 of SPFx brought the BaseComponentsCardView, where developers could provide custom card components such as header, image, body, or footer. In version 1.19, Microsoft introduced a data visualization ACE, a specific adaptive card extension type where developers could supply the data series and visualization properties to render a line chart.
Version 1.20 adds three new data visualization options: a bar chart, a pie chart, and a doughnut chart. They follow the same code structure as the previous version.
A bigger change is introduced for the Quick Views of the Viva Connection Cards. A Quick View is displayed when interacting with a card by clicking or tapping a button, for example. It opens a larger dialog frame with the quick view component of the card rendered inside.
Until version 1.20, developers could only use an adaptive card template to render a Quick View, leveraging the JSON template and data payload and letting SPFx render the adaptive card as the output, as illustrated by this sample from Microsoft. However, version 1.20 exposes a render method to the developers, similar to SPFx webparts. Consequently, developers can now use raw HTML or any UI framework, such as React, to render the Quick View. This feature will enable more complex layouts of Quick Views for Viva Connections cards, free from the limitations of the adaptive card language format. While there is no documentation update to reflect the changes for the moment, Microsoft released an updated sample of how to use this new feature.
The full release notes of the changes in the version 1.20 are available on the GitHub release page. As this version is a preview, developers must use the @next version tag to install the SPFx 1.20 to their development machines.
npm install @microsoft/generator-sharepoint@next --global
To upgrade from SPFx 1.19 to 1.20 preview version, the 1.19 packages from package.json file have to be uninstalled and the 1.20.0-beta.0 packages installed instead. Alternatively, a CLI tool can be used to upgrade the solutions to the latest SPFx version.
SharePoint Framework (or SPFx) is the set of tools and libraries for building extensibility options in Microsoft 365. With SharePoint Framework developers can create solutions for Microsoft SharePoint, Microsoft Teams and Microsoft Viva products. The SPFx uses industry-standard tooling such as Yeoman, TypeScript, Lint, WebPack and other client-side libraries. The issues list is hosted on GitHub and currently has 880 open issues.