1,333 words, 7 minutes read time.
The SharePoint Framework (SPFx) continues to evolve, with the release of version 1.20 on September 26, 2024. While this year has been quieter in terms of updates compared to the activity surge in 2023, Microsoft has still introduced some valuable features and fixes that developers should know about.
As a developer in the Microsoft 365 ecosystem, it’s essential to keep up with these changes to maximize your productivity and ensure your solutions are always up-to-date. In this post, we’ll dive deep into the new features and improvements in SPFx 1.20, specifically focusing on Adaptive Card Extensions (ACEs), new chart types, and critical fixes that improve development efficiency. If you’re using SPFx in your projects, or you want to stay informed on where the platform is heading, this is a release worth understanding.
Let’s break down what’s new, what’s improved, and why you should care about SPFx 1.20.
The Year of Adaptive Card Extensions (ACEs)
First, let’s address the elephant in the room—Adaptive Card Extensions (ACEs) are once again the primary focus of SPFx 1.20. This release builds on the new ACE features introduced in version 1.19, reinforcing Microsoft’s emphasis on leveraging ACEs within the Viva Connections framework. But what exactly are ACEs? In simple terms, ACEs allow developers to add interactive cards to their solutions in Microsoft Teams or SharePoint, enhancing user engagement through visual data and actions.
If you’ve been following recent releases, you might have noticed a trend: almost all SPFx updates lately revolve around ACEs. Although some developers have expressed frustration at the lack of broader platform updates, it’s clear that Microsoft is investing heavily in this area, specifically for use with Viva Connections.
New Chart Types for ACE Data Visualizations
The standout feature of SPFx 1.20 is the introduction of three new chart types for ACE data visualizations. These additions provide developers with more ways to display data inside their ACE cards, giving end-users a richer and more interactive experience.
In SPFx 1.19, Microsoft introduced the ability to add simple line charts to ACEs. With SPFx 1.20, they’ve added:
- Bar Charts – Bar charts can be used to show a series of data as rectangular bars, making comparisons between data sets more straightforward.
- Pie Charts – Pie charts are excellent for showing proportions or percentages of a whole, with each “slice” representing a category of data.
- Donut Charts – Donut charts are visually similar to pie charts but have a blank center, making them a cleaner and more modern alternative.
Here’s a quick example of how you can implement a bar chart in your ACE project. By setting the visualizationKind property to bar, you can control the chart’s style. Then, input your data series to visualize it.
this.cardBody.visualizationKind = 'bar';
this.cardBody.data = [
{ x: 'Category A', y: 30 },
{ x: 'Category B', y: 50 },
{ x: 'Category C', y: 20 }
];
The same principle applies to pie and donut charts, with the isDonut property toggling between the two. These new chart types make it easier for developers to create visually engaging and intuitive data representations in their ACE cards.
HTML-Based ACE Quick Views
Another significant enhancement in SPFx 1.20 is the introduction of HTML-based quick views for ACEs. Prior to this release, developers could only use Adaptive Cards to design quick views. While Adaptive Cards are great for simple layouts, they can be limiting when more advanced customizations are needed.
With the new HTML-based quick views, developers can now render any HTML content within the quick view of an ACE, providing much more flexibility. This means you can even inject a mini React application into your quick view, adding interactive components like buttons, tables, or complex layouts.
Here’s a simple example of how the new HTML-based quick view works:
this.quickView.render = () => {
return `<div>
<h1>Welcome to the Quick View!</h1>
<p>This is HTML content inside an ACE quick view.</p>
</div>`;
};
For developers working on complex solutions in SPFx, this new capability opens up exciting possibilities. Whether you need to embed advanced forms, integrate third-party libraries, or implement dynamic content, HTML-based quick views offer much more control than the traditional Adaptive Card approach.
Fixes and Enhancements in SPFx 1.20
No release is complete without some much-needed bug fixes, and SPFx 1.20 is no exception. One of the most notable fixes addresses the frustrating object-object error that surfaced in SPFx 1.19 due to a Webpack issue. Previously, when an exception occurred in SPFx 1.19, developers were greeted with a generic “object-object” error message, which made debugging quite challenging.
Thankfully, Microsoft has resolved this issue in version 1.20. The Webpack configuration has been adjusted so that developers can now see more meaningful error messages when exceptions occur. However, if you’re still working on an SPFx 1.19 project, you can manually fix the issue by updating your project dependencies, specifically upgrading the Webpack package.
Dev Tools and ESLint Updates
In addition to bug fixes, SPFx 1.20 brings a range of updates to developer tools and configurations. Microsoft updated several key packages, including:
- ESLint – Upgraded from version 8.7 to 8.57, improving code linting and ensuring that SPFx projects follow the latest JavaScript best practices.
- React Templates – Updated to streamline the React component structure. Although the templates are still using React class components (instead of functional components and hooks), this update brings slight improvements to the project setup.
- SDK Versions – The Teams JavaScript SDK has been upgraded from 2.2.0 to 2.24. However, developers should note that this is still several versions behind the latest Teams SDK.
Dependency Versions: Still Playing Catch-Up
One of the pain points for many SPFx developers is the outdated versions of dependencies supported by the framework. In SPFx 1.20, we’re still working with older versions of critical libraries, such as:
- React – SPFx 1.20 still uses React 17, which was released back in 2020. With React 18 already in circulation and React 19 on the horizon, this gap can cause compatibility issues with newer libraries and tools.
- TypeScript – Similarly, the supported version of TypeScript is 4.7.4, which is now two years old. TypeScript 5.x has been available since 2023, bringing new features and performance improvements that SPFx developers are missing out on.
While Microsoft has provided tools like the Rush Stack Compiler (RSC) to allow developers to use newer versions of TypeScript, the official support for these versions within SPFx is still lacking. Hopefully, we’ll see an update in the near future that brings SPFx in line with the latest development trends.
Parting Thoughts: The Need for Broader Updates
As much as SPFx 1.20 brings useful enhancements, particularly for developers working with ACEs, there’s an undercurrent of dissatisfaction in the developer community. The SPFx platform, while powerful, is beginning to show signs of age.
Developers have been vocal about the need for more significant updates to the core framework, particularly in terms of modernizing dependencies like React and TypeScript. SPFx has gained a considerable amount of technical debt over the years, and without a concerted effort to address these underlying issues, it risks losing favor with newer developers.
That said, the focus on Viva Connections and Adaptive Card Extensions seems to indicate Microsoft’s broader vision for SPFx. While this might frustrate some developers looking for more substantial updates, it’s clear that ACEs are here to stay, and learning to work with them effectively will be crucial for future SPFx development.
Conclusion
SharePoint Framework 1.20 may not be the most groundbreaking release, but it does offer developers useful new tools—especially around data visualization and ACE quick views. If you’re building custom solutions in Microsoft 365, keeping your projects updated with the latest SPFx features will ensure that your applications remain compatible and optimized for performance.
As we look ahead, the hope is that Microsoft will address the more significant concerns within the SPFx community, such as updating core dependencies and addressing technical debt. But for now, if you’re working heavily with ACEs and Viva Connections, SPFx 1.20 is a release you won’t want to ignore.
Hat tip to Andrew Connell for his detailed breakdown of SPFx 1.20 in his YouTube video.
