Warm tip: This article is reproduced from stackoverflow.com, please click
node.js botframework

Microsoft Bot Framework (v4): How to make hero card list as prompt choice

发布于 2020-03-27 10:17:47

I'm trying to create a prompt dialog with hero card list as the choices.

I've created a function that will return the herocard list and use it as the dialog prompt choice.

How can i achieved this? or there is a better way to implement it. Note: I need to put it in the dialog prompt because I need to implement a sequential conversation. I also put the herocard list in a separate function because I will use it in other dialog prompt.

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;
}   
Questioner
brynetwork
Viewed
313
tracy.boehrer 2019-07-03 21:32

I've included a sample Dialog that demonstrates presenting a carousel of HeroCards to the user (below). The HeroCard has a single button that when clicked results in the next Waterfall step being run.

I originally pulled this dialog from the 'using-cards' sample. So if you wanted to give it a run, you could replace the mainDialog.js in that project and run it in the emulator.

// 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;