【问题标题】:How to disable button after single use in a Adaptive Cards如何在自适应卡中单次使用后禁用按钮
【发布时间】:2020-01-06 00:38:40
【问题描述】:

我在我的 LUIS 代理中使用自适应卡。用户填写完所有详细信息并提交卡片后,应禁用提交按钮以防止重复使用该按钮。

我们还想知道在单击按钮时显示嵌套自适应卡片时如何隐藏按钮。

我尝试使用用户输入的值来验证卡,但我正在为此寻找更好和最佳的解决方案

P.s 正在开发 bot 框架 v4 API

【问题讨论】:

  • 您的目标是什么渠道?
  • 我正在为网络频道做这个
  • 您能解释一下“而且我想知道当我们在单击按钮时显示嵌套自适应卡片时如何隐藏按钮”是什么意思?您要隐藏哪个按钮,何时隐藏?您是说希望 ShowCard 操作在您单击时消失吗?如果是这样,用户将如何折叠卡片?
  • 我在一张自适应卡片中有两个提交按钮。显示卡片基本上是一张可折叠的自适应卡片。它里面也有一个提交按钮。所以如果用户选择可折叠的卡片所以我希望那个里面的提交按钮作为最终提交,为此我希望我以前的提交按钮在这一点上隐藏..希望你现在明白了!
  • 所以你想让一个被禁用而另一个消失?

标签: c# botframework adaptive-cards


【解决方案1】:

在像 Teams 这样的频道中,您的机器人可以调用更新活动 API 并以这种方式在对话历史记录中编辑卡片。网络聊天不支持开箱即用的更新或删除活动,但如果你 fork Web Chat repo,你可以修改它来做任何你想做的事情。这与使用网络聊天作为起点创建自己的 Direct Line 客户端基本相同。

为了清楚起见,我想简单地提一下,网络聊天并不是一个真正的渠道。 Direct Line 是渠道,Web Chat 是 Direct Line 客户端。客户端应用程序最终负责呈现卡片并处理它们的交互性。

有一种方法可以有效地使用机器人状态在任何渠道中禁用自适应卡片提交操作。如果您将识别信息放入提交操作的数据中,那么您可以让您的机器人记住该按钮已被单击。如果您确保再次单击按钮时机器人不执行任何操作,那么即使看起来没有任何不同,它也会被有效地禁用。

如果您对作为 NuGet 包提供的更多 Adaptive Card 功能感兴趣,请支持我的Bot Builder Community idea。如果您想了解更多关于将自适应卡片与 Bot 框架一起使用的信息,请查看我最新的blog post

【讨论】:

  • 我想禁用整个自适应卡,而不仅仅是提交按钮,就像使用可以点击它一样,我的卡没有下拉应该可以工作
  • @NikhilBansal - 在 Teams 中,您更新的卡片可以删除其输入。由于网络聊天不支持消息更新,因此您只能在创建自己的 Direct Line 客户端时执行此操作。
  • 我将重复的问题转发到这个答案只是因为我无法将它们转发到这个更好的答案,它提到了一个新的网络聊天示例:stackoverflow.com/a/64722822/2122672
【解决方案2】:

在网络聊天中,隐藏/禁用提交按钮可以在 Azure bot 的“传入活动”事件中处理。您可以从自适应卡片的 JSON 文件中获取“your_submit_button_id”。

const store = window.WebChat.createStore(
    {},
    function (_ref) {
        const dispatch = _ref.dispatch;
        return function (next) {
            return function (action) {
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: { language: window.navigator.language }
                        }
                    });
                }
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
        const event = new Event('webchatincomingactivity');

        event.data = action.payload.activity;
/* hiding/disabling button code starts here */
    if(event.data.value!=undefined && event.data.value.id=='your_submit_button_id')
    {
     var btnArr=document.getElementsByClassName("ac-pushButton");
     btnArr[btnArr.length-1].style.display='none';

             //btnArr[btnArr.length-1].disabled = true;
    }
        window.dispatchEvent(event);
    }
                return next(action);
            };
        };
    });

【讨论】:

    猜你喜欢
    • 2020-11-10
    • 2019-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多