Botframework-sdk: builder.CardAction.dialogAction not working with carousel layout

[vaibhavi-joshi]

Hi

I am using botbuilder 3.2.3 for node

I was trying to bind an action with button for a hero card with carousel layout, but it's not able to trigger any action.

so I tried the sample https://github.com/Microsoft/BotBuilder/blob/master/Node/examples/demo-skype/app.js from here, it is working if i use the same, but When I modify it by adding one more card and layout to carousel, it didn't work, it's working for "List" Layout !!!

`
bot.dialog('/actions', [
function (session) {
session.send("Bots can register global actions, like the 'help' & 'goodbye' actions, that can respond to user input at any time. You can even bind actions to buttons on a card.");

    var msg = new builder.Message(session)
        .attachmentLayout(builder.AttachmentLayout.carousel)
        .textFormat(builder.TextFormat.xml)
        .addAttachment
        (
            new builder.HeroCard(session)
                .title("Hero Card")
                .subtitle("Space Needle")
                .text("The <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.")
                .images([
                    builder.CardImage.create(session, "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg")
                ])
                .buttons([
                    builder.CardAction.dialogAction(session, "weather", "Seattle, WA", "Current Weather")
                ])
        );


    msg.addAttachment (
            new builder.HeroCard(session)
                .title("Hero Card")
                .subtitle("Space Needle")
                .text("The <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.")
                .images([
                    builder.CardImage.create(session, "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg")
                ])
                .buttons([
                    builder.CardAction.dialogAction(session, "weather", "Seattle, WA", "Current Weather")
                ])
        );

    session.send(msg);
    session.endDialog("The 'Current Weather' button on the card above can be pressed at any time regardless of where the user is in the conversation with the bot. The bot can even show the weather after the conversation has ended.");
}

]);
`

I am using msg.addAttachment as per my use case I need to add attachments inside one loop.

Am I doing anything wrong ?Can any one help me How to use this with carousel ?

[danmarshall]

which channel are you using? Some channels have limits on how many buttons are shown.

[vaibhavi-joshi]

I am using skype and only one button
@danmarshall is there any alternative to achieve same ?

[pveller]

Same here. Had my attachments displayed in list layout and I can do tap from images and buttons work too. Trying the same builder.CardAction.postBack() as a tap or a button in the Carousel layout does NOT work. The post back basically doesn't happen. Not sure though if it's a Skype (I am using Skype for Mac) issue or the Bot framework's in how it sends the message back to Skype

[reyesrico]

@vaibhavi-joshi buttons with actions are defined as CardAction.imBack or CardAction.openUrl:

builder.CardAction.imBack(session, "name", "value");
builder.CardAction.openUrl(session, "https://www.bing.com/images/search?q=bender&qpvt=bender&qpvt=bender&qpvt=bender&FORM=IGRE", "Click here");

[reyesrico]

function CreateHeroCard(session, builder, title, subtitle, text, url, buttons){
    var card = new builder.HeroCard(session)
        .title(title)
        .subtitle(subtitle)
        .text(text)     
        .images([builder.CardImage.create(session, url)])
        .buttons(buttons);      
    return card;
}

function SendHeroCard(session, builder){
    var buttons = [];   
    buttons.push(builder.CardAction.imBack(session, "Thumbs Up", "Thumbs Up"));
    buttons.push(builder.CardAction.imBack(session, "Thumbs Down", "Thumbs Down"));
    buttons.push(builder.CardAction.openUrl(session, "https://www.bing.com/images/search?q=bender&qpvt=bender&qpvt=bender&qpvt=bender&FORM=IGRE", "I feel lucky"));  

    var attachments = [];
    var card = CreateHeroCard(session, builder, "Surface Pro 4", "Surface Pro 4 is a powerful, versatile, lightweight laptop.", 
                            "Surface does more. Just like you. For one device that does everything, you need more than a mobile OS. Surface Pro 4 has a laptop class keyboard,- full-size USB 3.0, microSD- card reader, and a Mini DisplayPort – and it runs full professional-grade software.",
                            "https://compass-ssl.surface.com/assets/b7/3c/b73ccd0e-0e08-42b5-9f8d-9143223eafd0.jpg?n=Hero-panel-image-gallery_03.jpg",  
                            buttons);

    attachments.push(card);

    var msg = new builder.Message(session)
    .attachments(attachments);
    session.send(msg);
};

[pveller]

I haven't tried imBack but postBack (which is supposed to hide the message if the channel supports it) works just fine in the list layout as a button action or as a tap. It does not work in the carousel layout. @reyesrico, are you saying that it shouldn't? At least it does not in the latest Skype for Mac with the latest bot framework

[pveller]

Quick update. The imBack does work in the carousel layout. It's the postBack that does not.

[tomlm]

Yes skype doesn't currently support postBack, but they will soon.

[vaibhavi-joshi]

@reyesrico I am trying to bind a global action on button click as illustrated in example https://github.com/Microsoft/BotBuilder/blob/master/Node/examples/demo-skype/app.js
it's builder.CardAction.dialogAction

[gilesbutler]

@vaibhavi-joshi I just came across this issue after having the same issue. I realised I was missing the very last line from the demo-skype link you posted.

You need to include:
bot.beginDialogAction('weather', '/weather'); // <-- no 'matches' option means this can only be triggered by a button.

This got the dialogAction buttons in my carousels working as expected.

[AndreMantas]

Still no support for postBack in carousel buttons in skype channel?

I don't mind the message being shown, but it's not behaving the same way as in the emulator.

[Spiggers]

I have upgrade to version 3.8.1 and using the Bot Emulator my ThumbnailCards do not action the Tap event. I downgraded back to 3.2.1 and all is well. How can I find out if this is a bug or me now having read key information? Anyone else seeing this too?

[dijotcr222]

How we can change the shape of a carousel hero card into round shape.

[JasonSowers]

@dijotcr222 You are posting on a closed thread. Can you please open a new issue.

[dijotcr222]

Ok sure