Add Adaptive Card To Your Viva Connection Dashboard

Let’s take a deep dive into setting up of Viva Connection Dashboard and how you can add out of the box adaptive card extension to your site

Set up Viva connection Dashboard

To be able to view a Viva Connection Dashboard into your communication site, follow these steps,

Create a SharePoint Home Site; If you don’t have a SharePoint Home Site, Navigate to SharePoint Admin Centre > Settings.

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.1

In Fig 1.1 you will see SharePoint Home Site option, click on the same, a panel will open where you will be asked to add your communication site URL which you want to convert to Home Site.

Note: Make sure you have global left navigation enabled in your communication site

Voila, in few minutes your communication site will convert to Home site. Isn’t this amazing!

Now, navigate to your Home site, and let’s look into a Home site settings where you will see the option to set up your Viva connections Dashboard as shown in Fig 1.2

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.2

Click on Set up Viva Connections and click on create a Dashboard button. Once you create a Dashboard you will be landed on a screen as shown in Fig 1.3.

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.3

From Fig 1.3, notice that by default mobile screen view is selected, you can change it to desktop to preview.

Now, let’s start by adding an adaptive card to your dashboard, I hope you guys are excited too…

Click on Add a Card button and explore all the out of the box cards available for you. Just like shown in Fig 1.4, You will see Approvals, Assigned Tasks, Shifts, Teams app, Web Link all these cards available to you.

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.4

Now let’s explore each card one by one, Let’s start by adding an Approvals card, As shown in Fig 1.5, the user will be able to keep a track of all the approval requests right here in one place, User can select the card type from small, medium, or large option and also target this to a specific audience by adding a user/group in the property pane.

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.5

Let’s add the Assigned Tasks card, As shown in Fig 1.6, This card will display a preview of top Planner tasks from "Assigned to me" list in the Tasks app in Teams. Also, the Open button will redirect to the assigned task

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.6

Let’s add Teams App card, As shown in Fig 1.7, For Teams app card, user can select from a range of application shown in dropdown and can target it to a specific audience. You can give a valid title and description to your selected app like shown in Fig 1.8

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.7

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.8

Let’s add a Web Link card, As shown in Fig 1.9 you can add the link, title, description and can add thumbnail and card images also you can target it to specific audience.

Add Adaptive Card To Your Viva Connection Dashboard
Fig 1.9

P.S. Don’t forget to publish your dashboard page once you are done.

I hope all the Viva enthusiasts would have enjoyed knowing about how you can set up Viva connection dashboard and add cards to your dashboard.

Stay tuned for my upcoming articles on Viva series.

Keep Reading, Keep Sharing!