The Card Designer is a type of card that you can add to your Viva Connection dashboard. You could customize the design of this card using Adaptive Cards templating and choose predefined actions for the card primary and secondary buttons (e.g.: show the quick view, go to a link).
In December 2023, Microsoft introduced a set new advance API features that enable the use of API to get specific data without code and then display it in the quick view using templates.
This blog post demonstrates, using these new features, how to get specific data using the SharePoint API.
Content
Prerequisites
This section describes the prerequisites to use the advance API features to get data with the SharePoint API.
You will need SharePoint admin permissions to perform the actions described below.
Enable features
If you add a new Card Designer card to you Viva Connections dashboard, you will notice the following warning message in the “Quick view layout and data section”:
To use the new advance API features of the Card Designer, you have to enable it. To do so, use the SharePoint Online PowerShell. Make sure you have the latest version installed and execute the following cmdlets:
Connect-SPOService -Url "https://yourtenant-admin.sharepoint.com/"
Set-SPOTenant -IsDataAccessInCardDesignerEnabled $true
You can now execute Get-SPOTenant to make sure that the property is successfully enabled:
Create the tenant App catalog
Now, if you access a Card Designer card settings and see the following warning message, it means that your tenant does not already have a tenant App catalog:
If your tenant does not already have an App catalog, you will have to create it. To do so, access the SharePoint admin center and then go to “More features” and click on “Open” in the “Apps” section. It will automatically create the app catalog:
Get data using SharePoint API
Once all the prerequisites are met, you can start using the new advance API features of the Card Designer.
Let’s see how to get data using the SharePoint REST API:
First, add a new Card Designer card to the Viva Connections Dashboard and select Call a SharePoint API in the Data source dropdown:
Then you can write your request URL in the input field that appeared below. As an example, we want to get files of the Documents library: /GetFolderByServerRelativeUrl('Shared%20Documents')/Files
You can click on “Test” to preview the response of the request.
Display data
To display the data that you get using the API call in the quick view of the card, use an adaptive card JSON template. To display the files from the Documents library, you can you the template below:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"$data": "${value}",
"style": "default",
"bleed": true,
"items": [
{
"type": "TextBlock",
"text": "${Name}",
"wrap": true,
"weight": "Bolder",
"size": "Medium"
},
{
"type": "TextBlock",
"text": "Last modified on {{DATE(${TimeLastModified}, COMPACT)}}",
"isSubtle": true,
"wrap": true,
"spacing": "Small",
"maxLines": 2
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
Click on “Apply”, then “Republish” and you can now access dynamic data from the quick view of your Card Designer card:
Conclusion
In this blog post, we covered how to use Viva Connections Card Designer advance API features to get data using SharePoint API and display retrieved data on the card quick view.
In the next part, we will see how to do the same using the Microsoft Graph API.
Aimery Thomas' blog 