You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- added uniform note about developer preview & link to 1.19 release notes
- update release notes to link to the tutorial
- fix various markdown issues
- fix formatting issues
- fix issues found by Acrolinx
- added additional code to show how to implement the side-by-side view
title: Create a Data Visualization Adaptive Card Extension
3
-
description: Step by step guide on creating Data Visualization Adaptive Card Extension.
4
-
ms.date: 03/03/2024
3
+
description: Step-by-step guide on creating Data Visualization Adaptive Card Extension.
4
+
ms.date: 04/05/2024
5
5
ms.localizationpriority: high
6
6
---
7
7
# Create a Data Visualization Adaptive Card Extension
8
8
9
-
SharePoint Framework 1.19 introduces a new Data Visualization Template that can be used to implement line charts.
10
-
This tutorial provides step-by-step guidance on implementing Data Visualization with ACEs.
9
+
The [SharePoint Framework v1.19](../../release-1.19.md) introduces a new Data Visualization Template that can be used to implement line charts. This tutorial provides step-by-step guidance on implementing Data Visualization with Adaptive Card Extensions (ACEs).
> This tutorial assumes that you have installed the SPFx v1.19
14
-
>
15
-
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
16
-
-[Build your first SharePoint Adaptive Card Extension](./build-first-sharepoint-adaptive-card-extension.md)
14
+
> 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)
17
15
18
16
## Scaffold an Adaptive Card Extension project
19
17
@@ -25,16 +23,16 @@ Create a new project by running the Yeoman SharePoint Generator from within the
25
23
yo @microsoft/sharepoint
26
24
```
27
25
28
-
When prompted, enter the following values (select the default option for all prompts omitted below):
26
+
When prompted, enter the following values (select the default option for all other prompts):
29
27
30
28
-**What is your solution name?** dataVisualization-tutorial
31
29
-**Which type of client-side component to create?** Adaptive Card Extension
32
-
-**Which template do you want to use?** Data Visualization Card Template (preview)
30
+
-**Which template do you want to use?** Data Visualization Card Template (preview)
33
31
-**What is your Adaptive Card Extension name?** DataVisualization
34
32
35
33
At this point, Yeoman installs the required dependencies and scaffolds the solution files. This process might take few minutes.
36
34
37
-
## Update your project's hosted workbench URL.
35
+
## Update your project's hosted workbench URL
38
36
39
37
When you use the gulp task **serve**, by default it will launch a browser with the specified hosted workbench URL specified in your project. The default URL for the hosted workbench in a new project points to an invalid URL.
40
38
@@ -52,51 +50,26 @@ When you use the gulp task **serve**, by default it will launch a browser with t
52
50
53
51
- Change the `{tenantDomain}` ___domain to the URL of your SharePoint tenant and site you want to use for testing. For example: `https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx`.
54
52
55
-
At this point, if you do `gulp serve`, then you will see the **Data Visualization** card:
53
+
At this point, if you do `gulp serve`, and select the add icon in the hosted workbench to open the toolbox, you'll see the **Data Visualization** card:
56
54
57
55
58
56
59
-
If you add the ACE to the workbench, you will see it already prepared for mock line chart:
57
+
Select the **DataVisualization** component to add it to the workbench. The default rendering renders the line chart using mock data:
58
+
60
59
61
60
62
61
## Explore the scaffolded code
62
+
63
63
### Explore the Card View
64
-
Locate and open the following file in your project: **./src/adaptiveCardExtensions/dataVisualization/cardView/CardView.ts**.
65
-
The card view implements `BaseComponentsCardView` class and implements `cardViewParameters` getter to specify the card configuration:
66
-
```ts
67
-
// Sample Data
64
+
65
+
Locate and open the following file: **./src/adaptiveCardExtensions/dataVisualization/cardView/CardView.ts**. The card view implements the `BaseComponentsCardView` base class `cardViewParameters` getter to specify the card configuration:
66
+
67
+
```typescript
68
68
const seriesData : IDataPoint<Date>[] = [
69
-
{
70
-
x: new Date(2024, 1, 1),
71
-
y: 1000
72
-
},
73
-
{
74
-
x: new Date(2024, 2, 1),
75
-
y: 2400
76
-
},
77
-
{
78
-
x: new Date(2024, 3, 1),
79
-
y: 2000
80
-
},
81
-
{
82
-
x: new Date(2024, 4, 1),
83
-
y: 2900
84
-
},
85
-
{
86
-
x: new Date(2024, 5, 1),
87
-
y: 3000
88
-
},
89
-
{
90
-
x: new Date(2024, 6, 1),
91
-
y: 3100
92
-
}
69
+
... // omitted for brevity
93
70
];
94
71
95
-
export class CardView extends BaseComponentsCardView<
96
-
IDataVisualizationAdaptiveCardExtensionProps,
97
-
IDataVisualizationAdaptiveCardExtensionState,
98
-
IDataVisualizationCardViewParameters
99
-
> {
72
+
export class CardView extends BaseComponentsCardView<..> {
100
73
public get cardViewParameters(): IDataVisualizationCardViewParameters {
101
74
return LineChartCardView({
102
75
cardBar: {
@@ -107,46 +80,72 @@ export class CardView extends BaseComponentsCardView<
107
80
componentName: 'dataVisualization',
108
81
dataVisualizationKind: 'line',
109
82
series: [{
110
-
data: seriesData,
111
-
lastDataPointLabel: '3.1K'
83
+
data: seriesData,
84
+
lastDataPointLabel: '3.1K'
112
85
}]
113
86
}
114
87
});
115
88
}
116
-
117
-
public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
118
-
return {
119
-
type: 'QuickView',
120
-
parameters: {
121
-
view: QUICK_VIEW_REGISTRY_ID
122
-
}
123
-
};
124
-
}
125
89
}
126
90
```
127
-
The **body** section of the card view specifies the dataVisualization component.
128
91
129
-
### Explore possible layouts ###
92
+
Notice how the `body` section of the card view specifies the `dataVisualization` component.
130
93
131
-
Based on the configuration in cardView, a chart can be rendered in 2 layouts
94
+
### Explore possible layouts
132
95
133
-
#### Regular ####
96
+
Based on the configuration in card view, a chart can be rendered in two layouts:
134
97
135
-
Adding 0 or 1 components along with a dataVisualization component in the body
For example: Header and Footer along with dataVisualization component in body.
104
+
#### Right side
105
+
106
+
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.
107
+
108
+
Locate & replace the `cardViewParameters()` getter with the following code to add a `header` and `footer` to the card:
146
144
147
-
148
145
### Explore the Quick Views
146
+
149
147
The ACE class is located in the following file: **./src/adaptiveCardExtensions/dataVisualization/quickView/QuickView.ts** and mostly has the same code as [Generic Card View](./build-first-sharepoint-adaptive-card-extension.md).
150
148
151
149
### Explore the ACE class
152
-
The ACE class is located in the following file: **./src/adaptiveCardExtensions/dataVisualization/dataVisualizationAdaptiveCardExtension.ts** and mostly has the same code as [Generic Card View](./build-first-sharepoint-adaptive-card-extension.md).
150
+
151
+
The ACE class is located in the following file: **./src/adaptiveCardExtensions/dataVisualization/dataVisualizationAdaptiveCardExtension.ts** and mostly has the same code as [Generic Card View](./build-first-sharepoint-adaptive-card-extension.md).
0 commit comments