我们可以动态添加文本字段吗

     2023-03-13     146

关键词:

【中文标题】我们可以动态添加文本字段吗【英文标题】: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() 函数

我们如何在目标 c 中添加文本字段来推送通知? [复制]

】我们如何在目标c中添加文本字段来推送通知?[复制]【英文标题】:Howcanweaddtextfieldtopushnotificationinobjectivec?[duplicate]【发布时间】:2016-05-1909:13:13【问题描述】:我想添加文本字段来推送通知,即当应用程序在后台时。我向UIUs... 查看详情

Azure 仪表板可以动态添加小部件吗?

...间】:2021-04-2306:01:33【问题描述】:Azure有一个仪表板,我们可以在其中为我们的管道和发布添加小部件当我们添加新的构建或发布管道时,是否可以将此仪表板配置为动态添加新的小部件?更具体地说,我们希望仪表板显示特... 查看详情

我们可以将函数“文本”的图例添加到 matlab 吗?

】我们可以将函数“文本”的图例添加到matlab吗?【英文标题】:Canweaddlegendforfunction"text"tomatlab?【发布时间】:2019-09-0707:58:34【问题描述】:我想为我的情节添加图例。因为我想使用标记图“heartsuit”,所以我使用了“t... 查看详情

如何动态地将文本字段值添加到数组中?

...视图中表示。【问题讨论】:你到现在都做了什么。更新我们的详细信息?您开发的平台是什么 查看详情

将文本字段动态添加到表格视图单元格并水平滚动

...格动态添加多个文本字段,并且还想获取数据,任何人都可以建议我。如何在iOS中水平滚动?【问题讨论】:【参考方案1】:UITextField*m 查看详情

从动态输入字段 JavaScript 读取文本

...时间】:2020-05-2417:21:07【问题描述】:我有一个网站,您可以在其中输入文本到输入字段,然后按“添加新行”以添加另一个输入字段。当用户按下提交按钮时,我希望能够阅读文本字段中的所有文本,但我似乎无法弄清楚如何... 查看详情

我们可以使用 Pencil Kit 在照片标记中添加文本、形状和签名吗?

】我们可以使用PencilKit在照片标记中添加文本、形状和签名吗?【英文标题】:Canweaddtext,shapeandsignatureinPhotoMarkupwithPencilKit?【发布时间】:2020-06-1109:08:57【问题描述】:在我的应用程序中使用PencelKit标记照片时,我没有任何选项... 查看详情

SQL Server - 你可以在 CREATE TABLE 中添加字段描述吗?

】SQLServer-你可以在CREATETABLE中添加字段描述吗?【英文标题】:SQLServer-CanyouaddfielddescriptionsinCREATETABLE?【发布时间】:2010-12-3109:53:23【问题描述】:我可以看到很多关于字段描述扩展属性的位置以及如何获取它的帖子,但没有关... 查看详情

JavaFX 动态添加新的文本字段

】JavaFX动态添加新的文本字段【英文标题】:JavaFXdynamicallyaddingnewtextfields【发布时间】:2017-08-3108:27:08【问题描述】:我正在编写一个程序,允许用户在需要向表单添加更多数据的情况下添加新的空文本字段。我无法理解如何为... 查看详情

动态添加字段到 laravel 表单

...,我想添加一个按钮,该按钮将添加一行,其中包含用户可以填写的4个文本框(每个名称不同)。每次用户单击该按钮时,应添加另一行4个文本框.在理想情况下,代码将是通过单击按钮调用的javascript函数 查看详情

来自动态添加的文本字段的输入未通过 request()->validate() 数组

...间】:2021-12-1015:50:21【问题描述】:我有一个表单,用户可以在其中输入从小学到大学的教育。如果他们想添加他们已经完成的任何其他研究,他 查看详情

建议使用自动布局约束动态添加标签和文本字段的逻辑

】建议使用自动布局约束动态添加标签和文本字段的逻辑【英文标题】:SuggestlogicfordynamicallyaddLabelandTextfieldsusingAutolayoutconstraints【发布时间】:2017-03-1011:20:45【问题描述】:工作代码在这里ManageUITextField\'sdynamicpositionusingautolayout... 查看详情

PDF 中动态大小的多行文本框字段

...问题是当动态内容超过多行文本框的初始大小时:当然我可以调整原始模板中文本框的大小,但动态内容可能是1到50行,我希望文本框后面的文本接近动态内容的最后一行。有人可以提出解决这个问题的方法吗 查看详情

数据库动态添加字段

...些表与字段的基本操作、数据库备份等。在数据库表中,我们可以在表设计中添加字段并设置数据类型也可以通过代码,在程序中添加自动编号字段。部分选择型字段的选项,来自于数据库这里得考虑如何更简单的对接,和处理toke... 查看详情

我们可以隐藏表单字段依赖于其他字段吗?

】我们可以隐藏表单字段依赖于其他字段吗?【英文标题】:canwehideformfieldsdependonotherfields?【发布时间】:2022-01-1814:01:39【问题描述】:我试图使我正在创建的表单尽可能动态,所以我有一个案例,如果用户从下拉列表中选择值... 查看详情

将文本字段动态添加到 extjs 中的面板

】将文本字段动态添加到extjs中的面板【英文标题】:DynamicallyaddTextFieldstoaPanelinextjs【发布时间】:2015-07-1721:49:42【问题描述】:我有一个面板,我希望在“hbox”布局中为json数据中的每个条目添加两个文本字段。例如:假设我... 查看详情

我们可以将点击手势添加到 UILabel 吗?

】我们可以将点击手势添加到UILabel吗?【英文标题】:CanweAddTapGesturetoUILabel?【发布时间】:2017-02-2715:10:22【问题描述】:我在UIView中添加了标签并创建了它的插座,然后在UITapGestureRecognizer的帮助下我添加了功能,但是当我点击... 查看详情

在 JSF 中动态添加文本字段 [重复]

】在JSF中动态添加文本字段[重复]【英文标题】:DynamicaddingtextfieldsinJSF[duplicate]【发布时间】:2013-05-2114:49:17【问题描述】:我有一个带有inputText的屏幕,旁边有一个(+)按钮,当用户按下该按钮时,表单应在其旁边(或下方,等... 查看详情