|
| 1 | +--- |
| 2 | +title: Overview of Viva Connections Card Designer advance API features |
| 3 | +description: Viva Connections Card Designer advance API feature enables Viva Connection dashboard editors to create API powered experiences without code. |
| 4 | +ms.date: 12/13/2023 |
| 5 | +ms.localizationpriority: high |
| 6 | +--- |
| 7 | +# Overview of Viva Connections Card Designer advance API features |
| 8 | + |
| 9 | +Advance API features for the Viva Connections Card Designer enable the dashboard editors to create API powered quick view experiences without actual code. This new option is supported with all the different form factors or Viva Connections dashboard - mobile, tablet and desktop. |
| 10 | + |
| 11 | +> [!IMPORTANT] |
| 12 | +> First version of this feature is rolling out worldwide by end of the 2023 calendar year. User interface for Card designer will be further evolved within early 2024 for a better end user experience with the advance API features. |
| 13 | +
|
| 14 | +## Enabling feature in the tenant |
| 15 | + |
| 16 | +By default this feature isn't currently available in the tenants and it has to be enabled by using SharePoint Online Management Shell with following command. |
| 17 | + |
| 18 | +```powershell |
| 19 | + Set-SPOTenant -IsDataAccessInCardDesignerEnabled $true |
| 20 | +``` |
| 21 | + |
| 22 | +> [!IMPORTANT] |
| 23 | +> You'll need to use [SharePoint Online PowerShell](https://www.powershellgallery.com/packages/Microsoft.Online.SharePoint.PowerShell/16.0.24322.12000) version 16.0.24308.12000 or newer to have this option available in the `Set-SPOTenant` cmdlet. |
| 24 | +
|
| 25 | +If this setting isn't enabled in the tenant, you see following message in the Card Designer property pane: `Advance features have not been enabled by an administrator`. |
| 26 | + |
| 27 | +When the feature is enabled, you see new options visible as a Data source in the **Data source** selection as shown in following image. |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | +## Managing available API permissions |
| 32 | + |
| 33 | +To be able to use the API features, you'll need to grant the available API permissions in the Entra app management. Card designer feature uses the same app registration as the [SharePoint Framework (SPFx) solutions](https://aka.ms/spfx), so any API that is approved for the SharePoint Framework solutions, will be also available to be used in the Card Designer. |
| 34 | + |
| 35 | +If you try to use the API features in the Card Designer, you'll see following exception in the property pane: `Cannot make any requests to Microsoft Graph as the SharePoint Online Client Extensibility Web Application Principal is not configured or consented to.` |
| 36 | + |
| 37 | +Needed permissions can be also granted directly to the SharePoint Framework extensibility app registration in the Entry Applications with following steps. |
| 38 | + |
| 39 | +1. Move to the API management page in the SharePoint administration - first time you access this page, the needed app registrations are automatically created to the tenant. |
| 40 | + |
| 41 | +  |
| 42 | + |
| 43 | + |
| 44 | +1. Move the Microsoft Entra admin center to confirm that the needed app registrations are available. |
| 45 | + |
| 46 | +  |
| 47 | + |
| 48 | +1. Move to the **SharePoint Online Client Extensibility Web Application Principal** registration and include the needed permissions, which you'd like to be available for the dashboard editors when they use Card Designer feature. |
| 49 | + |
| 50 | +  |
| 51 | + |
| 52 | +Notice that after you granted the permissions in the Microsoft Entra admin center, the matching permissions are also visible in the API management page in the SharePoint admin center. |
| 53 | + |
| 54 | +## Using dynamic API data in the Card Designer |
| 55 | + |
| 56 | +When the needed API permissions are available, dashboard designer can use the API features to get dynamic content based on the user identity. As an example, you could use the following Microsoft Graph endpoint to get the following events for the particular user. |
| 57 | + |
| 58 | +``` |
| 59 | +https://graph.microsoft.com/v1.0/me/events?$take=5&$select=id,webLink,subject,start,end,___location |
| 60 | +``` |
| 61 | + |
| 62 | +Combining that API call with a custom adaptive card presentation, you could, for example, present the user's upcoming meetings with following quick view rendering. |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | +> [!TIP] |
| 67 | +> You can use the [Microsoft Graph Explorer](https://developer.microsoft.com/en-us/graph/graph-explorer) to see the different avaialble APIs from Microsoft Graph and their output in JSON. Using that output with [Adaptive Card Designer](), you can easily create powerful experiences with the Card Designer advance API features. |
| 68 | +
|
| 69 | + |
| 70 | +## References |
| 71 | + |
| 72 | +- [YouTube - Introduction to new advance API features in Viva Connections Card Designer](https://www.youtube.com/watch?v=NjZj1F6D6jw) |
| 73 | +- [Viva Connections Card designer](https://learn.microsoft.com/en-us/viva/connections/create-dashboard#design-your-own-card-with-a-quick-view) |
| 74 | +- [Microsoft Graph Explorer](https://developer.microsoft.com/en-us/graph/graph-explorer) |
| 75 | +- [Adaptive Card Designer](https://www.adaptivecards.io/designer/) |
| 76 | +- [SharePoint Online Management Shell](https://learn.microsoft.com/en-us/powershell/sharepoint/sharepoint-online/connect-sharepoint-online) |
0 commit comments