Fixed issue with Adaptive Card Templating

This commit is contained in:
Hugo Bernier 2020-06-11 22:39:19 -04:00
parent 7ac1743715
commit 04d3145a2a
5 changed files with 110 additions and 25 deletions

View File

@ -393,4 +393,4 @@
"description": "This is pretty much a brute force method where we change the Adaptive Card's host configuration with the theme's colors. \r\n\r\nWe used trial and error to find what theme slots match which host configuration styles. \r\n\r\nWould love to get your feedback!"
}
]
}
}

View File

@ -424,6 +424,10 @@ The web part sample conditionally hides and shows property pane controls dependi
![Dependent Property Pane Controls](./assets/DependentControls.gif)
### CodeTour
This project contains a CodeTour that will walk you through the areas of interest. To use it, make sure you install [CodeTour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) for Visual Studio Code. When you open the project, you'll be prompted to start the tour, but you can also find the **Code Walk-through** tour in the **CodeTour** pane.
## For More Information
If you'd like to read more about the various concepts illustrated in this sample, please refer to the following links:

View File

@ -1711,6 +1711,11 @@
"@microsoft/node-core-library": "3.15.1"
}
},
"@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=="
},
"@microsoft/rush-lib": {
"version": "5.15.1",
"resolved": "https://registry.npmjs.org/@microsoft/rush-lib/-/rush-lib-5.15.1.tgz",
@ -3110,6 +3115,11 @@
"integrity": "sha512-VQgHxyPMTj3hIlq9SY1mctqx+Jj8kpQfoLvDlVSDNOyuYs8JYfkuY3OW/4+dO657yPmNhHpePRx0/Tje5ImNVQ==",
"dev": true
},
"@types/atob": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/@types/atob/-/atob-2.1.2.tgz",
"integrity": "sha512-8GAYQ1jDRUQkSpHzJUqXwAkYFOxuWAOGLhIR4aPd/Y/yL12Q/9m7LsKpHKlfKdNE/362Hc9wPI1Yh6opDfxVJg=="
},
"@types/chai": {
"version": "3.4.34",
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-3.4.34.tgz",
@ -3218,6 +3228,11 @@
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.117.tgz",
"integrity": "sha512-xyf2m6tRbz8qQKcxYZa7PA4SllYcay+eh25DN3jmNYY6gSTL7Htc/bttVdkqj2wfJGbeWlQiX8pIyJpKU+tubw=="
},
"@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=="
},
"@types/merge2": {
"version": "0.3.29",
"resolved": "https://registry.npmjs.org/@types/merge2/-/merge2-0.3.29.tgz",
@ -3251,6 +3266,14 @@
"integrity": "sha1-jBiPbjTC58Px0BJ9kI1aNuWmDck=",
"dev": true
},
"@types/moment-timezone": {
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/@types/moment-timezone/-/moment-timezone-0.5.13.tgz",
"integrity": "sha512-SWk1qM8DRssS5YR9L4eEX7WUhK/wc96aIr4nMa6p0kTk9YhGGOJjECVhIdPEj13fvJw72Xun69gScXSZ/UmcPg==",
"requires": {
"moment": ">=2.14.0"
}
},
"@types/mz": {
"version": "0.0.32",
"resolved": "https://registry.npmjs.org/@types/mz/-/mz-0.0.32.tgz",
@ -3571,6 +3594,11 @@
"@types/node": "*"
}
},
"@types/xmldom": {
"version": "0.1.29",
"resolved": "https://registry.npmjs.org/@types/xmldom/-/xmldom-0.1.29.tgz",
"integrity": "sha1-xEKLDKhtO4gUdXJv2UmAs4onw4E="
},
"@types/yargs": {
"version": "0.0.34",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-0.0.34.tgz",
@ -4034,6 +4062,46 @@
"resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.16.tgz",
"integrity": "sha1-4rwxvHEqr/ugU6pN1GvITrXSCQ8="
},
"adaptive-expressions": {
"version": "4.9.2",
"resolved": "https://registry.npmjs.org/adaptive-expressions/-/adaptive-expressions-4.9.2.tgz",
"integrity": "sha512-hywLFmj0NwMR2GoIg185p/oSc7hp+fagEwG4/1415fhL+lsbR25E/GS1InCUhWa8JSoyn+0EuneLey+BCGlOiA==",
"requires": {
"@microsoft/recognizers-text-data-types-timex-expression": "1.1.4",
"@types/atob": "^2.1.2",
"@types/lru-cache": "^5.1.0",
"@types/moment-timezone": "^0.5.12",
"@types/xmldom": "^0.1.29",
"antlr4ts": "0.5.0-alpha.1",
"atob": "^2.1.2",
"big-integer": "^1.6.48",
"jspath": "^0.4.0",
"lodash": "^4.17.15",
"lru-cache": "^5.1.1",
"moment": "^2.25.1",
"moment-timezone": "^0.5.28"
},
"dependencies": {
"lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
"requires": {
"yallist": "^3.0.2"
}
},
"moment": {
"version": "2.26.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
},
"yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
}
}
},
"adaptivecards": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/adaptivecards/-/adaptivecards-1.2.6.tgz",
@ -4045,9 +4113,12 @@
"integrity": "sha512-ovjp0f6xfzEBdTXVpBwNTovxjM3S7q/aJe39F58Ybe1+AO+warRFdpIT5v1HcxBwYoDsnllwo9U9Ne52TcL96A=="
},
"adaptivecards-templating": {
"version": "0.1.1-alpha.1",
"resolved": "https://registry.npmjs.org/adaptivecards-templating/-/adaptivecards-templating-0.1.1-alpha.1.tgz",
"integrity": "sha512-pK34y5tcqmtcUZaaEK1EgrTLJX8yq6RYc2hp3x/IsLdDZm6pFGWliYD8pAQnJdyvblpxV82XTnAMhnBw0HUi7A=="
"version": "1.0.0-rc.0",
"resolved": "https://registry.npmjs.org/adaptivecards-templating/-/adaptivecards-templating-1.0.0-rc.0.tgz",
"integrity": "sha512-lA+Dn0QeRk8nGdxx994njzPGKGdh8XwIAnTlnVTmBHmnIjpTK261l+rs5Yxl/2ysMwkl1du21vFDMCDbP9qAXg==",
"requires": {
"adaptive-expressions": "^4.9.0"
}
},
"agent-base": {
"version": "4.3.0",
@ -4172,6 +4243,11 @@
"integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=",
"dev": true
},
"antlr4ts": {
"version": "0.5.0-alpha.1",
"resolved": "https://registry.npmjs.org/antlr4ts/-/antlr4ts-0.5.0-alpha.1.tgz",
"integrity": "sha512-LU5FLWq2fUwg2cTL/DeIL16ucUm5jv6SNVFoMjbYLviXAp6p5g1ZzkTAnWiOKX/muEEy0PY78perPj6WUBSQCw=="
},
"any-promise": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@ -4532,8 +4608,7 @@
"atob": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
"dev": true
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
},
"autoprefixer": {
"version": "9.1.5",
@ -4969,6 +5044,11 @@
"tryer": "^1.0.1"
}
},
"big-integer": {
"version": "1.6.48",
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
"integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w=="
},
"big.js": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
@ -12592,6 +12672,11 @@
"integrity": "sha1-XAxWhRBxYOcv50ib3eoLRMK8Z70=",
"dev": true
},
"jspath": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/jspath/-/jspath-0.4.0.tgz",
"integrity": "sha512-2/R8wkot8NCXrppBT/onp+4mcAUAZqtPxsW6aSJU3hrFAVqKqtFYcat2XJZ7inN4RtATUxfv0UQSYOmvJKiIGA=="
},
"jsprim": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@ -13498,6 +13583,14 @@
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
},
"moment-timezone": {
"version": "0.5.31",
"resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.31.tgz",
"integrity": "sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==",
"requires": {
"moment": ">= 2.9.0"
}
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

View File

@ -28,7 +28,7 @@
"@types/webpack-env": "1.13.1",
"adaptivecards": "^1.2.6",
"adaptivecards-fabric": "^1.0.4",
"adaptivecards-templating": "^0.1.1-alpha.1",
"adaptivecards-templating": "^1.0.0-rc.0",
"markdown-it": "^10.0.0",
"office-ui-fabric-react": "6.189.2",
"react": "16.8.5",

View File

@ -69,19 +69,13 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
}
let errors: Array<IValidationError> = [];
let card: {};
let card: any;
if (this.props.data && this.props.useTemplating) {
// Define a template payload
console.log("Using templating");
var templatePayload = {};
try {
// KLUDGE: Temporary fix for Adaptive Templating May 2020 change
// to be updated when new version of Adapting Template package is available
var templating:string = this.props.template.split("${").join('{');
templatePayload = JSON.parse(templating);
//
//templatePayload = JSON.parse(this.props.template);
templatePayload = JSON.parse(this.props.template);
} catch (error) {
console.error("Something went wrong with the template", error);
this._errorHandler(strings.TemplatingJsonError + error);
@ -91,16 +85,10 @@ export class AdaptiveCard extends React.Component<IAdaptiveCardProps, IAdaptiveC
// Create a Template instance from the template payload
var template = new ACData.Template(templatePayload);
// Create a data binding context, and set its $root property to the
// data object to bind the template to
// BUG: According to https://docs.microsoft.com/en-us/adaptive-cards/templating/ we're supposed to use
//var card = template.expand({
//$root: {
// // Your data goes here
//}
//});
// ...but that doesn't work
var context = new ACData.EvaluationContext();
var context: any = {
"$root":{}
};
try {
context.$root = JSON.parse(this.props.data);
} catch (error) {