The public beta of Viva Connections has arrived, and now I can talk about my experience in the private beta with the new Adaptive Card Experience (ACEs) that are used to create a critical component, the dashboard. First, let me remind you about Adaptive Cards. They are simple and purely declarative platform-agnostic components, authored in JavaScript Object Notation (JSON), that facilitate the exchange of cards between hosts with easy control over visual consistency. The card format’s evolution is community-driven and is highly extensible.
Sounds cool right? Well, it actually is. I used Adaptive Cards to design a dashboard for my organization, exclusively chiseled out to focus on the end user’s day-to-day intranet activities.
You can scale the dashboard use cases depending on the targeted audience group. For example, you can create a dashboard for a specific project, for a specific office location or for the organization as a whole. Below is an example of the dashboard I created.
Here Are Five Things to Know Before Working on Adaptive Cards:
1. The Adaptive Card format can’t impose the use of any particular underlying technology
The Adaptive Card format does not rely on JavaScript, C#, Python or any other language. Similarly, it doesn’t rely on HTML or XAML or any other graphic/user interface (UI) framework. Also, there are no privileges for using conventional Document Object Model (DOM) manipulation via JavaScript out of the box while developing. It is implemented using the principles of React and React Native which helps the card to be rendered natively on any platform for as long as a renderer exists, giving the end-users a seamless experience over a wide range of devices.
2. An Adaptive Card is just another SharePoint Framework (SPFx) web part
Adaptive Cards can be easily treated as a SPFx web part, which can be part of a SharePoint page. (Currently, it can be hosted on dashboard web part in a Homesite).
They can be scaffolded using Yeoman Generator just like any other SPFx web part but as part of Adaptive Card extension.
You must select a particular card template while scaffolding the project. Currently there are three templates provided by Microsoft to begin with. These templates can be leveraged to create a wide range of use cases which can be focused on an organization’s intranet.
3. Card authors own the content, host apps own the look and feel
The card authors own what they want to say, but the application displaying it owns the look and feel of the card in the context of their application. Host apps impose their styling, so cards look and feel like they are native extensions of the app’s experience. Card authors can still specify styling, but only via semantic expressions of colors, sizes, etc. using Json schema. These allow the host application to make better decisions about the actual look and feel.
4. Card templating service
The adaptive cards are intended to create a simple, expressive means of describing card content. You can design much more complex card templates by using Card templating service. The card templating service is a proof-of-concept that allows anyone to find, contribute to and share a broad set of card templates. The service can find a template for you by analyzing the structure of your data. There is an open-source GitHub repository where you can find these templates, anyone can submit a Pull Request that includes an entirely new template or make enhancements to existing ones … all within the developer-friendly experience of GitHub. You can learn more from Adaptive Cards Templates.
5. Definite set of elements for rendering the UI
There is a definite set of elements provided on a molecular level by Microsoft which we can use to create cards. Right now (in beta version) we can’t add any custom element to the Json schema. You can find more about the same in Schema explorer. We can quickly design the cards using Adaptive Cards designer. Also, there is no support for a graph or any other charts in the schema yet.
Final Thoughts
Prima facie, what I want you to remember while dealing with Adaptive Cards is:
- They are light weight, automatically styled and purely declarative. These are very powerful and you can achieve a lot of things using schema.
- You can integrate your SharePoint sites and play around with REST API on top of a SharePoint list or library using action handlers of the card. You can also integrate with GRAPH API, Azure and several other cool applications, similar to an SPFx web part.
- The cards contain multiple levels of quick views to navigate in and out. Quick view allows you to template your UI using JSON schema and to perform an action or display data while staying within the dashboard.
Author: Vadlamani Ashish | [email protected]
Contact Us
Contact Withum’s team of professionals if you have any questions or concerns.
