From 857e30a15d23fdddafd59156ce7540f56d0552d5 Mon Sep 17 00:00:00 2001 From: Anoop T Date: Fri, 13 Sep 2024 19:55:22 +0100 Subject: [PATCH 1/5] Update README.md --- samples/ImageCard-HTML-React-FAQs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/ImageCard-HTML-React-FAQs/README.md b/samples/ImageCard-HTML-React-FAQs/README.md index c42b559..94d0bc7 100644 --- a/samples/ImageCard-HTML-React-FAQs/README.md +++ b/samples/ImageCard-HTML-React-FAQs/README.md @@ -55,7 +55,7 @@ This ACE allows you to display a list of FAQs. The FAQs are stored in the proper - in the command-line run: - **npm install** - **gulp serve** -- Add the "Fequently Asked Quesiotns" ACE to the dashboard page +- Add the "Fequently Asked Questions" ACE to the dashboard page - Edit the properties of the ACE as needed ## References From e8d87117f25c42eb9629172da05901857409d856 Mon Sep 17 00:00:00 2001 From: Anoop T Date: Sat, 14 Sep 2024 08:44:11 +0100 Subject: [PATCH 2/5] Update sample.json --- samples/ChartCard-FilesByContentType/assets/sample.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/ChartCard-FilesByContentType/assets/sample.json b/samples/ChartCard-FilesByContentType/assets/sample.json index a789a1b..5724e08 100644 --- a/samples/ChartCard-FilesByContentType/assets/sample.json +++ b/samples/ChartCard-FilesByContentType/assets/sample.json @@ -40,8 +40,8 @@ ], "authors": [ { - "gitHubAccount": "aimery_thomas", - "pictureUrl": "https://github.com/aimery_thomas.png", + "gitHubAccount": "a1mery", + "pictureUrl": "https://github.com/a1mery.png", "name": "Aimery Thomas" } ], From b49398ff3e5a5fdead498cf4014b57bcb44696f1 Mon Sep 17 00:00:00 2001 From: Anoop T Date: Mon, 16 Sep 2024 12:06:58 +0100 Subject: [PATCH 3/5] Update ImageCard-HTML-React-FAQs sample.json --- .../assets/sample.json | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/samples/ImageCard-HTML-React-FAQs/assets/sample.json b/samples/ImageCard-HTML-React-FAQs/assets/sample.json index 05a8f3a..fe79324 100644 --- a/samples/ImageCard-HTML-React-FAQs/assets/sample.json +++ b/samples/ImageCard-HTML-React-FAQs/assets/sample.json @@ -1,11 +1,11 @@ [{ "name": "pnp-sp-fx-aces-imagecard-html-react-faqs", "source": "pnp", - "title": "Frequently Asked Questions", - "shortDescription": "Displays a list of frequently asked questions.", + "title": "Frequently Asked Questions - Adaptive Card Extension", + "shortDescription": "This Adaptive Card Extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display a list of FAQs. The FAQs are stored in the properties of ACE and are displayed as an accordion in the QuickView.", "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-HTML-React-FAQs", "longDescription": [ - "This sample demonstrates how to create an Adaptive Card Extension that displays a list of frequently asked questions. The sample uses React to render the FAQs in the QuickView." + "This Adaptive Card extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display a list of FAQs. The FAQs are stored in the properties of ACE and are displayed as an accordion in the QuickView." ], "creationDateTime": "2024-09-13", "updateDateTime": "2024-09-13", @@ -22,12 +22,26 @@ "value": "1.20.0-rc1" } ], - "thumbnails": [{ - "type": "image", - "order": 100, - "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-React-FAQs/assets/demo.gif", - "alt": "Preview" - }], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-React-FAQs/assets/demo.gif", + "alt": "Preview" + }, + { + "type": "image", + "order": 200, + "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-React-FAQs/assets/medium.png", + "alt": "Preview" + }, + { + "type": "image", + "order": 300, + "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-React-FAQs/assets/large.png", + "alt": "Preview" + } + ], "authors": [{ "gitHubAccount": "anoopt", "pictureUrl": "https://github.com/anoopt.png", @@ -48,4 +62,4 @@ "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ] - }] \ No newline at end of file + }] From be5cb61aef6ce448b19ea88fb3f8a7e924fa89cb Mon Sep 17 00:00:00 2001 From: a1mery <7100077+a1mery@users.noreply.github.com> Date: Thu, 3 Oct 2024 21:54:58 +0200 Subject: [PATCH 4/5] Code improvements --- .../src/adaptiveCardExtensions/FileService.ts | 94 +++++++++---------- ...FilesByContentTypeAdaptiveCardExtension.ts | 20 ++-- .../filesByContentType/cardView/CardView.ts | 27 ++++-- .../src/adaptiveCardExtensions/types.ts | 31 +++--- 4 files changed, 90 insertions(+), 82 deletions(-) diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts index d0b224e..62b82f8 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts @@ -1,48 +1,48 @@ -import { MSGraphClientV3 } from "@microsoft/sp-http"; -import { AdaptiveCardExtensionContext } from '@microsoft/sp-adaptive-card-extension-base'; -import { GraphFiles } from './types'; - - -export interface IFileService { - _getFiles(siteAddress: string, listTitle: string): Promise; -} - -export class FileService implements IFileService { - public context: AdaptiveCardExtensionContext; - private MSGraphClient: MSGraphClientV3; - - constructor(context: AdaptiveCardExtensionContext) { - this.context = context; - } - - public async _getFiles(siteAddress: string, listTitle: string): Promise { - let files: GraphFiles; - try{ - const client = await this._getClient(); - const siteId = await this._getSiteId(client, siteAddress); - const listId = await this._getListId(client, siteId, listTitle); - files = await client.api("sites/"+siteId+"/lists/"+listId+"/items").select("contentType").version('beta').get(); - } catch{ - files = {value:[]}; - } - return files; - } - - private async _getSiteId (client:MSGraphClientV3, siteAddress: string): Promise { - const hostname = siteAddress.split('/')[2]; - const serverRelativeUrl = siteAddress.split(hostname)[1]; - const siteId = await client.api("sites/"+hostname+":"+serverRelativeUrl).version('beta').get(); - return siteId.id; - } - - private async _getListId (client:MSGraphClientV3, siteId: string, listTitle: string): Promise { - const list = await client.api("sites/"+siteId+"/lists").version('beta').filter("displayName eq '"+listTitle+"'").get(); - return list.value[0].id; - } - - private async _getClient(): Promise { - if (this.MSGraphClient === undefined) - this.MSGraphClient = await this.context.msGraphClientFactory.getClient("3"); - return this.MSGraphClient; - } +import { MSGraphClientV3 } from "@microsoft/sp-http"; +import { AdaptiveCardExtensionContext } from '@microsoft/sp-adaptive-card-extension-base'; +import { GraphFiles } from './types'; + + +export interface IFileService { + _getFiles(siteAddress: string, listTitle: string): Promise; +} + +export class FileService implements IFileService { + public context: AdaptiveCardExtensionContext; + private MSGraphClient: MSGraphClientV3; + + constructor(context: AdaptiveCardExtensionContext) { + this.context = context; + } + + public async _getFiles(siteAddress: string, listTitle: string): Promise { + let files: GraphFiles; + try{ + const client = await this._getClient(); + const siteId = await this._getSiteId(client, siteAddress); + const listId = await this._getListId(client, siteId, listTitle); + files = await client.api("sites/"+siteId+"/lists/"+listId+"/items").select("contentType").version('beta').get(); + } catch{ + files = {value:[]}; + } + return files; + } + + private async _getSiteId (client:MSGraphClientV3, siteAddress: string): Promise { + const hostname = siteAddress.split('/')[2]; + const serverRelativeUrl = siteAddress.split(hostname)[1]; + const siteId = await client.api("sites/"+hostname+":"+serverRelativeUrl).version('beta').get(); + return siteId.id; + } + + private async _getListId (client:MSGraphClientV3, siteId: string, listTitle: string): Promise { + const list = await client.api("sites/"+siteId+"/lists").version('beta').filter("displayName eq '"+listTitle+"'").get(); + return list.value[0].id; + } + + private async _getClient(): Promise { + if (this.MSGraphClient === undefined) + this.MSGraphClient = await this.context.msGraphClientFactory.getClient("3"); + return this.MSGraphClient; + } } \ No newline at end of file diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts index 2ffb84e..6061edd 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts @@ -1,19 +1,19 @@ import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane'; -import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base'; +import { BaseAdaptiveCardExtension, IPieDataPoint } from '@microsoft/sp-adaptive-card-extension-base'; import { CardView } from './cardView/CardView'; import { FilesByContentTypePropertyPane } from './FilesByContentTypePropertyPane'; import { QuickView } from './quickView/QuickView'; import { FileService, IFileService } from '../FileService'; -import { GraphFiles, PieFileData } from '../types'; +import { GraphFiles } from '../types'; export interface IFilesByContentTypeAdaptiveCardExtensionProps { title: string; siteAddress: string; listTitle: string; - filesNumberByCtP: PieFileData[] } export interface IFilesByContentTypeAdaptiveCardExtensionState { + filesNumberByCtP: IPieDataPoint[]; } const CARD_VIEW_REGISTRY_ID: string = 'FilesByContentType_CARD_VIEW'; @@ -27,7 +27,9 @@ export default class FilesByContentTypeAdaptiveCardExtension extends BaseAdaptiv private _deferredPropertyPane: FilesByContentTypePropertyPane; public async onInit(): Promise { - this.state = {}; + this.state = { + filesNumberByCtP: [] + }; // registers the card view to be shown in a dashboard this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView()); // registers the quick view to open via QuickView action @@ -37,16 +39,20 @@ export default class FilesByContentTypeAdaptiveCardExtension extends BaseAdaptiv } private async retrieveFiles(): Promise { - let filesData: PieFileData[] = []; + const service: IFileService = new FileService(this.context); const allFiles: GraphFiles = await service._getFiles(this.properties.siteAddress, this.properties.listTitle); const ctNames: string[] = allFiles.value.map((file) => file.contentType.name); + + let filesData: IPieDataPoint[] = []; let uniqueNames = [...new Set(ctNames)]; uniqueNames.forEach(ctName => { let currentCtCount = allFiles.value.filter(file => file.contentType.name === ctName); - filesData.push({ name: ctName, total: currentCtCount.length }); + filesData.push({ x: ctName, y: currentCtCount.length }); + }) + this.setState({ + filesNumberByCtP: filesData }) - this.properties.filesNumberByCtP = filesData; } diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts index ced4318..dd55dce 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts @@ -3,7 +3,6 @@ import { IDataVisualizationCardViewParameters, IExternalLinkCardAction, IQuickViewCardAction, - IPieDataPoint, PieChartCardView, } from '@microsoft/sp-adaptive-card-extension-base'; import { @@ -12,31 +11,39 @@ import { QUICK_VIEW_REGISTRY_ID, } from '../FilesByContentTypeAdaptiveCardExtension'; -let fileSeries: IPieDataPoint[]= []; - export class CardView extends BaseComponentsCardView< IFilesByContentTypeAdaptiveCardExtensionProps, IFilesByContentTypeAdaptiveCardExtensionState, IDataVisualizationCardViewParameters > { + public get cardViewParameters(): IDataVisualizationCardViewParameters { - fileSeries = []; - this.properties.filesNumberByCtP.forEach(contentType =>{ - fileSeries.push({x: contentType.name, y: contentType.total}); - }); - this.properties.filesNumberByCtP = []; return PieChartCardView({ cardBar: { componentName: 'cardBar', title: this.properties.title }, + header: { + componentName: 'text', + text: this.properties.listTitle + }, body: { componentName: 'dataVisualization', dataVisualizationKind: 'pie', - isDonut: false, + isDonut: true, series: [{ - data: fileSeries, + data: this.state.filesNumberByCtP }] + }, + footer: { + componentName: 'cardButton', + title: 'View Details', + action: { + type: 'QuickView', + parameters: { + view: QUICK_VIEW_REGISTRY_ID + } + } } }); } diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts index 50fdd72..00437e3 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts @@ -1,18 +1,13 @@ -export type File = { - "@odata.etag"?: string; - contentType: { - id: string; - name: string; - } -}; - - -export type GraphFiles = { - "@odata.context"?: string; - value: File[]; -}; - -export type PieFileData ={ - name: string; - total: number; -} \ No newline at end of file +export type File = { + "@odata.etag"?: string; + contentType: { + id: string; + name: string; + } +}; + + +export type GraphFiles = { + "@odata.context"?: string; + value: File[]; +}; \ No newline at end of file From d02729c93a0030abc3d4a8c30f6fe38c8de6cc74 Mon Sep 17 00:00:00 2001 From: a1mery <7100077+a1mery@users.noreply.github.com> Date: Thu, 3 Oct 2024 21:57:30 +0200 Subject: [PATCH 5/5] set isDonut value --- .../filesByContentType/cardView/CardView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts index dd55dce..bf88cf5 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts @@ -30,7 +30,7 @@ export class CardView extends BaseComponentsCardView< body: { componentName: 'dataVisualization', dataVisualizationKind: 'pie', - isDonut: true, + isDonut: false, series: [{ data: this.state.filesNumberByCtP }]