Question

我有一张自适应卡，它将在瀑布对话框中显示。我想知道是否可以在我不想添加按钮来处理点击的自适应卡上捕获点击动作。我正在使用v4版本的bot框架。

点击对话框被触发两次

我的自适应卡：

var Card1 = {
                    "type": "AdaptiveCard",
                    "selectAction": {
                        "type": "Action.Submit",
                        "id": "tap",
                        "title": "tap",
                        "data": "data": { tap: 'tap' }
                    },
                    "backgroundImage": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/card_background.png",
                    "body": [
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/tile_spider.png",
                                            "size": "Stretch"
                                        }
                                    ],
                                    "width": 1
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "horizontalAlignment": "Center",
                                            "weight": "Bolder",
                                            "color": "Light",
                                            "text": "Click here to play another game of Spider in Microsoft Solitaire Collection!",
                                            "wrap": true
                                        }
                                    ],
                                    "width": 1
                                }
                            ]
                        }
                    ],
                    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                    "version": "0.5"
                };

这就是我更新代码的方式

代码

       // Add prompts that will be used by the main dialogs.
        this.dialogs.add(new TextPrompt(TAP_PROMPT, () => true));

        // Create a dialog that asks the user for their name.
        this.dialogs.add(new WaterfallDialog(PUBLICTRANS, [
            this.promptForTap.bind(this),
            this.captureTap.bind(this)
        ]));
  async promptForTap(step) {
        var Card1 = {
            "type": "AdaptiveCard",
            "selectAction": {
                "type": "Action.Submit",
                "id": "tap",
                "title": "tap",
                "data": "data": { tap: 'tap' }
            },
            "backgroundImage": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/card_background.png",
            "body": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/tile_spider.png",
                                    "size": "Stretch"
                                }
                            ],
                            "width": 1
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "horizontalAlignment": "Center",
                                    "weight": "Bolder",
                                    "color": "Light",
                                    "text": "Click here to play another game of Spider in Microsoft Solitaire Collection!",
                                    "wrap": true
                                }
                            ],
                            "width": 1
                        }
                    ]
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0"
        };
        const reply = {
            attachments: [CardFactory.adaptiveCard(Card1)]
        };
        return await step.prompt(TAP_PROMPT, { prompt: reply });
    }

    async captureTap(step) {
        // Edited from original answer
        await step.context.sendActivity(`You selected `);
        // Send Back Channel Event
        await step.context.sendActivity({ type: 'event', name: 'tapEvent' });
        return await step.endDialog();
    }

输出两次触发卡

Answer 1

当用户单击AdaptiveCard触发网页上的事件时，您可以从Bot向WebChat发送反向频道事件。

具有选择操作的简单AdaptiveCard

首先，创建一个具有selectAction的AdaptiveCard。请注意，您可以在整个卡上添加selectAction，也可以在卡中添加不同的组件（例如图像或列）。当用户单击卡片上具有selectAction的部分时，它将向Bot发送一个活动，该活动包含来自该动作的data属性，我们可以使用该活动来确定在机器人端触发了哪个动作。

请确保设置title属性，data字段和type，应为Action.Submit。

{
  "type": "AdaptiveCard",
  "selectAction": {
      "type": "Action.Submit",
      "id": "tap",
      "title": "tap",
      "data": { "tap": "Play again"}
  },
    "body": [
      {
        "type": "TextBlock",
        "horizontalAlignment": "Center",
        "size": "Medium",
        "weight": "Bolder",
        "text": "Click Me!"
    },
    {
        "type": "Image",
        "url": "https://usercontent2.hubstatic.com/13896379.jpg"
    }],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

批号-节点Js

构造函数

const TAP_PROMPT = 'tap_prompt';

constructor(conversationState, userState) {

    ...

    // Add prompts that will be used by the main dialogs.
    this.dialogs.add(new TextPrompt(TAP_PROMPT, () => true));

    // Create a dialog that asks the user for their name.
    this.dialogs.add(new WaterfallDialog(WHO_ARE_YOU, [
        this.promptForTap.bind(this),
        this.captureTap.bind(this)
    ]));
}

AdaptiveCard提示

在Waterfall的其中一个步骤中，您可以创建一个以AdaptiveCard作为附件的回复对象。然后，您可以将该答复传递给提示。我建议在此步骤中使用TextPrompt。

// This step in the dialog sends the user an adaptive card with a selectAction
async promptForTap(step) {
    const reply = {
        attachments: [CardFactory.adaptiveCard(Card)]
    }
    return await step.prompt(TAP_PROMPT, { prompt: reply });
}

捕获AdaptiveCard selecteAction

在Waterfall的下一步中，您可以通过访问step.value获取从AdaptiveCard发送的数据属性。在这里，将具有类型和名称属性的活动发送给机器人。这两个属性将用于过滤WebChat中的传入活动并触发适当的事件。

// This step captures the tap and sends a back channel event to WebChat
async captureTap(step) {

    // Edited from original answer
    await step.context.sendActivity(`You selected ${step.context.activity.value.tap}`);

    // Send Back Channel Event
    await step.context.sendActivity({type: 'event', name: 'tapEvent'});

    return await step.endDialog();
}

WebChat中间件

在WebChat中，我们将创建一个自定义中间件来检查传入的活动。当我们遇到具有可识别的名称和类型的活动时，请在网页上触发您的事件。在下面的示例中，我只是警告用户单击了AdaptiveCard。

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          const { name, type } = action.payload.activity;

          if (type === 'event' && name === 'tapEvent') {
            alert("You tapped on the AdaptiveCard.");
          }
        }
        return next(action);
    }
);

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token }),
    store,
}, document.getElementById('webchat'));

有关反向渠道事件和在WebChat中创建自定义中间件的更多详细信息，请在WebChat存储库中检出this sample。

希望这会有所帮助！

如何在自适应卡Bot框架v4上处理点击动作？

1 个答案:

具有选择操作的简单AdaptiveCard

批号-节点Js

WebChat中间件