SPFx 1.20 release notes

Author: VesaJuvonen

docs/images/120-release-notes/chart-cards-options.png

@@ -0,0 +1,92 @@
+---
+title: SharePoint Framework v1.20 preview release notes
+description: Release notes for the SharePoint Framework v1.20 preview release.
+ms.date: 08/20/2024
+ms.localizationpriority: high
+---
+# SharePoint Framework v1.19 release notes
+
+This release focuses primarely on the new features within the [Microsoft Viva Connections](./viva/overview-viva-connections.md) side with two key new capabilities: new data visualization options for Card Views and HTML Quick View option for Viva Connections Quick Views.
+
+[!INCLUDE spfx-release-beta]
+
+beta.0 **Released:** August 20, 2024
+
+[!INCLUDE [spfx-release-notes-common](../../includes/snippets/spfx-release-notes-common.md)]
+
+## Install the preview version
+
+Install the preview release of the SharePoint Framework (SPFx) by using the **@next** tag
+
+```console
+npm install @microsoft/generator-sharepoint@next --global
+```
+
+## Upgrading projects from the SPFx v1.19 to v1.20 preview version
+
+In the project's **package.json** file, identify all SPFx v1.19 packages. For each SPFx package:
+
+1. Uninstall the existing v1.19 package:
+
+    ```console
+    npm uninstall @microsoft/{spfx-package-name}@1.19
+    ```
+
+1. Install the new v1.20 preview package:
+
+    ```console
+    npm install @microsoft/{spfx-package-name}@1.20.0-beta.0 --save --save-exact
+    ```
+
+[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)]
+
+## New features and capabilities
+
+### New Data Visualization Card options for Viva Connections
+
+As part of the 1.19 release, we provided new line chart card layout option and with the 1.20, we are introducing three new data visualization options: bar chart, pie chart and donat chart.
+
+![Sample chart card layouts](../images/120-release-notes/chart-cards-options.png)
+
+Related updated documentation for the SPFx v1.20 release:
+
+- **[Create a Data Visualization Adaptive Card Extension](viva/get-started/build-data-visualization-adaptive-card-extension.md)** (tutorial): Step-by-step guide on creating Data Visualization Adaptive Card Extension - updated with the 1.20 release details
+- **[Introduction to new data visualization components for Viva Connections](https://www.youtube.com/watch?v=zBLEEF6cC7I)** (video) - This video focuses on the creation of ACE data visualization cards with SPFx and also showcases the future plans within this area. Example charts are also demonstrated in the context of example Viva Connections experience.
+
+New sample showcasing the new data visualization options for ACEs:
+
+- **[Chart Card - Data Visualization Options](https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ChartCard-DataVisualizationOptions)**: Baseline example of the data visualization card rendering options, which was introduced as part of the SPFx 1.20 release.
+
+### HTML Quick View support for Viva Connections cards
+
+With the 1.20 version, we are introducing new option to use HTML to render the Viva Connection Adaptive Card Extension quick views. This will enable more advance user experiences and you can use whatever suitable JavaScript extensibility model (React etc.) in your quick view experiences.
+
+You can start using this option by updating your quick view implementation to be inherited from xxx class, which will be automatically detected by the underlaying platform.
+
+Out-of-the-box OneDrive (files) card is using this rendering option as a reference point.
+
+![Sample chart card layouts](../images/120-release-notes/html-quick-views.png)
+
+Related updated documentation for the SPFx v1.20 release:
+
+- **HTML based quick views**: Conceptual documentation for the HTML Quick views - coming soon
+- **Creating your first HTML based quick view** (tutorial): Step-by-step guide on creating an ACE with the a custom HTML quick view - coming soon
+- **[Introduction to new data visualization components for Viva Connections](https://www.youtube.com/watch?v=DaRoCFNtFrY)** (video) - This video focuses on the creation of ACE data visualization cards with SPFx and also showcases the future plans within this area. Example charts are also demonstrated in the context of example Viva Connections experience.
+
+New sample showcasing the new data visualization options for ACEs:
+
+- **[Basic Card - HTML Quick View](https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-HTML-QuickView)**: Baseline example of the data visualization card rendering options, which was introduced as part of the SPFx 1.20 release.
+
+## Deprecations
+
+No new updates.
+
+## Fixed Issues
+
+No new updates.
+
+## Feedback and issues
+
+We're interested on your feedback around the release. Do let us know any findings or other feedback using the [SPFx issue list](https://github.com/SharePoint/sp-dev-docs/issues).
+
+Happy coding! Sharing is caring! 🧡

docs/images/120-release-notes/html-quick-views.png

@@ -1,7 +1,7 @@
 ---
 title: Create a Data Visualization Adaptive Card Extension
 description: Step-by-step guide on creating Data Visualization Adaptive Card Extension.
-ms.date: 07/19/2024
+ms.date: 08/19/2024
 ms.localizationpriority: high
 ---
 # Create a Data Visualization Adaptive Card Extension
@@ -11,6 +11,9 @@ The [SharePoint Framework v1.19](../../release-1.19.md) introduces a new Data Vi
 > [!NOTE]
 > Before you start, complete the procedures in the following articles to ensure that you understand the basic flow of creating a custom Adaptive Card Extension: [Build your first SharePoint Adaptive Card Extension](./build-first-sharepoint-adaptive-card-extension.md)
 
+> [!IMPORTANT]
+> Line chart data visualization type was released as part of the [SPFx 1.19  release](../../release-1.19.md). Other data visualization types are released as part of the [SPFx 1.20 release](../../release-1.20.md).
+
 ## Scaffold an Adaptive Card Extension project
 
 Create a new project directory for your project and change your current folder to that directory.
@@ -30,7 +33,7 @@ When prompted, enter the following values (select the default option for all oth
 
 At this point, Yeoman installs the required dependencies and scaffolds the solution files. This process might take few minutes.
 
-Next, run **gulp serve** from the command line in the root of the project. Select the add icon in the hosted workbench to open the toolbox, you'll see the **Data Visualization** card:
+Next, run **gulp serve** from the command line in the root of the project. Select the **add** icon in the hosted workbench to open the toolbox, you see the **Data Visualization** card:
 
 ![See the Data Visualization card icon in the workbench toolbox](../../../../docs/images/viva-extensibility/data-visualization/toolbox.png)
 
@@ -83,7 +86,7 @@ Adding zero or one component along with a `dataVisualization` component in the b
 
 #### Right side
 
-Adding more than one component in the card view along with `dataVisualization` component in the body will render the chart on the right side of the card. For example: Header and Footer along with `dataVisualization` component in body.
+Adding more than one component in the card view along with `dataVisualization` component in the body renders the chart on the right side of the card. For example: Header and Footer along with `dataVisualization` component in body.
 
 Locate & replace the `cardViewParameters()` getter with the following code to add a `header` and `footer` to the card:
 
@@ -132,7 +135,7 @@ The ACE class is located in the following file: **./src/adaptiveCardExtensions/d
 
 ## Support for multiple data series in the chart
 
-The ACE `dataVisualization` component supports multiple series lines in the chart. To add multiple lines to the chart, add additional entries to the `body.series` array on the `LineChartCardView` object in the card view.
+The ACE `dataVisualization` component supports multiple series lines in the chart. To add multiple lines to the chart, add other entries to the `body.series` array on the `LineChartCardView` object in the card view.
 
 For example, consider the following data series:
 
@@ -210,87 +213,47 @@ export class CardView extends BaseComponentsCardView<
 }
 ```
 
-This card when in the large mode will generate the following rendering:
+This card when in the large mode generates the following rendering:
 
 ![Chart with three series displayed](../../../../docs/images/viva-extensibility/data-visualization/chart-three-series.png)
 
-## Support for additional chart types
-The SharePoint Framework v1.20 introduces support for newer chart types, enabling developers to create visually appealing data visualizations like bar, pie and donut charts. This section provides an example of each of them.
+## Support for more chart types
+
+The [SharePoint Framework v1.20](../../release-1.20.md) introduces support for newer chart types, enabling developers to create visually appealing data visualizations like bar, pie, and donut charts. This section provides an example of each of them.
 
 ### Bar Chart
+
 To render a vertically grouped bar chart, follow this example:
+
 ```typescript
 // Sample Data
 const seriesData: IDataPoint<string>[] = [
-  {
-    x: "Jan",
-    y: 12986
-  },
-  {
-    x: "Feb",
-    y: 13424
-  },
-  {
-    x: "Mar",
-    y: 17118
-  },
-  {
-    x: "Apr",
-    y: 14017
-  },
-  {
-    x: "May",
-    y: 11245
-  }
+  { x: "Jan", y: 12986 },
+  { x: "Feb", y: 13424 },
+  { x: "Mar", y: 17118 },
+  { x: "Apr", y: 14017 },
+  { x: "May", y: 11245 }
 ];
 
 const seriesData2: IDataPoint<string>[] = [
-  {
-    x: "Jan",
-    y: 19631
-  },
-  {
-    x: "Feb",
-    y: 19905
-  },
-  {
-    x: "Mar",
-    y: 17098
-  },
-  {
-    x: "Apr",
-    y: 11918
-  },
-  {
-    x: "May",
-    y: 10357
-  }
+  { x: "Jan", y: 19631},
+  { x: "Feb", y: 19905},
+  { x: "Mar", y: 17098},
+  { x: "Apr", y: 11918},
+  { x: "May", y: 10357}
 ];
 
 const seriesData3: IDataPoint<string>[] = [
-  {
-    x: "Jan",
-    y: 19762
-  },
-  {
-    x: "Feb",
-    y: 12926
-  },
-  {
-    x: "Mar",
-    y: 17670
-  },
-  {
-    x: "Apr",
-    y: 19055
-  },
-  {
-    x: "May",
-    y: 18142
-  }
+  { x: "Jan", y: 19762},
+  { x: "Feb", y: 12926},
+  { x: "Mar", y: 17670}, 
+  { x: "Apr", y: 19055},
+  { x: "May", y: 18142}
 ];
 ```
+
 Add all three series to the data visualization card view and optionally set the name or color of the individual series:
+
 ```typescript
 export class CardView extends BaseComponentsCardView<
   IDataVisualizationAdaptiveCardExtensionProps,
@@ -321,11 +284,14 @@ export class CardView extends BaseComponentsCardView<
   }
 }
 ```
+
 The rendered bar chart looks something like this:
 ![Vertically grouped bar chart](../../../../docs/images/viva-extensibility/data-visualization/bar-chart.png)
 
 ### Pie/Donut Charts
-Here is an example of the CardView.ts file that renders a Pie chart with the given data:
+
+Here's an example of the CardView.ts file that renders a Pie chart with the given data:
+
 ```typescript
 import {
   BaseComponentsCardView,
@@ -371,7 +337,8 @@ export class CardView extends BaseComponentsCardView<
   }
 }
 ```
-Notice how the `dataVisualizationKind` is set to `pie` and `PieChartCardView` is returned with the required parameters. Upon refreshing the card on the workbench, you will see that a pie chart is rendered:
+
+Notice how the `dataVisualizationKind` is set to `pie` and `PieChartCardView` is returned with the required parameters. Upon refreshing the card on the workbench, you see that a pie chart is rendered:
 ![Pie chart example](../../../../docs/images/viva-extensibility/data-visualization/pie-chart.png)
 
 The `isDonut` flag indicates if the pie chart should be rendered as a donut chart, which is `false` by default. When set to true, the donut chart is rendered as follows: