问题描述
我在bot框架中使用自适应卡模板。当用户从下拉列表中选择特定值时，基于选择，应自动填充输入表格卡上的几个输入字段。如何实现呢？
基于下拉菜单，如果用户选择“我自己”，则应在他/她的电子邮件地址文本框中自动填充他的电子邮件ID（我可以从存储在用户状态的用户个人资料中获取电子邮件地址）。 我正在使用的自适应卡如下：
{
"type": "AdaptiveCard","$schema": "http://adaptivecards.io/schemas/adaptive-card.json","version": "1.2","body": [
{
"type": "TextBlock","text": "Please enter the email Id,on behalf of whom you want to raise the request.","wrap": true
},{
"type": "Input.ChoiceSet","id":"dropdown","choices": [
{
"title": "Myself","value": "Myself"
},{
"title": "Other","value": "Other"
}
],"placeholder": "Raise request for"
},{
"type": "Input.Text","id": "email","placeholder": "Enter email address here","validation": {
"necessity": "required","errorMessage": "Email address is required"
}
},{
"type": "ActionSet","actions": [
{
"type": "Action.Submit","title": "Submit","data": "Submit"
}
]
},"title": "Cancel","data": {
"id": "stepCancel"
}
}
]
}
]
}
我使用动作而不是动作集。该卡看起来像这样：
@H_502_10@{
"type": "AdaptiveCard","id": "dropdown","errorMessage": "Email address is required"
},"inlineAction": {
"type": "Action.Submit","title": "Submit"
}
}
]
}
解决方法
如果您想让Adaptive Card进行某些非本意设计的事情，则需要使用Adaptive Cards extensibility编写自己的渲染器代码。您可以使用this answer及其许多链接的答案作为指导。
我发现这些问题的通常模式包括两个部分：提出自己的“模式”以供代码读取，然后编写代码以进行读取。如果您希望选择集输入在选择某个选项时用一定的值填充某个文本输入，那么您的架构将包含三部分信息：文本输入的ID，填充它的值以及触发选择的输入它。既然有很多信息，那么可以将所有这三个部分都放在自己的“填充”对象属性中，就像这样：
{
"type": "Input.ChoiceSet","id": "dropdown","choices": [
{
"title": "Myself","value": "Myself"
},{
"title": "Other","value": "Other"
}
],"placeholder": "Raise request for","populate": {
"target": "email","with": "[email protected]","when": "Myself",},不幸的是，Direct Line会从您的自适应卡中去除其他属性，因此它们永远不会到达Web聊天。这个问题有一个workaround，您可以通过欺骗Direct Line认为它不是自适应卡，然后确保Web聊天在收到它时知道它是一个自适应卡，来保留完整的JSON。
如果不使用替代方法，则需要找到某种方式将这三部分信息发送到Web Chat。如果不想让您的代码可在不同的卡上重复使用，则只需将文本输入的名称和选择内容硬编码到JavaScript中，这样就无需通过卡进行传输。如果您按照通常的方式将信息放入id属性中，那么它可能看起来非常拥挤，并且在提交数据后，机器人很难读取动态ID：
"id": "[email protected]",如果用户的电子邮件已经以某种方式存储在Web聊天端，那么您将不需要通过卡进行传输，并且ID可以仅为"populate_email_when_Myself"。这没有那么强硬，而且由于它不是动态生成的，因此您的机器人更容易找到它。我将进一步假设您的客户已经有电子邮件地址，并且文本输入的ID "email"已在JavaScript中进行了硬编码，因此选择集输入ID可以仅为{{1 }}。
一旦您准备好编写JavaScript代码，我通常会喜欢使用"populateEmail_Myself"，所以我的大部分代码只是在初始化时才开始执行。但是，我发现onParseElement的一个问题是您将只能访问已解析的元素，因此，如果在之后处解析了文本输入，则您的选择集输入，那么用于选择集输入的onParseElement函数将无法访问文本输入。您可以通过让函数在卡的末尾查找元素来解决该问题，以便该函数可以访问所有其他元素，但是在这里的示例仅使用onParseElement而不是{{1} }。请注意，这意味着该功能将在任何卡中的任何输入值发生更改时（包括每次在文本输入中按下键时）都将执行。
onInputValueChanged在许多情况下，通过调用onParseElement修改元素后，您需要重新渲染该元素。在这种情况下，我们不需要这样做，因为我们直接使用window.AdaptiveCards.AdaptiveCard.onInputValueChanged = input => {
const PREFIX_POPULATE_EMAIL = 'populateEmail_';
if (input.id && input.id.startsWith(PREFIX_POPULATE_EMAIL)) {
// Myself
const targetValue = input.id.slice(PREFIX_POPULATE_EMAIL.length);
// The Adaptive Card object
const card = input.getRootElement();
// The text input with the hardcoded ID
const emailElement = card.getElementById('email');
// Did the user choose "Myself"?
if (input.value == targetValue) {
emailElement.renderedInputControlElement.value = THEIR_EMAIL_ADDRESS;
}
}
}
更改了呈现元素中的值，而不是更改了内部未呈现卡元素中的值。这有点不客气，因为emailElement.render()在TypeScript文件中被标记为受保护，但是如果您想以更正式的方式进行操作，那么我怀疑您必须重新呈现整个卡。