机器人框架中自适应卡的 HostConfig答案

【问题标题】：HostConfig for adaptive cards in bot framework机器人框架中自适应卡的 HostConfig
【发布时间】：2017-10-18 08:32:07
【问题描述】：

我将自适应卡与机器人框架 node.js SDK 一起使用。将这些自适应卡片发送给我的用户已经成功。现在我想更进一步：

在site 上，他们告诉您可以进一步自定义卡片的外观。现在我想知道这是如何工作的？如何调整此 hostconfig 文件以更改颜色、填充、背景等。如何使用 CSS 和 HTML 来构建卡片，就像他们在网站上所说的那样？

提前致谢

【问题讨论】：

标签： node.js botframework adaptive-cards

【解决方案1】：

要调整 HostConfig，您可以致电 AdaptiveCards.setHostConfig 并传递您的配置。一个例子：

AdaptiveCards.setHostConfig({
    "supportsInteractivity": true,
    "strongSeparation": {
        "spacing": 10,
        "lineThickness": 1,
        "lineColor": "#EEEEEE"
    },
    "fontFamily": "Segoe UI",
    "fontSizes": {
        "small": 12,
        "normal": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
    },
    "fontWeights": {
        "lighter": 200,
        "normal": 400,
        "bolder": 600
    },
    "colors": {
        "dark": {
            "normal": "#333333",
            "subtle": "#EE333333"
        },
        "light": {
            "normal": "#FFFFFF",
            "subtle": "#88FFFFFF"
        },
        "accent": {
            "normal": "#2E89FC",
            "subtle": "#882E89FC"
        },
        "attention": {
            "normal": "#5D60B3",
            "subtle": "#DD5D60B3"
        },
        "good": {
            "normal": "#00a000",
            "subtle": "#DD00a000"
        },
        "warning": {
            "normal": "#c00000",
            "subtle": "#DDc00000"
        }
    },
    "imageSizes": {
        "small": 40,
        "medium": 80,
        "large": 160
    },
    "actions": {
        "maxActions": 5,
        "separation": {
            "spacing": 10
        },
        "buttonSpacing": 20,
        "stretch": false,
        "showCard": {
            "actionMode": "inlineEdgeToEdge",
            "inlineCardSpacing": 16,
            "backgroundColor": "#08000000",
            "padding": {
                "top": 16,
                "right": 16,
                "bottom": 16,
                "left": 16
            }
        },
        "actionsOrientation": "horizontal",
        "actionAlignment": "left"
    },
    "adaptiveCard": {
        "backgroundColor": "#fafafa",
        "padding": {
            "left": 10,
            "top": 10,
            "right": 10,
            "bottom": 10
        }
    },
    "container": {
        "separation": {
            "spacing": 10
        },
        "normal": {},
        "emphasis": {
            "backgroundColor": "#cccccc",
            "borderColor": "#aaaaaa",
            "borderThickness": {
                "top": 1,
                "right": 1,
                "bottom": 1,
                "left": 1
            },
            "padding": {
                "top": 10,
                "right": 10,
                "bottom": 10,
                "left": 10
            }
        }
    },
    "textBlock": {
        "color": "dark",
        "separations": {
            "small": {
                "spacing": 10
            },
            "normal": {
                "spacing": 10
            },
            "medium": {
                "spacing": 10
            },
            "large": {
                "spacing": 10
            },
            "extraLarge": {
                "spacing": 10
            }
        }
    },
    "image": {
        "size": "medium",
        "separation": {
            "spacing": 10
        }
    },
    "imageSet": {
        "imageSize": "medium",
        "separation": {
            "spacing": 10
        }
    },
    "factSet": {
        "separation": {
            "spacing": 10
        },
        "title": {
            "color": "dark",
            "size": "normal",
            "isSubtle": false,
            "weight": "bolder"
        },
        "value": {
            "color": "dark",
            "size": "normal",
            "isSubtle": false,
            "weight": "normal"
        },
        "spacing": 10
    },
    "input": {
        "separation": {
            "spacing": 10
        }
    },
    "columnSet": {
        "separation": {
            "spacing": 10
        }
    },
    "column": {
        "separation": {
            "spacing": 10
        }
    }
});

【讨论】：

感谢您的回复。我正在使用 Node.js 并像这样发送卡片： var msg = new builder.Message(session) .addAttachment({ contentType: "application/vnd.microsoft.card.adaptive", content: json with the正文 });那么我究竟可以在哪里设置这些配置呢？看起来你正在使用 npm 包？
有什么理由不想使用 npm 包？
你能举个例子说明如何使用 npm 包发送自适应卡吗？
检查adaptivecards.io/documentation/#create-libraries-typescript和adaptivecards.io/documentation/#create-libraries-javascript
我注意到您的列表中没有显示“默认宽度”参数（或类似参数）@EzequielJadib 你知道是否可以为渲染的自适应卡片指定默认宽度吗？跨度>

【解决方案2】：

HostConfig 是关于接收卡的应用程序，它可以控制渲染的外观和感觉，因此它与主机应用程序 UX 匹配。

卡片的制作者可以使用“none”、“default”或“strong”来控制间距，但由接收者决定这意味着什么。

【讨论】：

【解决方案3】：

https://github.com/Microsoft/BotFramework-WebChat/blob/master/AdaptiveCards.md

从上面你可以看到

      AdaptiveCards.setHostConfig( {YOUR JSON HERE} );

【讨论】：