Bot Emulator отображает «акцент» как стиль по умолчанию в AdaptiveCards

Question

Когда я создаю Карту в конструкторе , стиль по умолчанию (фон) отображается белым, и я могу сделать несколько ColumnSets или Containers с "style":"emphasis", чтобы изменить их цвет фона.

С другой стороны, когда карта визуализируется в эмуляторе Bot Framework, все отображается так, как было с "style:"emphasis", вот так (результат дизайнера слева, результат эмулятора справа)

Я знаю, что есть некоторые проблемы при рендеринге эксклюзивных версий 1.2, но даже с простейшими картами это меняет стиль,Похоже, emphasis является стилем по умолчанию в DirectLine, потому что когда я устанавливаю стиль как "style":"default", он также отображается как emphasis.

Это Пример отчета о расходах иJSON это:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "Container",
      "style": "emphasis",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "size": "Large",
                  "weight": "Bolder",
                  "text": "**EXPENSE APPROVAL**"
                }
              ],
              "width": "stretch"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "Image",
                  "url": "https://adaptivecards.io/content/pending.png",
                  "height": "30px",
                  "altText": "Pending"
                }
              ],
              "width": "auto"
            }
          ]
        }
      ],
      "bleed": true
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "size": "ExtraLarge",
                  "text": "Trip to UAE",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "spacing": "Small",
                  "size": "Small",
                  "weight": "Bolder",
                  "color": "Accent",
                  "text": "[ER-13052](https://adaptivecards.io)"
                }
              ],
              "width": "stretch"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "ActionSet",
                  "actions": [
                    {
                      "type": "Action.OpenUrl",
                      "title": "EXPORT AS PDF",
                      "url": "https://adaptivecards.io"
                    }
                  ]
                }
              ],
              "width": "auto"
            }
          ]
        },
        {
          "type": "FactSet",
          "spacing": "Large",
          "facts": [
            {
              "title": "Submitted By",
              "value": "**Matt Hidinger**  matt@contoso.com"
            },
            {
              "title": "Duration",
              "value": "2019/06/19 - 2019/06/25"
            },
            {
              "title": "Submitted On",
              "value": "2019/04/14"
            },
            {
              "title": "Reimbursable Amount",
              "value": "$ 404.30"
            },
            {
              "title": "Awaiting approval from",
              "value": "**Thomas**  thomas@contoso.com"
            },
            {
              "title": "Submitted to",
              "value": "**David**   david@contoso.com"
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "spacing": "Large",
      "style": "emphasis",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "DATE"
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "spacing": "Large",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "CATEGORY"
                }
              ],
              "width": "stretch"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "AMOUNT"
                }
              ],
              "width": "auto"
            }
          ]
        }
      ],
      "bleed": true
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "06/19",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "spacing": "Medium",
          "items": [
            {
              "type": "TextBlock",
              "text": "Air Travel Expense",
              "wrap": true
            }
          ],
          "width": "stretch"
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "$ 300",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "id": "chevronDown1",
          "spacing": "Small",
          "verticalContentAlignment": "Center",
          "items": [
            {
              "type": "Image",
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "collapse",
                "targetElements": [
                  "cardContent1",
                  "chevronUp1",
                  "chevronDown1"
                ]
              },
              "url": "https://adaptivecards.io/content/down.png",
              "width": "20px",
              "altText": "collapsed"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "id": "chevronUp1",
          "isVisible": false,
          "spacing": "Small",
          "verticalContentAlignment": "Center",
          "items": [
            {
              "type": "Image",
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "expand",
                "targetElements": [
                  "cardContent1",
                  "chevronUp1",
                  "chevronDown1"
                ]
              },
              "url": "https://adaptivecards.io/content/up.png",
              "width": "20px",
              "altText": "expanded"
            }
          ],
          "width": "auto"
        }
      ]
    },
    {
      "type": "Container",
      "id": "cardContent1",
      "isVisible": false,
      "items": [
        {
          "type": "Container",
          "items": [
            {
              "type": "TextBlock",
              "text": "* Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM.",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "TextBlock",
              "text": "* Leg 2 on Tue,Jun 19th, 2019 at 7:15 PM.",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "Container",
              "items": [
                {
                  "type": "Input.Text",
                  "id": "comment1",
                  "placeholder": "Add your comment here."
                }
              ]
            }
          ]
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "ColumnSet",
              "columns": [
                {
                  "type": "Column",
                  "items": [
                    {
                      "type": "ActionSet",
                      "actions": [
                        {
                          "type": "Action.Submit",
                          "title": "Send",
                          "data": {
                            "id": "_qkQW8dJlUeLVi7ZMEzYVw",
                            "action": "comment",
                            "lineItem": 1
                          }
                        }
                      ]
                    }
                  ],
                  "width": "auto"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "Center",
              "text": "06/19",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "spacing": "Medium",
          "items": [
            {
              "type": "TextBlock",
              "text": "Auto Mobile Expense",
              "wrap": true
            }
          ],
          "width": "stretch"
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "$ 100",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "id": "chevronDown2",
          "spacing": "Small",
          "verticalContentAlignment": "Center",
          "items": [
            {
              "type": "Image",
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "collapse",
                "targetElements": [
                  "cardContent2",
                  "chevronUp2",
                  "chevronDown2"
                ]
              },
              "url": "https://adaptivecards.io/content/down.png",
              "width": "20px",
              "altText": "collapsed"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "id": "chevronUp2",
          "isVisible": false,
          "spacing": "Small",
          "verticalContentAlignment": "Center",
          "items": [
            {
              "type": "Image",
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "expand",
                "targetElements": [
                  "cardContent2",
                  "chevronUp2",
                  "chevronDown2"
                ]
              },
              "url": "https://adaptivecards.io/content/up.png",
              "width": "20px",
              "altText": "expanded"
            }
          ],
          "width": "auto"
        }
      ]
    },
    {
      "type": "Container",
      "id": "cardContent2",
      "isVisible": false,
      "items": [
        {
          "type": "Container",
          "items": [
            {
              "type": "TextBlock",
              "text": "* Contoso Car Rentrals, Tues 6/19 at 7:00 AM",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "Container",
              "items": [
                {
                  "type": "Input.Text",
                  "id": "comment2",
                  "placeholder": "Add your comment here."
                }
              ]
            }
          ]
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "ColumnSet",
              "columns": [
                {
                  "type": "Column",
                  "items": [
                    {
                      "type": "ActionSet",
                      "actions": [
                        {
                          "type": "Action.Submit",
                          "title": "Send",
                          "data": {
                            "id": "_qkQW8dJlUeLVi7ZMEzYVw",
                            "action": "comment",
                            "lineItem": 2
                          }
                        }
                      ]
                    }
                  ],
                  "width": "auto"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "Center",
              "text": "06/25",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "spacing": "Medium",
          "items": [
            {
              "type": "TextBlock",
              "text": "Air Travel Expense",
              "wrap": true
            }
          ],
          "width": "stretch"
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "$ 4.30",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "id": "chevronDown3",
          "spacing": "Small",
          "verticalContentAlignment": "Center",
          "items": [
            {
              "type": "Image",
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "collapse",
                "targetElements": [
                  "cardContent3",
                  "chevronUp3",
                  "chevronDown3"
                ]
              },
              "url": "https://adaptivecards.io/content/down.png",
              "width": "20px",
              "altText": "collapsed"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "id": "chevronUp3",
          "isVisible": false,
          "spacing": "Small",
          "verticalContentAlignment": "Center",
          "items": [
            {
              "type": "Image",
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "expand",
                "targetElements": [
                  "cardContent3",
                  "chevronUp3",
                  "chevronDown3"
                ]
              },
              "url": "https://adaptivecards.io/content/up.png",
              "width": "20px",
              "altText": "expanded"
            }
          ],
          "width": "auto"
        }
      ]
    },
    {
      "type": "Container",
      "id": "cardContent3",
      "isVisible": false,
      "items": [
        {
          "type": "Container",
          "items": [
            {
              "type": "Input.Text",
              "id": "comment3",
              "placeholder": "Add your comment here."
            }
          ]
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "ColumnSet",
              "columns": [
                {
                  "type": "Column",
                  "items": [
                    {
                      "type": "ActionSet",
                      "actions": [
                        {
                          "type": "Action.Submit",
                          "title": "Send",
                          "data": {
                            "id": "_qkQW8dJlUeLVi7ZMEzYVw",
                            "action": "comment",
                            "lineItem": 3
                          }
                        }
                      ]
                    }
                  ],
                  "width": "auto"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "spacing": "Large",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "Right",
              "text": "Total Expense Amount \t",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "Right",
              "text": "Non-reimbursable Amount",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "Right",
              "text": "Advance Amount",
              "wrap": true
            }
          ],
          "width": "stretch"
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "404.30"
            },
            {
              "type": "TextBlock",
              "text": "(-) 0.00 \t"
            },
            {
              "type": "TextBlock",
              "text": "(-) 0.00 \t"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "width": "auto"
        }
      ]
    },
    {
      "type": "Container",
      "style": "emphasis",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "horizontalAlignment": "Right",
                  "text": "Amount to be Reimbursed",
                  "wrap": true
                }
              ],
              "width": "stretch"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "$ 404.30"
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "width": "auto"
            }
          ]
        }
      ],
      "bleed": true
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "id": "chevronDown4",
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "show history",
                "targetElements": [
                  "cardContent4",
                  "chevronUp4",
                  "chevronDown4"
                ]
              },
              "verticalContentAlignment": "Center",
              "items": [
                {
                  "type": "TextBlock",
                  "horizontalAlignment": "Right",
                  "color": "Accent",
                  "text": "Show history",
                  "wrap": true
                }
              ],
              "width": 1
            },
            {
              "type": "Column",
              "id": "chevronUp4",
              "isVisible": false,
              "selectAction": {
                "type": "Action.ToggleVisibility",
                "title": "hide history",
                "targetElements": [
                  "cardContent4",
                  "chevronUp4",
                  "chevronDown4"
                ]
              },
              "verticalContentAlignment": "Center",
              "items": [
                {
                  "type": "TextBlock",
                  "horizontalAlignment": "Right",
                  "color": "Accent",
                  "text": "Hide history",
                  "wrap": true
                }
              ],
              "width": 1
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "id": "cardContent4",
      "isVisible": false,
      "items": [
        {
          "type": "Container",
          "items": [
            {
              "type": "TextBlock",
              "text": "* Expense submitted by **Matt** on Wed, Apr 14th, 2019",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "TextBlock",
              "text": "* Expense approved by **Thomas** on Thu, Apr 15th, 2019",
              "isSubtle": true,
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ActionSet",
          "actions": [
            {
              "type": "Action.Submit",
              "title": "Approve",
              "style": "positive",
              "data": {
                "id": "_qkQW8dJlUeLVi7ZMEzYVw",
                "action": "approve"
              }
            },
            {
              "type": "Action.ShowCard",
              "title": "Reject",
              "style": "destructive",
              "card": {
                "type": "AdaptiveCard",
                "body": [
                  {
                    "type": "Input.Text",
                    "id": "RejectCommentID",
                    "placeholder": "Please specify an appropriate reason for rejection.",
                    "isMultiline": true
                  }
                ],
                "actions": [
                  {
                    "type": "Action.Submit",
                    "title": "Send",
                    "data": {
                      "id": "_qkQW8dJlUeLVi7ZMEzYVw",
                      "action": "reject"
                    }
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}

Answer 1

Способ отображения любой карты, особенно адаптивных, полностью зависит от канала, на который она отправляется. Bot Framework позволяет вам настроить карту так, как вы бы хотели, чтобы она отображалась, но не контролирует, как канал выбирает обработку и отображение входящей активности. Например, Facebook преобразует карту в изображение со ссылками.

Это соображение по поводу рендеринга также верно и для эмулятора. В то время как Emulator полезен для тестирования и должен отражать истинный рендеринг, в конечном итоге ваш бот будет работать на другом канале (Facebook, Slack, Web Chat) для пользователей. Я бы сконцентрировался на разработке карты с учетом этого канала и использовал бы эмулятор для общего тестирования ботов.

Если вы считаете, что должно быть большее соотношение между отображением карты в Adaptive Card Designer и в эмуляторе, я бы предложилвы подаете выпуск в репозиторий BotFramework-Emulator. Обязательно укажите соответствующие данные, которые вы указали здесь.

Надежда на помощь!