Merge pull request SharePoint#7485 from SamueleFurnari/patch-1

Add steps to allow the DetailedQuickView to works

Author: andrewconnell

docs/spfx/viva/get-started/advanced-quick-view-functionality.md

@@ -1,7 +1,7 @@
 ---
 title: Advanced Quick View Functionality
 description: "This tutorial builds off the tutorial 'Advanced Card View Functionality'."
-ms.date: 10/25/2021
+ms.date: 11/11/2021
 ms.prod: sharepoint
 ms.localizationpriority: high
 ---
@@ -49,11 +49,11 @@ Start with the HelloWorld ACE from the previous tutorial, [Advanced Card View Fu
             "type": "Action.Submit",
             "data": {
               "id": "selectAction",
-              "newIndex": "${index}",
+              "newIndex": "${index}"
             }
           },
           "separator": true,
-          "items": [ // The template for an item in `items`
+          "items": [
             {
               "type": "TextBlock",
               "text": "${title}",
@@ -79,6 +79,26 @@ Start with the HelloWorld ACE from the previous tutorial, [Advanced Card View Fu
     }
     ```
 
+1. As you can see in the JSON template, we use the ${index} to pass the selected item index to the QuickView. To allow this to works, we must add and populate `index` property of  the `IListItem` object defined in the previous tutorial. Open and locate the file **./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts**, than add the property `index` to the `IListItem` definition:
+
+    ```typescript
+    export interface IListItem {
+      title: string;
+      description: string;
+      index: number;
+    }
+    ```
+
+1. Finally locate the `fetchData()` method in the same class and modify the map function inside it, to: 
+
+    ```typescript
+    ...
+    .then((jsonResponse) => jsonResponse.value.map(
+        (item, index) => { return { title: item.Title, description: item.Description, index: index }; })
+    )
+    ...
+    ```
+
 Build and launch the ACE in the hosted workbench:
 
 ```console