Create/Design Adaptive Cards Extensions In SharePoint Site By Out-Of-The-Box Way

Microsoft has introduced a new way of displaying the information in a platform-agnostic way called Adaptive Cards. These cards are sourced by JSON and adapts the UI automatically by the surroundings. Also, these cards are designable based on the needs through inbuilt or custom means. In this article, we shall see how to design the cards in the OOTB way.

Image sourced from https://adaptivecards.io/

Viva Dashboard in SharePoint site

In SharePoint, at this point of time, Adaptive cards can be added to the Viva Dashboards webpart. And Viva Dashboard is available after the Viva Connections has been set up. For setting up the site has to be chosen and make it as default SharePoint home site. This action can be performed by using SharePoint admin center or by PowerShell scripts. Once home site is set up, Edit the page (home page / any pages) and add the Viva Dashboard webpart.

After the addition of Dashboard, click the SharePoint settings. The dropdown will have a new option called Set up Viva Connections, click on the link.

A new pane will appear, click on Create Dashboard.

Adding an Adaptive Card to Dashboard

Edit the Dashboard.aspx page and switch to Desktop mode

Click on Add a Card and select the option Card Designer under the Dashboard section.

A new card will be added, click on Edit Card pencil, property pane opens for more options to customize the card

Designing the Adaptive Card

There are three different types of templates and two card sizes available in the Size and Layout section. The card will have a different look and feel with the combination of Template types and Card Sizes.

Template types

Heading
Image
Description

Card Size

Medium
Large

Now the combinations.

Heading and Medium

In this card, the Card Content section will help us to set Title, Heading and the Icon on the top. Icons can be customized with Custom image / Icon by clicking on the Change option and the same can also be removed through Delete. One actionable button can be configured as per the need.

Heading and Large

Same as the above but two action buttons can be configured and both are optionable to keep it or remove from the cards.

Image and Medium

In this card, the Card Content section will help us to set Title, Heading, the Icon on the top and an Image. Like Icons, image can also be customized from various sources. Buttons cannot be added in the image template but the whole card can be clicked and make it actionable.

Image and Large

Major differences between the sizes Medium and Large for this template comes from placing the image and the buttons. In the above combo (Image and Medium) the image will be placed on the top followed by Title and Heading and no room for a button. But in this combination (Image and Large) the image is placed on the right side extended and two buttons can be added (optionally). Rest all the options are applicable for this type as well.

Description and Medium/Large

In this card, the Card Content section will have an additional option to provide a short space for the Descriptive text in the card and no space for adding any images.

Where Medium sized card will allow to add one button and Large size will allow two buttons to add.

Actions on card click

Options will choose what happens when user clicks on the card

Either can set to Go to a link

Or, can set to Go to a Teams app, since this SharePoint home site will be visible in the Teams app through Viva Connections, user click action can navigate to another Teams app

Or, can set to Show the quick view option to show information from the JSON as data source. In the Edit pane, the layout and data can be customized according to the need. Various quick view layout templates are available from the samples to use.

A completely new Quick view layout template can also be designed using the designer provided by Microsoft Adaptive cards

On button click action

Similar to Actions as described above, all the click options can be extended to the button(s) that has been added. Additionally, those button(s) can be renamed and toggled to make them visible or hidden.

Once the card is customized you can Preview the page. The preview can also be toggled between mobile and desktop mode to feel the UI. If multiple cards added they can also be dragged to reposition them.

Once completed, close the property pane and Publish / Re-Publish the Dashboard Page.

A maximum of 4 cards can be shown on the page and rest of the cards are available under the See All section.

Did you know?

The target audience can also be set for each card to display the cards based on logged in user viz groups. Audience targeting settings are available under the property pane.