New Capabilities in SharePoint Framework 1.20 Public Preview

Welcome back to Mastering Microsoft 365 and Beyond, your go-to resource for the latest trends, insights, and developments in the Microsoft 365 cloud platform. We've been exploring the latest capabilities in AI-driven content management, reviewing the latest features of SharePoint, Microsoft Teams, and the advancements in Microsoft's AI-driven apps & services, including Microsoft 365 Copilot and Azure AI.

The current installment focuses on the advancements in SharePoint Framework (SPFx) with the public preview v1.20. This article covers the new capabilities aimed at improving developer performance and user experience. In our follow-up discussions, we will continue exploring how these capabilities can be leveraged for advanced content management, intranet development, integration with Microsoft Graph APIs, and deployment across Azure and Microsoft 365. SPFx remains the tool of choice for modernizing SharePoint Online, providing us with a robust development experience.?

#NeedHelp?: Whether you’re looking for expert advice, need help with Microsoft 365 consultancy, or have specific helpdesk requests, I am here to guide you through the ever-changing landscape of the Microsoft cloud. Stay tuned as I bring you more in-depth analysis, practical insights, and the latest updates to help you master Microsoft 365 and beyond!

SharePoint Framework (SPFx)

The SharePoint Framework (SPFx) is a development model designed to build modern, client-side solutions for the Microsoft 365 cloud platform. It offers a flexible, consistent approach for creating applications that integrate with SharePoint, Microsoft Teams, Microsoft Viva and the Microsoft 365 Office productivity apps such as Outlook.?

Utilizing standard web technologies like React, TypeScript, and Node.js, SPFx enables developers to create sophisticated web parts, extensions, and custom apps. These components can be deployed across different Microsoft 365 tenants with minimal adjustments. SPFx also provides automatic hosting for components and includes single sign-on across the platforms, reducing the complexity of authentication and hosting for developers.

#RecommendedReadings: See Overview of SPFx client-side web parts & Overview of SPFx Extensions.

SPFx Public Preview v1.20

The public preview v1.20, launched in August 2024, and scheduled for official general availability (GA) in September, brings several new features to the SharePoint Framework. It introduces new layout options and improved support for Microsoft Teams, expanding data visualization capabilities, and providing developers with more options for creating engaging and interactive content.?

One of the key updates is the ability to further customize Adaptive Card Extensions (ACEs) for Viva Connections. Viva Connections is a customer-branded app experience in Microsoft Teams that meets users where they are, whether in the office, in the field, or on mobile devices. It provides a gateway to employee experiences, allowing organizations to curate the content and services needed to get work done. Available on desktop via the Microsoft Teams client, and on tablets and mobile devices through the Teams app (Android, iOS). Once you created the Viva Connections experience in the Microsoft 365 admin center, and pinned the app in the Teams admin center to make Viva Connections easily discoverable, your organization’s custom Viva Connections app will be available to end users as a branded company app, with the organization's icon featured in the Teams app bar.?

#TechNote: Viva Connections leverages SPFx or bots for all customizations and extensibility opportunities. Its ?personalization and extensibility model is based on ACEs, which can be built using SPFx for client-side extensibility or server-side implementations using bots. Developers have the flexibility to use either SPFx or the bot-powered option to create new ACEs for further customizations to the Viva Connections dashboard to meet specific business needs.

New Data Visualization Options: Viva Connections Card View

The 1.20 beta release brings us new data visualization options for Viva Connections cards, allowing developers to create bar, pie, and donut charts. These chart types improve the visual presentation of data within Viva Connections and provide more flexibility in designing informative dashboards. They are especially useful for developers working on apps that require advanced data visualization within intranets, dashboards, and app portals, providing end-users with more engaging and informative displays.

Support for HTML-Powered Quick Views

Complex layouts for multiple devices are now supported, and allow developers to create HTML-powered Quick Views for Viva Connections cards, which enables more complex and flexible layouts on desktop, tablet, and mobile devices. This is a significant improvement over the previously supported Adaptive Card options, offering greater customization.?

Previously Viva Connections Card View has only support adaptive card option – with this new feature, developers can use HTML combined with any JavaScript frameworks to create these quick views, which opens up opportunities for more advanced and interactive user experiences.

Benefits and Target Audience

Developers who focus on creating rich, interactive experiences for intranets and portals will find the new data visualization and HTML quick view features particularly beneficial for improving user engagement and functionality.

1. Those building applications for Microsoft Viva will appreciate the flexibility and extended capabilities offered by SPFx 1.20 public beta, making it easier to deliver high-quality user experiences.
2. Developers working on internal business-line apps can leverage the new capabilities to build more robust, visually appealing, and functionally rich applications that can integrate smoothly with the Microsoft 365's collab apps and services.
3. By supporting standard web technologies like HTML and JavaScript, SPFx 1.20 public preview allows developers to reduce the learning curve and accelerates the development process.
4. The new visualization and quick view options provide more control over the design and functionality of components, enabling developers to create custom solutions that meet business requirements.

As part of the preview release, Microsoft is also providing the following new code samples showcasing the new card experiences:

• Data visualization card layout options for the Viva Connections
• Using HTML powered quick views in Viva Connections cards

For more detailed information and to try out the new features, developers are encouraged to check the official release notes and participate in the Microsoft Advanced Content Management community calls to stay updated on the latest developments.

#GetStarted: For production environments, I recommend using the SPFx version referenced on set up your SharePoint Framework development environment.

About the author: Sousouni Bajis is a Microsoft 365 Solutions Architect and Microsoft Cloud Solution Partner with over 24 years of experience in designing and deploying Microsoft cloud-based solutions and enterprise applications. Sousouni is known for his strategic approach to complex mission critical app dev projects, and is an active participant in the Microsoft technical community and Microsoft sponsored user groups.