Adaptive Cards #471

danmarshall · 2017-05-19T19:48:38Z

** Please do not merge this PR - this is for review only, until the checklist has been completed **

Must haves:

The Adaptive Card tool ac-scss2json needs to be published
adaptivecard-hostconfig.js Documentation
Add AdaptiveCards HostConfig into CSS content so that it is not another external file
Try / catch when Adaptive Card fails, what to display?
Remove Action.HTTP buttons
Show friendly error card
Style injection sample
Fix webpack warnings

Stretch goals (if not checked these should become issues after the PR):

nwhitmont · 2017-06-06T21:39:11Z

@danmarshall What is the current timeline for Adaptive Cards full support in Web Chat?

danmarshall · 2017-06-06T22:09:18Z

A few more days of core development to get code complete, another few days to get documentation and tests in place.

…work-WebChat into adaptivecards

GeekTrainer

Here's my first pass. I reserve the right to make more passes. :-)

GeekTrainer · 2017-06-09T16:30:37Z

src/AdaptiveCardContainer.tsx

+}
+
+AdaptiveCards.AdaptiveCard.onExecuteAction = (action: AdaptiveCards.ExternalAction) => {
+


Cleanup the extra carriage returns through all of the files

GeekTrainer · 2017-06-09T16:31:17Z

src/AdaptiveCardContainer.tsx

+        }
+
+    } else if (action instanceof AdaptiveCards.HttpAction) {
+        /**


If we're not going to support HTTP Actions to start we should simply ignore the buttons, UI, etc.

GeekTrainer · 2017-06-09T16:37:25Z

src/AdaptiveCardContainer.tsx

+        return content.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+    }
+
+    public configFromJsonInCss() {


We should be able to remove this now as per our last conversation.

GeekTrainer · 2017-06-09T16:40:18Z

src/Attachment.tsx

@@ -170,34 +169,44 @@ export const AttachmentView = (props: {
        case "application/vnd.microsoft.card.hero":
            if (!attachment.content)
                return null;
+
+            const heroCardBuilder = new CardBuilder.AdaptiveCardBuilder();


We should create helper methods to create the various card types for readability.

Or, maybe create derived classes from AdatpiveCardBuilder for the types? I'm not sure which would look better.

I actually had this in a past revision. Made it less maintainable because we have this big switch statement here which consolidates all the types, and didn't want to have a structure like that in 2 places.

I don't know that I'm convinced. :-) But I'm not going to make this a showstopper.

Consider that this file used to have HTML for all cards.

…495)

* edits from feedback * moved Action.Http

Enable adaptive cards tests

* receipt card test Adding support for receipt card * Recept Card in version 0.5 Recept Card in version 0.5 * load adaptivecards hostconfig from json file, webpacked into bundle (#495) * remove Action.Http from cards * corrected alpha channel colors * add AdaptiveCards.md * rename to Bot Builder SDK * change SDK to Bot Builder SDK * fix typos * elsewhere * lowercase titles * added 'it' * separates to separate * handle undefined * imBack for string * Small language tweaks (#503) * Adaptivecards (#505) * edits from feedback * moved Action.Http

* Adaptive receipt (#2) * receipt card test Adding support for receipt card * Recept Card in version 0.5 Recept Card in version 0.5 * load adaptivecards hostconfig from json file, webpacked into bundle (#495) * remove Action.Http from cards * corrected alpha channel colors * add AdaptiveCards.md * rename to Bot Builder SDK * change SDK to Bot Builder SDK * fix typos * elsewhere * lowercase titles * added 'it' * separates to separate * handle undefined * imBack for string * Small language tweaks (#503) * Adaptivecards (#505) * edits from feedback * moved Action.Http * readme.md (#491) updated version of readme.md * edited test/README.md (#510) * edited test/README.md * Update README.md * error handling Adding SVG to represent the error occures in the JSON parsing or adaptive card missing properties. * Revert "error handling" This reverts commit 92a4d27. * error handling for ac 1. using this.forceUPdate() 2. svg error message * minior fixes * use state for error rendering * change forceUpdate() to setState() change forceUpdate() to setState() * merge * fix minor bug in ac tests * add style to error * latest AdaptiveCards lib * remove 'lighter' text * reformatted * explicit if statement * catch hyperlink clicks

GeekTrainer

The core of the code looks just fine to me. There is some cleanup that needs to be done, though.

GeekTrainer · 2017-06-20T18:46:56Z

AdaptiveCards.md

@@ -0,0 +1,91 @@
+# Adaptive Cards in Microsoft Bot Framework WebChat
+
+WebChat now supports [Adaptive Cards](http://adaptivecards.io/), which you can use to achieve a greater level of rich display and interactivity in your bot's UX. Adaptive Cards are a general-purpose technology, which may be used in a wide variety of applications, but you should be aware of some constraints when using them within the WebChat environment.


Flesh this out a touch more to address the fact that all channels will have limitations WRT Adaptive Cards, and not something that's unique to WebChat.

GeekTrainer · 2017-06-20T18:56:29Z

AdaptiveCards.md

+
+## Style customization
+
+


One too many carriage returns.

GeekTrainer · 2017-06-20T19:01:22Z

src/AdaptiveCardContainer.tsx

+
+function cardWithoutHttpActions(card: AdaptiveCardSchema.ICard) {
+    if (!card.actions) return card;
+


Please cleanup the extra carriage returns in this file.

GeekTrainer · 2017-06-20T19:02:44Z

src/AdaptiveCardContainer.tsx

+        if (!this.props.onClick) return;
+
+        //do not allow form elements to trigger a parent click event
+        switch ((e.target as HTMLElement).tagName) {


Will it always be capital letters?

GeekTrainer · 2017-06-20T19:03:07Z

src/AdaptiveCardContainer.tsx

+        adaptiveCard.parse(cardWithoutHttpActions(this.props.card));
+        const errors = adaptiveCard.validate();
+
+        if (errors.length === 0) {


Can errors be null?

it will always return an array

GeekTrainer · 2017-06-20T19:05:50Z

src/Attachment.tsx

+            });
+
+            attachment.content.items && attachment.content.items.map((item, i) => {
+


Carriage return cleanup for this file, please

GeekTrainer · 2017-06-20T19:06:26Z

src/Attachment.tsx

@@ -170,34 +169,44 @@ export const AttachmentView = (props: {
        case "application/vnd.microsoft.card.hero":
            if (!attachment.content)
                return null;
+
+            const heroCardBuilder = new CardBuilder.AdaptiveCardBuilder();


I don't know that I'm convinced. :-) But I'm not going to make this a showstopper.

GeekTrainer · 2017-06-20T19:07:55Z

src/scss/botchat.scss

+                margin-bottom: 20px;
+                text-align: inherit;
+            }
+


White space cleanup

GeekTrainer · 2017-06-20T19:09:36Z

test/mock_dl/index.ts

-        })
+    if (queue) {
+        if (queue.length > 0) {
+            let msg = queue.shift();


Could these be constants?

GeekTrainer · 2017-06-20T19:10:15Z

webpack.production.config.js

@@ -34,7 +35,16 @@ module.exports = {
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }


Please cleanup the formatting here

fbessez · 2017-06-22T11:41:40Z

It seems as if this was merged, but I am still getting this issue microsoft/AdaptiveCards#432 -- is there something that I should do?

danmarshall added 3 commits May 15, 2017 16:33

add adaptive cards

57a80ba

build adaptive card config

cad963e

Merge remote-tracking branch 'upstream/master' into adaptivecards

fa74a16

msftclas added the cla-not-required label May 19, 2017

add microsoft-adaptivecards-scss-to-json

ab96f8b

EricDahlvang mentioned this pull request May 25, 2017

[Question] How to integrate adaptive-card on Custom Web Chat microsoft/botframework-sdk#2829

Closed

danmarshall added 2 commits May 25, 2017 19:59

use AdaptiveCard builder

5c2747b

use Adaptive Carrds for thumbnail, audio & video

98d1e8c

danmarshall added 14 commits June 6, 2017 19:19

fix TS 2.3 TSX compiler errors

8fc9c07

remove adaptive-hostconfig.js

fd8fb3c

add settings.scss, handle quoted values

29afc29

use adaptiveCard for receipt

680cac8

fix card padding

1b064e0

use SCSS settings

236e721

consolidate CSS build

1e99954

Merge branch 'master' into adaptivecards

cae040d

remove old file

d8c3dab

Merge branch 'adaptivecards' of https://github.com/Microsoft/BotFrame…

2006a56

…work-WebChat into adaptivecards

catch render errors

b33b37e

add note

8c8b500

handle nullref on attachment.content.images

ca17a27

handle card padding

31e0576

GeekTrainer suggested changes Jun 9, 2017

View reviewed changes

danmarshall added 5 commits June 9, 2017 11:19

load adaptivecards hostconfig from json file, webpacked into bundle (#…

9cab38d

…495)

remove Action.Http from cards

2e1cd90

corrected alpha channel colors

e44045d

add AdaptiveCards.md

fab27b2

rename to Bot Builder SDK

585429d

danmarshall and others added 11 commits June 12, 2017 17:05

added 'it'

77d0c21

separates to separate

4da2d2f

handle undefined

664f1b8

imBack for string

8eb7ff2

Small language tweaks (#503)

dd09890

Adaptivecards (#505)

12b6248

* edits from feedback * moved Action.Http

adaptive cards tests (#507)

f1896de

Enable adaptive cards tests

copy editing (#512)

1e06249

eliminate webpack warnings

bd618dd

added section to embed without webpack

09a54de

danmarshall mentioned this pull request Jun 19, 2017

Action.Submit not returning a value microsoft/AdaptiveCards#432

Closed

danmarshall added 5 commits June 19, 2017 21:19

Merge branch 'master' into adaptivecards

2b21de0

remove blank line

cef76fb

handle high dpi in hscroll button management

292e525

allow more time for hscroll

12dd6fc

GeekTrainer suggested changes Jun 20, 2017

View reviewed changes

danmarshall added 8 commits June 20, 2017 13:44

use common adaptiveCardsFn

a34084b

case sensitive card names

f8fda3f

add note about channel limitations

56eeb44

flattened carriage returns

ea184a4

flattened carriage returns

9358dcb

flattened carriage returns

3650542

use const when possible

b882c95

whitespace cleanup

501f8da

danmarshall merged commit c92422b into master Jun 20, 2017

compulim deleted the adaptivecards branch June 18, 2018 21:43

compulim pushed a commit to compulim/BotFramework-WebChat that referenced this pull request Jul 14, 2018

Tweak layout of app settings page (microsoft#471)

6a7056f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adaptive Cards #471

Adaptive Cards #471

danmarshall commented May 19, 2017 •

edited

Loading

nwhitmont commented Jun 6, 2017

danmarshall commented Jun 6, 2017

GeekTrainer left a comment

GeekTrainer Jun 9, 2017

GeekTrainer Jun 9, 2017

GeekTrainer Jun 9, 2017

GeekTrainer Jun 9, 2017

GeekTrainer Jun 9, 2017

danmarshall Jun 9, 2017

GeekTrainer Jun 20, 2017

danmarshall Jun 20, 2017

GeekTrainer left a comment

GeekTrainer Jun 20, 2017

GeekTrainer Jun 20, 2017

GeekTrainer Jun 20, 2017

GeekTrainer Jun 20, 2017

danmarshall Jun 20, 2017

GeekTrainer Jun 20, 2017

danmarshall Jun 20, 2017

GeekTrainer Jun 20, 2017

GeekTrainer Jun 20, 2017

GeekTrainer Jun 20, 2017

GeekTrainer Jun 20, 2017

GeekTrainer Jun 20, 2017

danmarshall Jun 20, 2017

danmarshall Jun 20, 2017

fbessez commented Jun 22, 2017

		}

		AdaptiveCards.AdaptiveCard.onExecuteAction = (action: AdaptiveCards.ExternalAction) => {

		@@ -0,0 +1,91 @@
		# Adaptive Cards in Microsoft Bot Framework WebChat

		WebChat now supports [Adaptive Cards](http://adaptivecards.io/), which you can use to achieve a greater level of rich display and interactivity in your bot's UX. Adaptive Cards are a general-purpose technology, which may be used in a wide variety of applications, but you should be aware of some constraints when using them within the WebChat environment.


		function cardWithoutHttpActions(card: AdaptiveCardSchema.ICard) {
		if (!card.actions) return card;

		});

		attachment.content.items && attachment.content.items.map((item, i) => {

Adaptive Cards #471

Adaptive Cards #471

Conversation

danmarshall commented May 19, 2017 • edited Loading

nwhitmont commented Jun 6, 2017

danmarshall commented Jun 6, 2017

GeekTrainer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GeekTrainer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fbessez commented Jun 22, 2017

danmarshall commented May 19, 2017 •

edited

Loading