Design guidance and assets on building Microsoft Viva extensions with SPFx

Design guidance and assets on building Microsoft Viva extensions with SPFx

SharePoint Framework (SPFx) is an extensibility model for Microsoft 365 enabling developers to build different kinds of extensibility for Microsoft Viva, Microsoft Teams, Outlook, Microsoft 365 app (Office), and SharePoint. SPFx has multiple benefits like automatic Single Sign On, automatic hosting in the customer tenant, reuse same code across the service and industry standard web stack tooling.

  • We are curious on the art of possible with SPFx for Microsoft Viva. Would you have any design assets supporting on how to get started?
  • That is a great question. We absolutely have design guidance and assets available which are showcasing the art of possible. There are also countless of Microsoft and community provided samples for the Microsoft Viva, which are great resources to see what’s possible.

This blog post is part of a month long SPFx series for January 2023. Each business day we’ll publish a new blog post covering different aspects of the SPFx.

Design guidance and assets for Viva Home and Viva Connections solutions

As the Viva Home and Viva Connections experiences are a new extensibility option for customers and aprtners, we have worked on providing speficic guidance for these areas to provide you inspiration and also a starting point as you start designing experiences for the Viva Home and for Viva Connections.

Key design guidance for the Viva Card experiences:

Here’s a video showcasing the different adaptive card designs Microsoft has provided for inspirational purposes around Microsoft Viva. These assets are availble for reuse anyway you need from GitHub.

To also showcase how the adaptive cards designs can be made dynamic with SPFx solutions, we have partnered with Sympraxis Consulting to provide you fully open-source reference solutions which is also available from the app source / SharePoint store. This solution is showcasing the Microsoft provided designs as real SPFx ACEs and also includes guidance with the integration to the Microsoft Teams apps - like with deep linking and with other scenarios. This solution is a great solution to be installed from the app source / SharePoint store to showcase the art of possible with the Microsoft Viva dashboard for Viva Home or Viva COnnections.

Frequent questions around Viva Home and Viva Connections design guidance

When will the Adaptive Cards in ACEs be supporting a newer version?

At time of writing this article, you can only use Adaptive Cards v1.3 when you design your ACE experiences. We are looking to support v1.5 starting from the SPFx v1.17 release currently planned for the first quarter of 2023.

What’s the role of SPFx in the Viva components, wouldn’t adaptive cards be enough?

Adaptive Cards are used as the static presentation layer, but if you’d like to show dynamic data or behaviours, you’d use SPFx as the orchestrator for accessing the data using APIs and for reacting to the user actions.

References

Here are some initial references to get started with the SPFx in your development. Please do provide us with feedback and suggestions on what is needed to help you to get started with the SPFx development for Microsoft 365.

We will provide more details on the different options and future direction of the SPFx in upcoming blog posts. This post focused on the getting started steps with SPFx - more details coming up with this series with one post within each business day of January 2023.