honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added sample for ACE

This commit is contained in:
Marcin Wojciechowski 2022-05-05 10:58:49 +02:00
parent a08f327fe4
commit 26e1859ce3
14 changed files with 300 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/react-graph-auto-batching/.yo-rc.json
View File

@ -5,9 +5,10 @@
"libraryId": "03631505-3899-4de0-bebe-f59283d991ba",
"environment": "spo",
"packageManager": "npm",
"isCreatingSolution": true,
"isCreatingSolution": false,
"plusBeta": true,
"isDomainIsolated": false,
"componentType": "webpart"
"componentType": "adaptiveCardExtension",
"templateType": "Image"
}
}

11
samples/react-graph-auto-batching/config/config.json
View File

@ -9,10 +9,19 @@
"manifest": "./src/webparts/graphAutoBatching/GraphAutoBatchingWebPart.manifest.json"
}
]
},
"profile-card-adaptive-card-extension": {
"components": [
{
"entrypoint": "./lib/adaptiveCardExtensions/profileCard/ProfileCardAdaptiveCardExtension.js",
"manifest": "./src/adaptiveCardExtensions/profileCard/ProfileCardAdaptiveCardExtension.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"GraphAutoBatchingWebPartStrings": "lib/webparts/graphAutoBatching/loc/{locale}.js"
"GraphAutoBatchingWebPartStrings": "lib/webparts/graphAutoBatching/loc/{locale}.js",
"ProfileCardAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/profileCard/loc/{locale}.js"
}
}

15
samples/react-graph-auto-batching/package-lock.json generated
View File

@ -2466,6 +2466,21 @@
"typescript": "~3.7.2"
}
},
"@microsoft/sp-adaptive-card-extension-base": {
"version": "1.13.0-beta.17",
"resolved": "https://registry.npmjs.org/@microsoft/sp-adaptive-card-extension-base/-/sp-adaptive-card-extension-base-1.13.0-beta.17.tgz",
"integrity": "sha512-7dN6fMG1WMPptPnhrsKo/cCZIBSWt9ypEfr80aatwT+DSrnezi4aZgz4gQZ1sQc2KdEjpeoikQRajZlnM6/zUg==",
"requires": {
"@microsoft/sp-component-base": "1.13.0-beta.17",
"@microsoft/sp-core-library": "1.13.0-beta.17",
"@microsoft/sp-diagnostics": "1.13.0-beta.17",
"@microsoft/sp-loader": "1.13.0-beta.17",
"@microsoft/sp-lodash-subset": "1.13.0-beta.17",
"@microsoft/sp-module-interfaces": "1.13.0-beta.17",
"@microsoft/sp-property-pane": "1.13.0-beta.17",
"tslib": "~1.10.0"
}
},
"@microsoft/sp-build-core-tasks": {
"version": "1.13.0-beta.17",
"resolved": "https://registry.npmjs.org/@microsoft/sp-build-core-tasks/-/sp-build-core-tasks-1.13.0-beta.17.tgz",

3
samples/react-graph-auto-batching/package.json
View File

@ -16,7 +16,8 @@
"@microsoft/sp-property-pane": "1.13.0-beta.17",
"@microsoft/sp-webpart-base": "1.13.0-beta.17",
"@microsoft/sp-lodash-subset": "1.13.0-beta.17",
"@microsoft/sp-office-ui-fabric-core": "1.13.0-beta.17"
"@microsoft/sp-office-ui-fabric-core": "1.13.0-beta.17",
"@microsoft/sp-adaptive-card-extension-base": "1.13.0-beta.17"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.7": "0.2.3",

29
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/ProfileCardAdaptiveCardExtension.manifest.json Normal file
View File

@ -0,0 +1,29 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "f8630005-04bf-4a6f-a91b-26578106f9a5",
"alias": "ProfileCardAdaptiveCardExtension",
"componentType": "AdaptiveCardExtension",
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportedHosts": ["Dashboard", "SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "bd067b1e-3ad5-4d5d-a5fe-505f07d7f59c", // Dashboard
"group": { "default": "Dashboard" },
"title": { "default": "ProfileCard" },
"description": { "default": "ProfileCard description" },
"officeFabricIconFontName": "SharePointLogo",
"properties": {
"title": "ProfileCard",
"description": "ProfileCard description",
"iconProperty": "" // Default to sharepointlogo
}
}]
}

81
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/ProfileCardAdaptiveCardExtension.ts Normal file
View File

@ -0,0 +1,81 @@
import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base';
import { CardView } from './cardView/CardView';
import { QuickView } from './quickView/QuickView';
import { ProfileCardPropertyPane } from './ProfileCardPropertyPane';
import { BatchGraphClient } from '../../dal/http/BatchGraphClient';
import { SPFxHttpClient } from '../../dal/http/SPFxHttpClient';
import { IHttpClient } from '../../dal/http/IHttpClient';
import { StringUtilities } from '../../utils/StringUtilities';
export interface IProfileCardAdaptiveCardExtensionProps {
title: string;
description: string;
iconProperty: string;
userId: string;
}
export interface IProfileCardAdaptiveCardExtensionState {
user: any;
userPresence: any;
photo: string;
}
const CARD_VIEW_REGISTRY_ID: string = 'ProfileCard_CARD_VIEW';
export const QUICK_VIEW_REGISTRY_ID: string = 'ProfileCard_QUICK_VIEW';
export default class ProfileCardAdaptiveCardExtension extends BaseAdaptiveCardExtension<
IProfileCardAdaptiveCardExtensionProps,
IProfileCardAdaptiveCardExtensionState
> {
private _deferredPropertyPane: ProfileCardPropertyPane | undefined;
private httpClient: IHttpClient;
public async onInit(): Promise<void> {
let client = await this.context.aadHttpClientFactory.getClient('https://graph.microsoft.com');
this.httpClient = new BatchGraphClient(new SPFxHttpClient(client));
let userQuery = this.properties.userId ? `/users/${this.properties.userId}` : "/me"
const [userInfoRequest, userPhotoRequest, presenceInfo] = await Promise.all([this.httpClient.get(userQuery),
this.httpClient.get(userQuery+ "/photo/$value"),
this.httpClient.get(userQuery+ "/presence")]);
const [userResult, photo, presence] = await Promise.all([userInfoRequest.json(), userPhotoRequest.text(),presenceInfo.json()]);
this.state = {
user: userResult,
userPresence: presence.availability,
photo: `data:image/png;base64,${photo.replace("\"","").replace("\"","")}`
};
this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
return Promise.resolve();
}
public get title(): string {
return this.state?.user?.displayName || "";
}
protected get iconProperty(): string {
return this.properties.iconProperty || require('./assets/SharePointLogo.svg');
}
protected loadPropertyPaneResources(): Promise<void> {
return import(
/* webpackChunkName: 'ProfileCard-property-pane'*/
'./ProfileCardPropertyPane'
)
.then(
(component) => {
this._deferredPropertyPane = new component.ProfileCardPropertyPane();
}
);
}
protected renderCard(): string | undefined {
return CARD_VIEW_REGISTRY_ID;
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return this._deferredPropertyPane!.getPropertyPaneConfiguration();
}
}

34
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/ProfileCardPropertyPane.ts Normal file
View File

@ -0,0 +1,34 @@
import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
import * as strings from 'ProfileCardAdaptiveCardExtensionStrings';
export class ProfileCardPropertyPane {
public getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: { description: strings.PropertyPaneDescription },
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('title', {
label: strings.TitleFieldLabel
}),
PropertyPaneTextField('iconProperty', {
label: strings.IconPropertyFieldLabel
}),
PropertyPaneTextField('userId', {
label: "User Id"
}),
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel,
multiline: true
})
]
}
]
}
]
};
}
}

8
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/assets/SharePointLogo.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3125 13.0625C13.9196 13.0625 16.8438 10.1384 16.8438 6.53125C16.8438 2.92414 13.9196 0 10.3125 0C6.70539 0 3.78125 2.92414 3.78125 6.53125C3.78125 10.1384 6.70539 13.0625 10.3125 13.0625Z" fill="#036C70"/>
<path d="M16.5 17.875C19.5376 17.875 22 15.4126 22 12.375C22 9.33743 19.5376 6.875 16.5 6.875C13.4624 6.875 11 9.33743 11 12.375C11 15.4126 13.4624 17.875 16.5 17.875Z" fill="#1A9BA1"/>
<path d="M11 22C13.468 22 15.4688 19.9993 15.4688 17.5312C15.4688 15.0632 13.468 13.0625 11 13.0625C8.53198 13.0625 6.53125 15.0632 6.53125 17.5312C6.53125 19.9993 8.53198 22 11 22Z" fill="#37C6D0"/>
<path opacity="0.5" d="M13.75 5.50464H3.88472C3.82303 5.84353 3.78843 6.1868 3.78125 6.53119C3.78125 8.26338 4.46936 9.92463 5.69421 11.1495C6.91906 12.3743 8.5803 13.0624 10.3125 13.0624C10.5137 13.0624 10.7035 13.021 10.9001 13.0032C10.9031 13.0259 10.9038 13.0493 10.907 13.0718C10.1797 13.0855 9.46672 13.2769 8.83032 13.6293C8.19392 13.9817 7.6534 14.4844 7.25589 15.0937C6.85838 15.703 6.61595 16.4002 6.54975 17.1246C6.48355 17.8491 6.59559 18.5787 6.87609 19.2499H12.3743C12.7356 19.2499 13.0932 19.1788 13.427 19.0406C13.7607 18.9023 14.0639 18.6997 14.3194 18.4443C14.5748 18.1889 14.7774 17.8856 14.9156 17.5519C15.0539 17.2182 15.125 16.8605 15.125 16.4993V6.87964C15.125 6.51497 14.9801 6.16523 14.7223 5.90737C14.4644 5.6495 14.1147 5.50464 13.75 5.50464Z" fill="black"/>
<path d="M12.375 4.125H1.375C0.615608 4.125 0 4.74061 0 5.5V16.5C0 17.2594 0.615608 17.875 1.375 17.875H12.375C13.1344 17.875 13.75 17.2594 13.75 16.5V5.5C13.75 4.74061 13.1344 4.125 12.375 4.125Z" fill="#038387"/>
<path d="M5.07712 10.8554C4.80603 10.6695 4.58101 10.4241 4.41928 10.138C4.26016 9.83564 4.18125 9.49752 4.19007 9.15597C4.17534 8.6949 4.32648 8.24384 4.61603 7.88472C4.91574 7.53092 5.3077 7.26716 5.74833 7.12277C6.24641 6.95324 6.76967 6.8695 7.29578 6.87512C7.98742 6.84915 8.67801 6.94905 9.33393 7.16996V8.65529C9.04944 8.47693 8.73813 8.34545 8.41191 8.26587C8.05945 8.17641 7.69716 8.13156 7.33353 8.13236C6.94967 8.11836 6.5685 8.20157 6.2254 8.37427C6.0939 8.43448 5.98253 8.53131 5.90461 8.65316C5.82669 8.77501 5.78552 8.91673 5.78603 9.06137C5.78391 9.24141 5.85046 9.4155 5.97214 9.54823C6.11501 9.70135 6.28496 9.82675 6.47341 9.9181C6.68388 10.0258 6.99754 10.1686 7.41439 10.3465C7.46064 10.3616 7.50568 10.3802 7.54914 10.4021C7.96131 10.5685 8.35821 10.7705 8.73535 11.0057C9.04484 11.1955 9.29704 11.4657 9.46511 11.7875C9.63317 12.1093 9.7108 12.4707 9.68973 12.8331C9.71074 13.3069 9.57003 13.7738 9.29071 14.1571C9.01622 14.5043 8.64457 14.7618 8.22312 14.897C7.73228 15.056 7.2186 15.133 6.7027 15.1251C6.24096 15.1271 5.77996 15.088 5.32516 15.0082C4.93957 14.9448 4.56359 14.8326 4.20624 14.6745V13.1057C4.54746 13.3572 4.93095 13.5456 5.33855 13.662C5.74129 13.7918 6.16102 13.8611 6.58408 13.8679C6.97637 13.8933 7.36787 13.8075 7.71359 13.6204C7.83325 13.5482 7.93154 13.4455 7.99837 13.3228C8.06519 13.2001 8.09814 13.0618 8.09382 12.9221C8.09573 12.7231 8.01926 12.5312 7.88091 12.3881C7.71009 12.2151 7.51135 12.0722 7.29303 11.9654C7.04326 11.8356 6.67394 11.665 6.18507 11.4536C5.79647 11.2922 5.42526 11.0917 5.07712 10.8554Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

26
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/cardView/CardView.ts Normal file
View File

@ -0,0 +1,26 @@
import {
BaseImageCardView,
IImageCardParameters,
IExternalLinkCardAction,
IQuickViewCardAction
} from '@microsoft/sp-adaptive-card-extension-base';
import * as strings from 'ProfileCardAdaptiveCardExtensionStrings';
import { IProfileCardAdaptiveCardExtensionProps, IProfileCardAdaptiveCardExtensionState } from '../ProfileCardAdaptiveCardExtension';
export class CardView extends BaseImageCardView<IProfileCardAdaptiveCardExtensionProps, IProfileCardAdaptiveCardExtensionState> {
public get data(): IImageCardParameters {
return {
primaryText: this.state.userPresence,
imageUrl: this.state.photo
};
}
public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
return {
type: 'ExternalLink',
parameters: {
target: 'https://www.bing.com'
}
};
}
}

14
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/loc/en-us.js vendored Normal file
View File

@ -0,0 +1,14 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field",
"TitleFieldLabel": "Card Title",
"IconPropertyFieldLabel": "Card Icon",
"Title": "Adaptive Card Extension",
"SubTitle": "Quick View",
"Description": "Create your SPFx Adaptive Card Extension solution!",
"PrimaryText": "SPFx Adaptive Card Extension",
"QuickViewButton": "Quick View"
}
});

17
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/loc/mystring.d.ts vendored Normal file
View File

@ -0,0 +1,17 @@
declare interface IProfileCardAdaptiveCardExtensionStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
TitleFieldLabel: string;
IconPropertyFieldLabel: string;
Title: string;
SubTitle: string;
Description: string;
PrimaryText: string;
QuickViewButton: string;
}
declare module 'ProfileCardAdaptiveCardExtensionStrings' {
const strings: IProfileCardAdaptiveCardExtensionStrings;
export = strings;
}

27
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/quickView/QuickView.ts Normal file
View File

@ -0,0 +1,27 @@
import { ISPFxAdaptiveCard, BaseAdaptiveCardView } from '@microsoft/sp-adaptive-card-extension-base';
import * as strings from 'ProfileCardAdaptiveCardExtensionStrings';
import { IProfileCardAdaptiveCardExtensionProps, IProfileCardAdaptiveCardExtensionState } from '../ProfileCardAdaptiveCardExtension';
export interface IQuickViewData {
subTitle: string;
title: string;
description: string;
}
export class QuickView extends BaseAdaptiveCardView<
IProfileCardAdaptiveCardExtensionProps,
IProfileCardAdaptiveCardExtensionState,
IQuickViewData
> {
public get data(): IQuickViewData {
return {
subTitle: strings.SubTitle,
title: strings.Title,
description: this.properties.description
};
}
public get template(): ISPFxAdaptiveCard {
return require('./template/QuickViewTemplate.json');
}
}

33
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/quickView/template/QuickViewTemplate.json Normal file
View File

@ -0,0 +1,33 @@
{
"schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${title}"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${subTitle}",
"wrap": true
}
]
}
]
},
{
"type": "TextBlock",
"text": "${description}",
"wrap": true
}
]
}

2
samples/react-graph-auto-batching/src/webparts/graphAutoBatching/components/UserCard.tsx
View File

@ -20,7 +20,7 @@ export function UserCard(props: IUserCardProps){
setUser({
...userResult,
presence: presence.availability,
photo: photo.replace("\"","").replace("\"","")
photo: `data:image/png;base64,${photo.replace("\"","").replace("\"","")}`
});
setLoading(false);
};