Unveiling the Power of Adaptive Cards in Viva Connections: A Deep Dive
“Are you seeking a dynamic way to enhance your user experience within the Microsoft 365 environment? Look no further!
Welcome to my blog post focusing on Viva Cards with Quick Edit! In this exciting journey, we’ll dive into the realm of Adaptive Cards and their extraordinary potential within the Viva Connections ecosystem.
Let’s unravel the magic of Adaptive Cards together and uncover how they can revolutionize the way you connect, communicate, and collaborate.
Adaptive Cards
Adaptive Cards have gained significant popularity within the Microsoft 365 ecosystem. They are integrated into various services such as Microsoft Search, Power Apps, SPFx apps, Outlook emails, and more. So, what exactly are Adaptive Cards (AC) and Adaptive Card Extensions (ACE)? In this article, we delve into how you can leverage the capabilities of adaptive cards within Viva Connections.
The Essence of Adaptive Cards
Adaptive Cards represent a novel approach for developers to uniformly exchange content. The fundamental concept underlying Adaptive Cards is straightforward: most software developers aren’t inherently skilled in designing visually appealing forms and presenting data.
To address this, Microsoft initiated the “Adaptive Card Working Group” circa 2017, intending to facilitate developers in presenting data in visually pleasing and standardized forms.
The group’s efforts commenced with the development of Message Cards around 2017, which subsequently evolved into what we now know as Adaptive Cards by 2018. The latest updates and information are publicly accessible on GitHub.
Essentially, Adaptive Cards are composed of a concise JSON (JavaScript Object Notation) description of a form. This empowers developers to define a card within their code without the need to craft a webpage replete with styles, CSS classes, or concerns about rendering on diverse devices such as Android phones, iPads, or computer screens.
This inherent adaptability ensures that the card is rendered optimally on the specific client it’s displayed on. Developers are merely tasked with designing the card structure and populating it with data.
Adaptive Cards are versatile, finding applications in Microsoft Teams, SharePoint, Viva, Microsoft Search, Outlook Actionable Messages, Cortana Skills, Windows Timeline, and can even be integrated into your own applications utilizing the provided SDKs.
Enter Adaptive Card Extensions (ACEs), an innovative component type within the SharePoint Framework (SPFx). ACEs offer developers the capability to craft sophisticated, native extensions for Viva Connections dashboards and SharePoint pages.
By harnessing Microsoft’s Adaptive Card Framework, developers can concentrate solely on the business logic of their components. The SharePoint Framework ensures that the component retains an appealing appearance and functions seamlessly across various platforms.
With this brief understanding let’s begin Creating Viva Cards with Quick Edit functionality.
Get Started Right Away
The Viva connection feed fetches personalized data using the Graph and audience targeting. There are certain OOTB cards available for quick use. But we can build our custom viva card solution per our business need. So here are quick steps to create custom Viva card using ACE.
While starting with the development we should consider one of the most important aspects – Target audience.
It needs basic setup for developing custom Viva card solution with SPFX development dependencies installed. This demo uses – SPFx(“1.15.0”), NPM(“6.14.17”), Node (“14.19.2”)
We can QuickStart with –
(1) Scaffolding Adaptive Card Extension by simply executing – yo @microsoft/sharepoint in the terminal. Put your answers for the prompted questions. Following boilerplate code will be generated.
(2) Open the Project in editor preferably VS Code, setup the domain to the URL of your SharePoint tenant and site in serve.json
(3) Make necessary changes (add Textblocks/Containers) in QuickViewtemplate.json per the view requirement.
(4) Add GET request to fetch item from list & set them to state for further use.
(5) Use the state to render data in Quick View.
(6) To check the output, execute “Gulp Serve” and open your local workbench.
View Data button click opens Quick View card.
(7) Click on the edit button, it will open a prompt with confirmation.
(8) Once you input the new Title & confirm it will update the entry in list and close the Quickview card.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Conclusion
As we conclude this journey into the realm of Adaptive Cards and their transformative capabilities within Viva Connections, it’s clear that we’re standing at the cusp of a new era in user experience. The ACE Viva Card, with its ability to dynamically tailor content to individual needs, holds the key to unlocking heightened engagement and skyrocketing productivity.
Imagine a world where tasks, notifications, and knowledge resources are at your fingertips, seamlessly integrated into an intuitive and visually captivating interface. By harnessing the power of Adaptive Cards, we’re stepping into this world – a world where user interactions are fluid, data presentation is captivating, and collaboration knows no bounds.
So, are you ready to embark on this journey of innovation and possibility? Reach out to PSSPL today and explore how you can leverage Adaptive Cards and ACEs to revolutionize the way you work and connect.
Let’s make the future of user experience a reality together!
