温馨提示:本文翻译自stackoverflow.com,查看原文请点击:node.js - Microsoft Bot Framework (v4): How to make hero card list as prompt choice
node.js botframework

node.js - Microsoft Bot Framework(v4):如何将英雄卡列表作为提示选择

发布于 2020-03-27 10:32:40

我正在尝试创建一个提示对话框,其中包含英雄卡列表。

我创建了一个函数,该函数将返回英雄卡列表并将其用作对话框提示选项。

我怎样才能做到这一点?或者有更好的方法来实现它。注意:我需要将其放在对话框提示中,因为我需要实现顺序对话。我还将英雄卡列表放在一个单独的函数中,因为我将在其他对话框提示中使用它。

async selectProduct(stepContext){
    return await stepContext.prompt(CHOICE_PROMPT, {
        prompt: 'Select Product:',
        choices: this.productChoices()
    });
}



productChoices(){        
    const productSeriesOptions = [
        CardFactory.heroCard(
        'Title 1',
        CardFactory.images(['image URL 1']),
        CardFactory.actions([
            {
                type: ActionTypes.ImBack,
                title: 'Title 1',
                value: 'Value 1'
            }
        ])
        ),

        CardFactory.heroCard(
        'Title 2',
        CardFactory.images(['image URL 2']),
        CardFactory.actions([
            {
                type: ActionTypes.ImBack,
                title: 'Title 2',
                value: 'Value 2'
            }
        ])
        )
    ];

    return productSeriesOptions;
}   

查看更多

查看更多

提问者
brynetwork
被浏览
189
tracy.boehrer 2019-07-03 21:32

我提供了一个示例对话框,该对话框演示了如何向用户展示HeroCards轮播(如下)。HeroCard有一个按钮,单击该按钮会导致运行下一个Waterfall步骤。

我最初是从“使用卡片”示例中拉出此对话框的。因此,如果要运行它,可以替换该项目中的mainDialog.js并在模拟器中运行它。

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

const { ActionTypes, AttachmentLayoutTypes, CardFactory } = require('botbuilder');
const { ChoicePrompt, ComponentDialog, DialogSet, DialogTurnStatus, WaterfallDialog, ChoiceFactory } = require('botbuilder-dialogs');

const MAIN_WATERFALL_DIALOG = 'mainWaterfallDialog';

class MainDialog extends ComponentDialog {
    constructor() {
        super('MainDialog');

        // Define the main dialog and its related components.
        this.addDialog(new WaterfallDialog(MAIN_WATERFALL_DIALOG, [
            this.showProductChoicesStep.bind(this),
            this.showCardSelectionStep.bind(this)
        ]));

        // The initial child Dialog to run.
        this.initialDialogId = MAIN_WATERFALL_DIALOG;
    }

    /**
     * The run method handles the incoming activity (in the form of a TurnContext) and passes it through the dialog system.
     * If no dialog is active, it will start the default dialog.
     * @param {*} turnContext
     * @param {*} accessor
     */
    async run(turnContext, accessor) {
        const dialogSet = new DialogSet(accessor);
        dialogSet.add(this);

        const dialogContext = await dialogSet.createContext(turnContext);
        const results = await dialogContext.continueDialog();
        if (results.status === DialogTurnStatus.empty) {
            await dialogContext.beginDialog(this.id);
        }
    }

    /**
     * Send a carousel of HeroCards for the user to pick from.
     * @param {WaterfallStepContext} stepContext
     */
    async showProductChoicesStep(stepContext) {
        console.log('MainDialog.showProductChoicesStep');

        await stepContext.context.sendActivity({
            attachments: this.productChoices(),
            attachmentLayout: AttachmentLayoutTypes.Carousel
        });
        return { status: DialogTurnStatus.waiting };
    }

    async showCardSelectionStep(stepContext) {
        console.log('MainDialog.showCardSelectionStep');

        await stepContext.context.sendActivity('You picked ' + stepContext.context.activity.value);

        // Give the user instructions about what to do next
        await stepContext.context.sendActivity('Type anything to see another card.');

        return await stepContext.endDialog();
    }

    // ======================================
    // Helper functions used to create cards.
    // ======================================
    productChoices(){
        const productSeriesOptions = [
            CardFactory.heroCard(
            'Product 1',
            CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
            CardFactory.actions([
                {
                    type: 'messageBack',
                    title: 'Pick Me',
                    value: 'product1'
                }
            ])
            ),

            CardFactory.heroCard(
            'Product 2',
            CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
            CardFactory.actions([
                {
                    type: 'messageBack',
                    title: 'Pick Me',
                    value: 'product2'
                }
            ])
            ),

            CardFactory.heroCard(
                'Product 3',
                CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
                CardFactory.actions([
                    {
                        type: 'messageBack',
                        title: 'Pick Me',
                        value: 'product3'
                    }
                ])
                ),

            CardFactory.heroCard(
                'Product 4',
                CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
                CardFactory.actions([
                    {
                        type: 'messageBack',
                        title: 'Pick Me',
                        value: 'product4'
                    }
                ])
            )

        ];

        return productSeriesOptions;
    }
}

module.exports.MainDialog = MainDialog;