Updated AdaptiveCards and fixed error handling
This commit is contained in:
Hugo Bernier
parent
63b46bf6d8
commit
727d6e7d74
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "adaptive-card-host",
|
||||
"version": "2.2.0",
|
||||
"version": "2.2.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -1956,9 +1956,9 @@
|
|||
}
|
||||
},
|
||||
"@microsoft/recognizers-text-data-types-timex-expression": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/recognizers-text-data-types-timex-expression/-/recognizers-text-data-types-timex-expression-1.1.4.tgz",
|
||||
"integrity": "sha512-2vICaEJfV9EpaDKs5P1PLAEs+WpNqrtpkl7CLsmc5gKmxgpQtsojG4tk6km5JRKg1mYuLV5ZzJ/65oOEeyTMvQ=="
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/recognizers-text-data-types-timex-expression/-/recognizers-text-data-types-timex-expression-1.3.0.tgz",
|
||||
"integrity": "sha512-REHUXmMUI1jL3b9v+aSdzKxLxRdejsfg9McYRxY3LW0Gu4UbwD7Q+K6mtSo40cwg8uh6fiV9GY8hDuKXHH6dVA=="
|
||||
},
|
||||
"@microsoft/rush-lib": {
|
||||
"version": "5.15.1",
|
||||
|
|
@ -3391,6 +3391,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/atob-lite/-/atob-lite-2.0.0.tgz",
|
||||
"integrity": "sha512-7bjymPR7Ffa1/L3HskkaxMgTQDtwFObbISzHm9g3T12VyD89IiHS3BBVojlQHyZRiIilzdh0WT1gwwgyyBtLGQ=="
|
||||
},
|
||||
"@types/btoa-lite": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/btoa-lite/-/btoa-lite-1.0.0.tgz",
|
||||
"integrity": "sha512-wJsiX1tosQ+J5+bY5LrSahHxr2wT+uME5UDwdN1kg4frt40euqA+wzECkmq4t5QbveHiJepfdThgQrPw6KiSlg=="
|
||||
},
|
||||
"@types/chai": {
|
||||
"version": "3.4.34",
|
||||
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-3.4.34.tgz",
|
||||
|
|
@ -3487,10 +3492,18 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.117.tgz",
|
||||
"integrity": "sha512-xyf2m6tRbz8qQKcxYZa7PA4SllYcay+eh25DN3jmNYY6gSTL7Htc/bttVdkqj2wfJGbeWlQiX8pIyJpKU+tubw=="
|
||||
},
|
||||
"@types/lodash.isequal": {
|
||||
"version": "4.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.5.tgz",
|
||||
"integrity": "sha512-4IKbinG7MGP131wRfceK6W4E/Qt3qssEFLF30LnJbjYiSfHGGRU/Io8YxXrZX109ir+iDETC8hw8QsDijukUVg==",
|
||||
"requires": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"@types/lru-cache": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-5.1.0.tgz",
|
||||
"integrity": "sha512-RaE0B+14ToE4l6UqdarKPnXwVDuigfFv+5j9Dze/Nqr23yyuqdNvzcZi3xB+3Agvi5R4EOgAksfv3lXX4vBt9w=="
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
"integrity": "sha512-ssE3Vlrys7sdIzs5LOxCzTVMsU7i9oa/IaW92wF32JFb3CVczqOkru2xspuKczHEbG3nvmPY7IFqVmGGHdNbYw=="
|
||||
},
|
||||
"@types/mdast": {
|
||||
"version": "3.0.3",
|
||||
|
|
@ -3534,14 +3547,6 @@
|
|||
"integrity": "sha1-jBiPbjTC58Px0BJ9kI1aNuWmDck=",
|
||||
"dev": true
|
||||
},
|
||||
"@types/moment-timezone": {
|
||||
"version": "0.5.30",
|
||||
"resolved": "https://registry.npmjs.org/@types/moment-timezone/-/moment-timezone-0.5.30.tgz",
|
||||
"integrity": "sha512-aDVfCsjYnAQaV/E9Qc24C5Njx1CoDjXsEgkxtp9NyXDpYu4CCbmclb6QhWloS9UTU/8YROUEEdEkWI0D7DxnKg==",
|
||||
"requires": {
|
||||
"moment-timezone": "*"
|
||||
}
|
||||
},
|
||||
"@types/mz": {
|
||||
"version": "0.0.32",
|
||||
"resolved": "https://registry.npmjs.org/@types/mz/-/mz-0.0.32.tgz",
|
||||
|
|
@ -3851,9 +3856,9 @@
|
|||
}
|
||||
},
|
||||
"@types/xmldom": {
|
||||
"version": "0.1.30",
|
||||
"resolved": "https://registry.npmjs.org/@types/xmldom/-/xmldom-0.1.30.tgz",
|
||||
"integrity": "sha512-edqgAFXMEtVvaBZ3YnhamvmrHjoYpuxETmnb0lbTZmf/dXpAsO9ZKotUO4K2rn2SIZBDFCMOuA7fOe0H6dRZcA=="
|
||||
"version": "0.1.31",
|
||||
"resolved": "https://registry.npmjs.org/@types/xmldom/-/xmldom-0.1.31.tgz",
|
||||
"integrity": "sha512-bVy7s0nvaR5D1mT1a8ZkByHWNOGb6Vn4yi5TWhEdmyKlAG+08SA7Md6+jH+tYmMLueAwNeWvHHpeKrr6S4c4BA=="
|
||||
},
|
||||
"@types/yargs": {
|
||||
"version": "0.0.34",
|
||||
|
|
@ -4322,50 +4327,67 @@
|
|||
"integrity": "sha1-4rwxvHEqr/ugU6pN1GvITrXSCQ8="
|
||||
},
|
||||
"adaptive-expressions": {
|
||||
"version": "4.11.1",
|
||||
"resolved": "https://registry.npmjs.org/adaptive-expressions/-/adaptive-expressions-4.11.1.tgz",
|
||||
"integrity": "sha512-lj9yfCs/RYws70BrjxIzqkRgmVu9Xrc9XR67Kc8fv6KmuaoddVrrq3CE1cdz20mtkTWrRLSYEk/N+zvmYlRiww==",
|
||||
"version": "4.14.1",
|
||||
"resolved": "https://registry.npmjs.org/adaptive-expressions/-/adaptive-expressions-4.14.1.tgz",
|
||||
"integrity": "sha512-25ewH/b/ogMWw3yGjH40iNrLmvfYAoabS1hGb/GLimOVNOLgiUjuc2vtG3fJmJRqbpQNElrFbfk8NTuGuOBRVw==",
|
||||
"requires": {
|
||||
"@microsoft/recognizers-text-data-types-timex-expression": "1.1.4",
|
||||
"@microsoft/recognizers-text-data-types-timex-expression": "1.3.0",
|
||||
"@types/atob-lite": "^2.0.0",
|
||||
"@types/btoa-lite": "^1.0.0",
|
||||
"@types/lodash.isequal": "^4.5.5",
|
||||
"@types/lru-cache": "^5.1.0",
|
||||
"@types/moment-timezone": "^0.5.13",
|
||||
"@types/xmldom": "^0.1.29",
|
||||
"@types/xmldom": "^0.1.30",
|
||||
"antlr4ts": "0.5.0-alpha.3",
|
||||
"atob-lite": "^2.0.0",
|
||||
"big-integer": "^1.6.48",
|
||||
"btoa-lite": "^1.0.0",
|
||||
"d3-format": "^1.4.4",
|
||||
"dayjs": "^1.10.3",
|
||||
"jspath": "^0.4.0",
|
||||
"lodash": "^4.17.19",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lru-cache": "^5.1.1",
|
||||
"moment": "^2.25.1",
|
||||
"moment-timezone": "^0.5.28"
|
||||
"uuid": "^8.3.2",
|
||||
"x2js": "^3.4.0",
|
||||
"xml2js": "^0.4.23",
|
||||
"xmldom": "^0.5.0",
|
||||
"xpath": "^0.0.32"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
},
|
||||
"xml2js": {
|
||||
"version": "0.4.23",
|
||||
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
|
||||
"integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
|
||||
"requires": {
|
||||
"sax": ">=0.6.0",
|
||||
"xmlbuilder": "~11.0.0"
|
||||
}
|
||||
},
|
||||
"xmlbuilder": {
|
||||
"version": "11.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
|
||||
"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"adaptivecards": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/adaptivecards/-/adaptivecards-1.2.6.tgz",
|
||||
"integrity": "sha512-/l34rvdRzQ20QdGLk+awRUotexu3N4Ih3O0qR8cM+2wWe0pggvWhmFdwVFmM+YgIS5pWtl2u7XAJynUaFIQAIw=="
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/adaptivecards/-/adaptivecards-2.9.0.tgz",
|
||||
"integrity": "sha512-TXbtzc6LwisTdlfEAooropj9ZwgcQz8bSirWOnph3bzJJr9QF8YQCfSIpcAXKTJ7b6YrOfH+9xw/a8RaKgeOZg=="
|
||||
},
|
||||
"adaptivecards-fabric": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/adaptivecards-fabric/-/adaptivecards-fabric-1.1.1.tgz",
|
||||
"integrity": "sha512-wPuJYpkrmYhsqb3JO0d6XXVe2SfqK3pIFkLkzh3tGaSrSo5pvRIDLI6/E3PF1W8QAna2/Dt/gHqQMA5GwQJgkw=="
|
||||
"adaptivecards-fluentui": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/adaptivecards-fluentui/-/adaptivecards-fluentui-0.5.3.tgz",
|
||||
"integrity": "sha512-cWqY0lQvGQ8pVZ7YFwSXvFkZnczO0qc4sLxg3UN84J0+nYVoQAUntT9AbFgrTUXR+WOO/pN18Vz/YAVvuGC5Zg=="
|
||||
},
|
||||
"adaptivecards-templating": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/adaptivecards-templating/-/adaptivecards-templating-1.1.0.tgz",
|
||||
"integrity": "sha512-yaEJibT/DAg/184tJyphDAs3EUY2XCSAs753TPrrOl3VJ5E367XQoG/ywTnfOZsAiz6Jf/HGBYTv55hFXVN0KQ==",
|
||||
"requires": {
|
||||
"adaptive-expressions": "^4.9.2"
|
||||
}
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/adaptivecards-templating/-/adaptivecards-templating-2.1.0.tgz",
|
||||
"integrity": "sha512-XrO6PlGHT3Tfi8hlCYmholiwKUMOR5t/Y4pFqtNVKXJn5HUdE9A4LdZMhg9tnwjXqJ51t1XVHGm9nOLEDVICPg=="
|
||||
},
|
||||
"agent-base": {
|
||||
"version": "4.3.0",
|
||||
|
|
@ -5604,6 +5626,11 @@
|
|||
"node-int64": "^0.4.0"
|
||||
}
|
||||
},
|
||||
"btoa-lite": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/btoa-lite/-/btoa-lite-1.0.0.tgz",
|
||||
"integrity": "sha1-M3dm2hWAEhD92VbCLpxokaudAzc="
|
||||
},
|
||||
"buffer": {
|
||||
"version": "4.9.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
|
||||
|
|
@ -6932,6 +6959,11 @@
|
|||
"integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=",
|
||||
"dev": true
|
||||
},
|
||||
"dayjs": {
|
||||
"version": "1.10.6",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.6.tgz",
|
||||
"integrity": "sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw=="
|
||||
},
|
||||
"deasync": {
|
||||
"version": "0.1.21",
|
||||
"resolved": "https://registry.npmjs.org/deasync/-/deasync-0.1.21.tgz",
|
||||
|
|
@ -13571,14 +13603,6 @@
|
|||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
|
||||
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
|
||||
},
|
||||
"moment-timezone": {
|
||||
"version": "0.5.33",
|
||||
"resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.33.tgz",
|
||||
"integrity": "sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==",
|
||||
"requires": {
|
||||
"moment": ">= 2.9.0"
|
||||
}
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||
|
|
@ -16650,8 +16674,7 @@
|
|||
"sax": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.13.6",
|
||||
|
|
@ -20059,6 +20082,14 @@
|
|||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"x2js": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/x2js/-/x2js-3.4.1.tgz",
|
||||
"integrity": "sha512-RCMEmHNsyeyzF5NyGHbmCCZU9N8uMiz9FluAj3CpfVREHpgm3JB9Wr/dEWdPqGHmK3lRd2fm0ccOWtuJ2YUowQ==",
|
||||
"requires": {
|
||||
"xmldom": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"xml": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
|
||||
|
|
@ -20094,6 +20125,16 @@
|
|||
"integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
|
||||
"dev": true
|
||||
},
|
||||
"xmldom": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
|
||||
"integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA=="
|
||||
},
|
||||
"xpath": {
|
||||
"version": "0.0.32",
|
||||
"resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.32.tgz",
|
||||
"integrity": "sha512-rxMJhSIoiO8vXcWvSifKqhvV96GjiD5wYb8/QHdoRyQvraTpp4IEv944nhGausZZ3u7dhQXteZuZbaqfpB7uYw=="
|
||||
},
|
||||
"xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -24,9 +24,10 @@
|
|||
"@pnp/spfx-controls-react": "1.16.0",
|
||||
"@pnp/spfx-property-controls": "^1.18.0",
|
||||
"@uifabric/fluent-theme": "^7.4.3",
|
||||
"adaptivecards": "^1.2.6",
|
||||
"adaptivecards-fabric": "^1.1.1",
|
||||
"adaptivecards-templating": "1.1.0",
|
||||
"adaptive-expressions": "^4.14.1",
|
||||
"adaptivecards": "^2.9.0",
|
||||
"adaptivecards-fluentui": "^0.5.3",
|
||||
"adaptivecards-templating": "^2.1.0",
|
||||
"markdown-it": "^10.0.0",
|
||||
"office-ui-fabric-react": "^6.189.2",
|
||||
"react": "16.8.5",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { IAdaptiveCardProps } from './IAdaptiveCardProps';
|
||||
|
||||
import * as AdaptiveCards from "adaptivecards";
|
||||
import * as AC from "adaptivecards";
|
||||
import * as ACData from "adaptivecards-templating";
|
||||
import * as ACFabric from "adaptivecards-fabric";
|
||||
import * as ACFluentUI from "adaptivecards-fluentui";
|
||||
|
||||
// Support for theme and section color
|
||||
import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
|
|
@ -16,8 +16,6 @@ import * as markdownit from "markdown-it";
|
|||
|
||||
import { IAdaptiveCardState } from '.';
|
||||
|
||||
import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
|
||||
|
||||
// Localization
|
||||
import * as strings from 'AdaptiveCardHostWebPartStrings';
|
||||
|
||||
|
|
@ -49,15 +47,10 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
|
|||
}
|
||||
|
||||
public render(): React.ReactElement<IAdaptiveCardProps> {
|
||||
const hasErrorHander: boolean = (this.state.errors && this.state.errors.length > 0 && this.props.errorTemplate) ? true : false;
|
||||
return <>
|
||||
{this.state.errors.length > 0 &&
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline={true}>
|
||||
{strings.AdaptiveCardErrorIntro}<br />
|
||||
{this.state.errors.map((error: string) => {
|
||||
return <p>{error}</p>;
|
||||
})}
|
||||
</MessageBar>
|
||||
}
|
||||
{ hasErrorHander && typeof this.props.errorTemplate === "function" && this.props.errorTemplate(this.state.errors) }
|
||||
{ hasErrorHander && this.props.errorTemplate && typeof this.props.errorTemplate !== "function" && this.props.errorTemplate }
|
||||
<div className={this.props.className} ref={(elm) => { this._acContainer = elm; }}></div>
|
||||
</>;
|
||||
}
|
||||
|
|
@ -78,7 +71,7 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
|
|||
templatePayload = JSON.parse(this.props.template);
|
||||
} catch (error) {
|
||||
console.error("Something went wrong with the template", error);
|
||||
this._errorHandler(strings.TemplatingJsonError + error);
|
||||
this._errorHandler([strings.TemplatingJsonError + error]);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -86,23 +79,23 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
|
|||
var template = new ACData.Template(templatePayload);
|
||||
|
||||
var context: any = {
|
||||
"$root":{}
|
||||
"$root": {}
|
||||
};
|
||||
|
||||
try {
|
||||
context.$root = JSON.parse(this.props.data);
|
||||
} catch (error) {
|
||||
console.error("Error parsing the data JSON", error);
|
||||
this._errorHandler(strings.DataJsonError + error);
|
||||
this._errorHandler([strings.DataJsonError + error]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Expand the card by combining the template and data
|
||||
card = template.expand(context);
|
||||
// Expand the card by combining the template and data
|
||||
card = template.expand(context);
|
||||
} catch (error) {
|
||||
console.error("Error combining template and data", error);
|
||||
this._errorHandler(strings.DataJsonError + error);
|
||||
this._errorHandler([strings.DataJsonError + error]);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
|
|
@ -110,35 +103,51 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
|
|||
card = JSON.parse(this.props.template);
|
||||
} catch (error) {
|
||||
console.error("Error parsing template", error);
|
||||
this._errorHandler(strings.TemplateJsonError + error);
|
||||
this._errorHandler([strings.TemplateJsonError + error]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Create an AdaptiveCard instance
|
||||
let adaptiveCard = new AdaptiveCards.AdaptiveCard();
|
||||
const adaptiveCard: AC.AdaptiveCard = new AC.AdaptiveCard();
|
||||
|
||||
// Use Fabric controls when rendering Adaptive Cards
|
||||
ACFabric.useFabricComponents();
|
||||
ACFluentUI.useFluentUI();
|
||||
|
||||
// Get the semantic colors to adapt to changing section colors
|
||||
this._adjustThemeColors(adaptiveCard);
|
||||
|
||||
// Handle parsing markdown from HTML
|
||||
AdaptiveCards.AdaptiveCard.onProcessMarkdown = this._processMarkdownHandler;
|
||||
AC.AdaptiveCard.onProcessMarkdown = this._processMarkdownHandler;
|
||||
|
||||
// Set the adaptive card's event handlers. onExecuteAction is invoked
|
||||
// whenever an action is clicked in the card
|
||||
adaptiveCard.onExecuteAction = this._executeActionHandler;
|
||||
|
||||
// Parse the card payload
|
||||
adaptiveCard.parse(card, errors);
|
||||
let serializationContext = new AC.SerializationContext();
|
||||
|
||||
this.setState({
|
||||
errors: errors.map((error: IValidationError) => {
|
||||
return error.message;
|
||||
})
|
||||
});
|
||||
serializationContext.onParseElement = (element: AC.CardElement, _source: any, _sercontext: AC.SerializationContext) => {
|
||||
let violations: Array<string> = [];
|
||||
|
||||
if (_sercontext.eventCount > 0) {
|
||||
|
||||
for (let errorIndex = 0; errorIndex < _sercontext.eventCount; errorIndex++) {
|
||||
const errorItem: AC.IValidationEvent = _sercontext.getEventAt(errorIndex);
|
||||
violations.push(errorItem.message);
|
||||
}
|
||||
|
||||
if (this.props.onParseError) {
|
||||
this.props.onParseError(violations);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
errors: violations
|
||||
});
|
||||
};
|
||||
|
||||
// Parse the card payload
|
||||
adaptiveCard.parse(card, serializationContext);
|
||||
|
||||
// Empty the div so we can replace it
|
||||
while (this._acContainer.firstChild) {
|
||||
|
|
@ -190,7 +199,7 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
|
|||
* Adjust Adaptive Card colors based on theme colors
|
||||
* @param adaptiveCard the Adaptive Cards for which you want to adjust the theme colors
|
||||
*/
|
||||
private _adjustThemeColors(adaptiveCard: AdaptiveCards.AdaptiveCard) {
|
||||
private _adjustThemeColors(adaptiveCard: AC.AdaptiveCard) {
|
||||
// Get the theme colors from the props -- if any
|
||||
const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
|
||||
|
||||
|
|
@ -200,7 +209,7 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
|
|||
// Host Config defines the style and behavior of a card
|
||||
|
||||
// I mapped as many theme colors as I could. Feel free to adjust the colours
|
||||
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
|
||||
adaptiveCard.hostConfig = new AC.HostConfig({
|
||||
"separator": {
|
||||
"lineThickness": 1,
|
||||
"lineColor": semanticColors.bodyFrameDivider
|
||||
|
|
@ -232,9 +241,12 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
|
|||
}
|
||||
}
|
||||
|
||||
private _errorHandler(error: string) {
|
||||
private _errorHandler(errors: string[]) {
|
||||
if (this.props.onParseError && errors.length > 0) {
|
||||
this.props.onParseError(errors);
|
||||
}
|
||||
this.setState({
|
||||
errors: [error]
|
||||
errors: errors
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,44 @@ import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
|||
import { IAdaptiveCardActionResult } from './IAdaptiveCardActionResult';
|
||||
|
||||
export interface IAdaptiveCardProps {
|
||||
/**
|
||||
* The theme variant of the current host section
|
||||
*/
|
||||
themeVariant?: IReadonlyTheme | undefined;
|
||||
|
||||
/**
|
||||
* The Adaptive Card template
|
||||
*/
|
||||
template: string;
|
||||
|
||||
/**
|
||||
* The data JSON, if using Adapive Card templating
|
||||
*/
|
||||
data: string;
|
||||
|
||||
/**
|
||||
* Whether we should use Adaptive Card templating?
|
||||
* True will use the data property, false will use the template property
|
||||
*/
|
||||
useTemplating: boolean;
|
||||
|
||||
/**
|
||||
* The CSS classname to use for the rendering the Adaptive Card
|
||||
*/
|
||||
className?: string;
|
||||
|
||||
/**
|
||||
* If an action is triggered, this will be the result of the action
|
||||
*/
|
||||
onExecuteAction?: (action: IAdaptiveCardActionResult) => void;
|
||||
onParseSuccess?: () => void;
|
||||
|
||||
/**
|
||||
* Get notified where an error is found in the Adaptive Card
|
||||
*/
|
||||
onParseError?: (errors: Array<string>) => void;
|
||||
|
||||
/**
|
||||
* The template or function to use when an error is found in the Adaptive Card
|
||||
*/
|
||||
errorTemplate?: JSX.Element | Function;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ import { MessageBar, MessageBarType, MessageBarButton } from 'office-ui-fabric-r
|
|||
// Localization
|
||||
import * as strings from 'AdaptiveCardHostWebPartStrings';
|
||||
|
||||
import { DisplayMode } from '@microsoft/sp-core-library';
|
||||
|
||||
export default class AdaptiveCardHost extends React.Component<IAdaptiveCardHostProps, {}> {
|
||||
|
||||
/**
|
||||
|
|
@ -70,6 +72,7 @@ export default class AdaptiveCardHost extends React.Component<IAdaptiveCardHostP
|
|||
>
|
||||
{strings.AdaptingTemplatingWarningIntro}<a href={strings.AdaptiveCardTemplatingMoreInfoLinkUrl} target='_blank'>{strings.AdaptiveCardTemplating}</a>{strings.AdaptiveCardWarningPartTwo}<strong>{strings.UseAdaptiveTemplatingLabel}</strong>{strings.AdaptiveTemplatingEnd}
|
||||
</MessageBar>}
|
||||
|
||||
<AdaptiveCard
|
||||
template={template}
|
||||
data={data}
|
||||
|
|
@ -77,6 +80,22 @@ export default class AdaptiveCardHost extends React.Component<IAdaptiveCardHostP
|
|||
themeVariant={themeVariant}
|
||||
onExecuteAction={this._executeActionHandler}
|
||||
className={styles.adaptiveCardHost}
|
||||
onParseError={(errors: string[]) => {
|
||||
console.log("Errors parsing adpative cards", errors);
|
||||
}}
|
||||
errorTemplate={(errors: string[]) => {
|
||||
if (this.props.displayMode === DisplayMode.Edit) {
|
||||
return (
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline={true}>
|
||||
{strings.AdaptiveCardErrorIntro}<br />
|
||||
{errors.map((error: string) => {
|
||||
return <p>{error}</p>;
|
||||
})}
|
||||
</MessageBar>);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}}
|
||||
/></>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export interface IAdaptiveCardHostState {
|
||||
errors?: string[];
|
||||
}
|
||||
Loading…
Reference in New Issue