我们可以动态添加文本字段吗
Posted
技术标签:
【中文标题】我们可以动态添加文本字段吗【英文标题】：Can we add text field dynamically 【发布时间】：2019-12-02 17:10:07 【问题描述】：我在我的聊天机器人中创建了一张自适应卡片（使用 json），它接受用户的输入。我想添加一个按钮，使用户能够在每次用户单击插入字段时添加一个新的文本字段。 （即，用户可以点击插入按钮来输入教育的详细信息（学校、学院等））
这可以在自适应卡片中实现吗？
我也想知道，自适应卡片可以用任何其他语言（不包括json）设计
【问题讨论】：
你用的是什么渠道？ 我正在使用模拟器来测试我的机器人。 @KyleDelaney 是的，我还在努力 您要求的是特定于渠道的功能。我们需要知道您正在为哪个频道制作机器人，以便了解您想要做的事情是否可行。知道您正在使用 Emulator 进行测试对我们没有帮助，因为 Emulator 的行为方式与其他通道不同，并且没有相同的功能。 您的目标是什么渠道？ 【参考方案1】：最简单的方法是使用Action.ShowCard：
"type": "AdaptiveCard",
"body": [
"type": "Input.Text",
"placeholder": "Placeholder 1",
"id": "text1"
],
"actions": [
"type": "Action.ShowCard",
"title": "Add field",
"card":
"type": "AdaptiveCard",
"body": [
"type": "Input.Text",
"placeholder": "Placeholder 2",
"id": "text2"
],
"actions": [
"type": "Action.ShowCard",
"title": "Add field",
"card":
"type": "AdaptiveCard",
"body": [
"type": "Input.Text",
"placeholder": "Placeholder 3",
"id": "text3"
],
"actions": [
"type": "Action.ShowCard",
"title": "Add field",
"card":
"type": "AdaptiveCard",
"body": [
"type": "Input.Text",
"placeholder": "Placeholder 4",
"id": "text4"
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
您可能不喜欢它的外观，但还有另一种选择。 Microsoft Teams 允许您更新消息，因此您可以使用更多输入字段更新卡片以响应提交操作。首先，您需要一种保存卡片状态的方法，以便更新卡片的活动。在 C# 中，您可以像这样声明状态属性访问器：
public IStatePropertyAccessor<Dictionary<string, (string ActivityId, int InputCount)>> InputCardStateAccessor get; internal set;
然后你可以像这样实例化它：
InputCardStateAccessor = _conversationState.CreateProperty<Dictionary<string, (string, int)>>("cardState");
在 Node.js 中你不需要声明任何东西，但你可以像这样实例化它：
this.inputCardState = this.conversationState.createProperty('cardState');
您需要一种一致的方式来生成您的卡片，您可以在最初发送卡片和更新卡片时使用该方式。我在 C# 中使用 AdaptiveCards NuGet 包：
public static IActivity GenerateAdaptiveCardActivityWithInputs(int inputCount, object valueObject)
var cardData = JObject.FromObject(valueObject);
var cardId = Convert.ToString(cardData[KEYCARDID]);
var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0))
Body = Enumerable.Range(0, inputCount).Select(i =>
var inputId = $"texti";
return new AdaptiveTextInput
Id = inputId,
Value = Convert.ToString(cardData[inputId]),
;
).ToList<AdaptiveElement>(),
Actions = new List<AdaptiveAction>
new AdaptiveSubmitAction
Title = "Add field",
Data = new Dictionary<string, string>
KEYCARDID, cardId ,
KEYSUBMITACTIONID, ACTIONSUBMITADDFIELD ,
,
,
new AdaptiveSubmitAction
Title = "Submit",
,
,
;
return MessageFactory.Attachment(new Attachment(AdaptiveCard.ContentType, content: JObject.FromObject(card)));
Node.js：
generateAdaptiveCardActivityWithInputs(inputCount, cardData)
var cardId = cardData[KEYCARDID];
var body = [];
for (let i = 0; i < inputCount; i++)
var inputId = `text$i`;
body.push(
type: "Input.Text",
id: inputId,
value: cardData[inputId]
);
var card =
type: "AdaptiveCard",
$schema: "http://adaptivecards.io/schemas/adaptive-card.json",
version: "1.0",
body,
actions: [
type: "Action.Submit",
title: "Add field",
data:
[KEYCARDID]: cardId,
[KEYSUBMITACTIONID]: ACTIONSUBMITADDFIELD
,
,
type: "Action.Submit",
title: "Submit",
]
;
return MessageFactory.attachment(CardFactory.adaptiveCard(card));
使用这个函数，你可以在 C# 中这样发送卡片：
var inputCount = 1;
var cardId = Guid.NewGuid().ToString();
var reply = GenerateAdaptiveCardActivityWithInputs(inputCount, new Dictionary<string, string> KEYCARDID, cardId );
var response = await turnContext.SendActivityAsync(reply, cancellationToken);
var dict = await InputCardStateAccessor.GetAsync(turnContext, () => new Dictionary<string, (string, int)>(), cancellationToken);
dict[cardId] = (response.Id, inputCount);
Node.js：
var inputCount = 1;
var cardId = Date.now().toString();
var reply = this.generateAdaptiveCardActivityWithInputs(inputCount, [KEYCARDID]: cardId );
var response = await turnContext.sendActivity(reply);
var dict = await this.inputCardState.get(turnContext, );
dict[cardId] =
activityId: response.id,
inputCount: inputCount
;
await this.inputCardState.set(turnContext, dict);
您可以在 C# 中更新卡片以响应卡片的“添加字段”提交操作，如下所示：
private async Task AddFieldAsync(ITurnContext turnContext, CancellationToken cancellationToken)
var activity = turnContext.Activity;
if (activity.ChannelId == Channels.Msteams)
var value = JObject.FromObject(activity.Value);
var cardId = Convert.ToString(value[KEYCARDID]);
var dict = await InputCardStateAccessor.GetAsync(turnContext, () => new Dictionary<string, (string, int)>(), cancellationToken);
if (dict.TryGetValue(cardId, out var cardInfo))
var update = GenerateAdaptiveCardActivityWithInputs(++cardInfo.InputCount, value);
update.Id = cardInfo.ActivityId;
update.Conversation = activity.Conversation;
await turnContext.UpdateActivityAsync(update, cancellationToken);
dict[cardId] = cardInfo;
Node.js：
async addField(turnContext)
var activity = turnContext.activity;
if (activity.channelId == 'msteams')
var value = activity.value;
var cardId = value[KEYCARDID];
var dict = await this.inputCardState.get(turnContext, );
var cardInfo = dict[cardId];
if (cardInfo)
var update = this.generateAdaptiveCardActivityWithInputs(++cardInfo.inputCount, value);
update.id = cardInfo.activityId;
update.conversation = activity.conversation;
update.serviceUrl = activity.serviceUrl;
dict[cardId] = cardInfo;
await this.inputCardState.set(turnContext, dict);
await turnContext.updateActivity(update);
【讨论】：
谢谢，我尝试了 Action.ShowCard 但我不知道用户想要添加多少次新字段，有时可能是用户想要添加 100 个字段的情况所以我想知道是否有任何替代方法可以避免冗余。如果您能帮助我解决 node js 中的解决方案，那就太好了。 （PS：我是自适应卡片的初学者） @PriyaG - 即使您正在努力实施我的解决方案，您仍然可以对答案表示感谢，以感谢我所做的工作。如果我向您展示如何在 Node.js 中实现第二个选项，您是否也会接受我的回答？如果您是 Adaptive Cards 的初学者，那么您可能想阅读我的最新博文：blog.botframework.com/2019/07/02/… 感谢您付出如此多的努力，我尊重您为帮助我所做的努力，我也对您的帖子投了赞成票，但因为我是新成员*** 也是，我没有 15+ 的声誉，所以我的投票无法显示是我从 *** 团队收到的消息:) 是的，我会接受你在 Node js 中的回答，因为我一直在努力解决它很长一段时间。 @PriyaG - 我已经用 Node.js 为你编写了代码。请接受这个答案。【参考方案2】：是的，你可以在 javascript 中查看 addRow
【讨论】：
P.S.自适应卡是用 json 设计的，而不是 javascript。所以我想要像 json 中的 onclick() 函数以上是关于我们可以动态添加文本字段吗的主要内容，如果未能解决你的问题，请参考以下文章