Adaptive Card Containser's Style is not Respected #2772

arman-g · 2019-12-24T18:38:03Z

Screenshots

Version

CDN v4.7.1

Describe the bug

Adding style to the container does not have any effect. For example "style": "good" is entered in the bellow code but webchat does not set the container background to light green or any color.

Steps to reproduce

Use the provided adaptive card below.
Observe that in webchat the containers' background color is not set.

Expected behavior

Should set the containers' background color to "good" light green.

Additional context

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.1",
	"body": [
		{
			"type": "Container",
            "style": "good",
            "bleed": true,
			"items": [
				{
					"type": "TextBlock",
					"text": "Publish Adaptive Card schema",
					"weight": "bolder",
					"size": "medium"
				},
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"width": "auto",
							"items": [
								{
									"type": "Image",
									"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
									"size": "small",
									"style": "person"
								}
							]
						},
						{
							"type": "Column",
							"width": "stretch",
							"items": [
								{
									"type": "TextBlock",
									"text": "Matt Hidinger",
									"weight": "bolder",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"spacing": "none",
									"text": "Created {{DATE(2017-02-14T06:08:39Z,SHORT)}}",
									"isSubtle": true,
									"wrap": true
								}
							]
						}
					]
				}
			]
		},
		{
			"type": "Container",
            "style": "good",
            "bleed": true,
			"items": [
				{
					"type": "TextBlock",
					"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
					"wrap": true
				},
				{
					"type": "FactSet",
					"facts": [
						{
							"title": "Board:",
							"value": "Adaptive Card"
						},
						{
							"title": "List:",
							"value": "Backlog"
						},
						{
							"title": "Assigned to:",
							"value": "Matt Hidinger"
						},
						{
							"title": "Due date:",
							"value": "Not set"
						}
					]
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Set due date",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Date",
						"id": "dueDate",
						"title": "Select due date"
					},
					{
						"type": "Input.Text",
						"id": "comment",
						"isMultiline": true,
						"placeholder": "Add a comment"
					}
				],
				"actions": [
				    {
				        "type": "Action.OpenUrl",
						"title": "OK",
						"url": "https://adaptivecards.io"
			        }
				]
			}
		},
		{
			"type": "Action.OpenUrl",
			"title": "View",
			"url": "https://adaptivecards.io"
		}
	]
}

The text was updated successfully, but these errors were encountered:

tdurnford · 2019-12-26T17:49:26Z

This is potentially related to #2145. I'll investigate further.

srinaath · 2020-01-09T19:16:04Z

@arman-g We intend to fix this in our next release. Please follow #2145 for any updates on this feature.

tdurnford · 2020-01-09T19:35:07Z

After looking into this further, this issue is actually unrelated to #2145.

Our default Adaptive Card HostConfig is missing Container Styles. Adding the containerStyles to our adaptiveCardHostConfig resolves this issue. @arman-g In the meantime, you can pass your own adaptiveCardHostConfig as a prop to Web Chat as exemplified in the code snippet below.

Web Chat v4.7.1

const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();

const adaptiveCardHostConfig = {
  "spacing": {
    "small": 3,
    "default": 8,
    "medium": 20,
    "large": 30,
    "extraLarge": 40,
    "padding": 10
  },
  "separator": {
    "lineThickness": 1,
    "lineColor": "#EEEEEE"
  },
  "supportsInteractivity": true,
  "fontTypes": {
    "default": {
      "fontFamily": "Calibri, sans-serif",
      "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
      },
      "fontWeights": {
        "lighter": 200,
        "default": 400,
        "bolder": 600
      }
    },
    "monospace": {
      "fontFamily": "'Courier New', Courier, monospace",
      "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
      },
      "fontWeights": {
        "lighter": 200,
        "default": 400,
        "bolder": 600
      }
    }
  },
  "containerStyles": {
    "default": {
      "backgroundColor": "#FFFFFF",
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#767676"
        },
        "accent": {
          "default": "#0063B1",
          "subtle": "#0063B1"
        },
        "attention": {
          "default": "#FF0000",
          "subtle": "#DDFF0000"
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254"
        },
        "warning": {
          "default": "#c3ab23",
          "subtle": "#DDc3ab23"
        }
      }
    },
    "emphasis": {
      "backgroundColor": "#F0F0F0",
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#767676"
        },
        "accent": {
          "default": "#2E89FC",
          "subtle": "#882E89FC"
        },
        "attention": {
          "default": "#FF0000",
          "subtle": "#DDFF0000"
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254"
        },
        "warning": {
          "default": "#c3ab23",
          "subtle": "#DDc3ab23"
        }
      }
    },
    "accent": {
      "backgroundColor": "#C7DEF9",
      "foregroundColors": {
        "default": {
          "default": "#333333",
          "subtle": "#EE333333"
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000"
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000"
        },
        "accent": {
          "default": "#2E89FC",
          "subtle": "#882E89FC"
        },
        "attention": {
          "default": "#cc3300",
          "subtle": "#DDcc3300"
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254"
        },
        "warning": {
          "default": "#e69500",
          "subtle": "#DDe69500"
        }
      }
    },
    "good": {
      "backgroundColor": "#CCFFCC",
      "foregroundColors": {
        "default": {
          "default": "#333333",
          "subtle": "#EE333333"
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000"
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000"
        },
        "accent": {
          "default": "#2E89FC",
          "subtle": "#882E89FC"
        },
        "attention": {
          "default": "#cc3300",
          "subtle": "#DDcc3300"
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254"
        },
        "warning": {
          "default": "#e69500",
          "subtle": "#DDe69500"
        }
      }
    },
    "attention": {
      "backgroundColor": "#FFC5B2",
      "foregroundColors": {
        "default": {
          "default": "#333333",
          "subtle": "#EE333333"
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000"
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000"
        },
        "accent": {
          "default": "#2E89FC",
          "subtle": "#882E89FC"
        },
        "attention": {
          "default": "#cc3300",
          "subtle": "#DDcc3300"
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254"
        },
        "warning": {
          "default": "#e69500",
          "subtle": "#DDe69500"
        }
      }
    },
    "warning": {
      "backgroundColor": "#FFE2B2",
      "foregroundColors": {
        "default": {
          "default": "#333333",
          "subtle": "#EE333333"
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000"
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000"
        },
        "accent": {
          "default": "#2E89FC",
          "subtle": "#882E89FC"
        },
        "attention": {
          "default": "#cc3300",
          "subtle": "#DDcc3300"
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254"
        },
        "warning": {
          "default": "#e69500",
          "subtle": "#DDe69500"
        }
      }
    }
  },
  "imageSizes": {
    "small": 40,
    "medium": 80,
    "large": 160
  },
  "actions": {
    "maxActions": 100,
    "spacing": "default",
    "buttonSpacing": 8,
    "showCard": {
      "actionMode": "inline",
      "inlineTopMargin": 8
    },
    "actionsOrientation": "vertical",
    "actionAlignment": "stretch"
  },
  "adaptiveCard": {
    "allowCustomStyle": false
  },
  "imageSet": {
    "imageSize": "medium",
    "maxImageHeight": 100
  },
  "factSet": {
    "title": {
      "color": "default",
      "size": "default",
      "isSubtle": false,
      "weight": "bolder",
      "wrap": true,
      "maxWidth": 150
    },
    "value": {
      "color": "default",
      "size": "default",
      "isSubtle": false,
      "weight": "default",
      "wrap": true
    },
    "spacing": 8
  }
};
window.WebChat.renderWebChat(
  {
    adaptiveCardHostConfig,
    directLine: window.WebChat.createDirectLine({ token })
  },
  document.getElementById('webchat')
);

Screenshot

Tiger519 · 2020-02-24T18:11:43Z

@tdurnford This has gotten me closer to replicating the "old" (non-gemini) webchat adaptive cards, but I still can't figure out how to get a few things the same. I can't get the gray background around the container back, and I can't make the buttons interactive (border changing to blue). Are there settings available, either in adaptiveCardHostConfig or styleOptions, that would allow me to replicate the old look and functionality?

tdurnford · 2020-02-24T18:22:30Z

@Tiger519
'How to' questions such as this one are better suited for Stack Overflow. Please feel free to post other questions you have about developing your own features over there so the community at large may help out. If you need help with a Web Chat implementation, you can post a question to the Web Chat tag. Thank you!

arman-g added Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. Pending customer-reported Required for internal Azure reporting. Do not delete. labels Dec 24, 2019

tdurnford added customer-replied-to Required for internal reporting. Do not delete. needs-repro Waiting for repro or investigation labels Dec 26, 2019

tdurnford self-assigned this Dec 26, 2019

corinagum added the support Internal request for assistance from the Support Team label Jan 2, 2020

cwhitten assigned tdurnford and unassigned tdurnford Jan 2, 2020

cwhitten added p1 Painful if we don't fix, won't block releasing and removed support Internal request for assistance from the Support Team labels Jan 2, 2020

tdurnford added R8 and removed needs-repro Waiting for repro or investigation Pending labels Jan 9, 2020

tdurnford mentioned this issue Jan 10, 2020

Updated Adaptive Cards Styling #2810

Merged

1 task

tdurnford closed this as completed in #2810 Jan 10, 2020

compulim mentioned this issue Mar 5, 2020

4.8.0 Release checklist #2961

Closed

40 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adaptive Card Containser's Style is not Respected #2772

Adaptive Card Containser's Style is not Respected #2772

arman-g commented Dec 24, 2019 •

edited

Loading

tdurnford commented Dec 26, 2019

srinaath commented Jan 9, 2020

tdurnford commented Jan 9, 2020 •

edited

Loading

Tiger519 commented Feb 24, 2020

tdurnford commented Feb 24, 2020

Adaptive Card Containser's Style is not Respected #2772

Adaptive Card Containser's Style is not Respected #2772

Comments

arman-g commented Dec 24, 2019 • edited Loading

Screenshots

Version

Describe the bug

Steps to reproduce

Expected behavior

Additional context

tdurnford commented Dec 26, 2019

srinaath commented Jan 9, 2020

tdurnford commented Jan 9, 2020 • edited Loading

Web Chat v4.7.1

Screenshot

Tiger519 commented Feb 24, 2020

tdurnford commented Feb 24, 2020

arman-g commented Dec 24, 2019 •

edited

Loading

tdurnford commented Jan 9, 2020 •

edited

Loading