|
1 | 1 | --- |
2 | | -title: Advanced Card View Functionality |
3 | | -description: "This tutorial builds off the tutorial 'Build your first SharePoint Adaptive Card Extension'." |
4 | | -ms.date: 02/13/2026 |
| 2 | +title: Advanced Card View functionality for SharePoint Adaptive Card Extensions |
| 3 | +description: Build a data-driven Card View for a SharePoint Adaptive Card Extension (ACE) backed by a SharePoint list, with conditional Card Views and caching. |
| 4 | +ms.date: 07/22/2021 |
| 5 | +author: andrewconnell |
| 6 | +ms.topic: tutorial |
| 7 | +ms.service: sharepoint |
5 | 8 | ms.localizationpriority: high |
6 | 9 | --- |
| 10 | + |
7 | 11 | # Advanced Card View Functionality |
8 | 12 |
|
9 | 13 | This tutorial builds off the following tutorial: [Build your first SharePoint Adaptive Card Extension](build-first-sharepoint-adaptive-card-extension.md) |
10 | 14 |
|
11 | | -In this tutorial, you'll implement advanced Card View functionality. You'll build off the the previous tutorial and create a Card View that's powered by data in a SharePoint list. |
| 15 | +In this tutorial, you'll implement advanced Card View functionality. You'll build off the previous tutorial and create a Card View that's powered by data in a SharePoint list. |
12 | 16 |
|
13 | | -[!INCLUDE [developer-preview-notice](../../../../includes/snippets/developer-preview-notice.md)] |
| 17 | +[!INCLUDE [spfx-release-beta](../../../../includes/snippets/spfx-release-beta.md)] |
14 | 18 |
|
15 | 19 | ## Create a test list |
16 | 20 |
|
@@ -84,7 +88,7 @@ Let's modify the properties for our ACE and set the list ID that contains the da |
84 | 88 |
|
85 | 89 | ### Change the extension state |
86 | 90 |
|
87 | | -Next, let's update the state of the extension. When the state changes, it will trigger the ACE to rerender. These changes will add a collection of list items to the state as well as the current item displayed, as indicated by the `currentIndex` property you'll add. |
| 91 | +Next, let's update the state of the extension. When the state changes, it will trigger the ACE to rerender. These changes will add a collection of list items to the state and the current item displayed, as indicated by the `currentIndex` property you'll add. |
88 | 92 |
|
89 | 93 | 1. Locate and open the following file in the project: **./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts**. |
90 | 94 | 1. Add a new interface for the List data by adding the following code to the file: |
@@ -149,7 +153,7 @@ The next step is to add support to the project and ACE to retrieve items from a |
149 | 153 | First, add a dependency to the SPFx package used to submit HTTP requests to REST endpoints: |
150 | 154 |
|
151 | 155 | 1. Locate and open the following file in the project: **./package.json**. Take note of the beta version of the SPFx related beta packages used by the other packages listed as dependencies in the `dependencies` section of the **package.json** file. |
152 | | -1. Install the following NPM package in your project: **@microsoft/sp-http**: |
| 156 | +1. Install the following npm package in your project: **@microsoft/sp-http**: |
153 | 157 |
|
154 | 158 | ```console |
155 | 159 | npm install @microsoft/sp-http -SE |
@@ -185,7 +189,7 @@ Next, add support for calling the SharePoint REST API and adding the retrieved i |
185 | 189 | } |
186 | 190 | ``` |
187 | 191 |
|
188 | | -1. Update the ACE to request the list data during when it's initialized by updating the `onInit()` method. |
| 192 | +1. Update the ACE to request the list data when it's initialized by updating the `onInit()` method. |
189 | 193 |
|
190 | 194 | Replace the last line `return Promise.resolve();` to be `return this._fetchData();` as follows: |
191 | 195 |
|
@@ -291,8 +295,8 @@ Change the HelloWorld ACE to display the total count of List items in the **Medi |
291 | 295 |
|
292 | 296 | Let's create a medium Card View for our ACE: |
293 | 297 |
|
294 | | -1. Create a new file **./src/adaptiveCardExtensions/helloWorld/cardView/MediumCardView.ts** folder. |
295 | | -1. Add the following code to create a new **Medium** sized Card View: |
| 298 | +1. Create a new file **./src/adaptiveCardExtensions/helloWorld/cardView/MediumCardView.ts**. |
| 299 | +1. Add the following code to create a new **Medium-sized Card View: |
296 | 300 |
|
297 | 301 | ```typescript |
298 | 302 | import { |
@@ -534,6 +538,6 @@ After this lab you should be familiar with: |
534 | 538 | - Advanced Card View manipulation |
535 | 539 | - Caching Card View and ACE state |
536 | 540 |
|
537 | | -## See Also |
| 541 | +## See also |
538 | 542 |
|
539 | 543 | - [Microsoft Learning: Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections](/training/modules/sharepoint-spfx-adaptive-card-extension-card-types) |
0 commit comments