CODEWITHSUNDEEP
c#.netbotframework
sk2andy
sk2andy

Reputation: 809

MS Bot Framework send EventActivity serverside

I was wondering that I did not find anything about sending an IEventActivity to a client. I did not manage to get it to work.

What I am trying to achieve is to enable and disable the file-upload-button in the webchat by sending an event to the chatter.

Can anyone point me to the right direction? How can I send an event to the client?

Upvotes: 0

Views: 151

Answers (1)

Fei Han
Fei Han

Reputation: 27825

What I am trying to achieve is to enable and disable the file-upload-button in the webchat by sending an event to the chatter.

You can refer to the following sample code to achieve your requirement to dynamically disable/enable upload button for webchat.

In dialog:

private async Task MessageReceivedAsync(IDialogContext context, IAwaitable<object> result)
{
    var activity = await result as Activity;

    // calculate something for us to return
    int length = (activity.Text ?? string.Empty).Length;

    if (activity.Text.ToLower().Contains("disable upload"))
    {
        var reply = context.MakeMessage() as IEventActivity;
        reply.Type = "event";
        reply.Name = "disablebutton";
        reply.Value = "DisableUploadButton";
        await context.PostAsync((IMessageActivity)reply);
    }
    else if(activity.Text.ToLower().Contains("enable upload"))
    {
        var reply = context.MakeMessage() as IEventActivity;
        reply.Type = "event";
        reply.Name = "enablebutton";
        reply.Value = "EnableUploadButton";
        await context.PostAsync((IMessageActivity)reply);
    }
    else
    {
        // return our reply to the user
        await context.PostAsync($"You sent {activity.Text} which was {length} characters");
    }

    context.Wait(MessageReceivedAsync);
}

On JavaScript client:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <style>
        .wc-chatview-panel {
            width: 350px;
            height: 500px;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="bot" />
</body>
</html>
<script>
    var botConnection = new BotChat.DirectLine({ secret: "{directline_secret}" }); 

    var d = new Date();
    var tzoffset = d.getTimezoneOffset();

    BotChat.App({
        botConnection: botConnection,
        user: { id: 'userid' },
        bot: { id: '{bot_id}' },
        resize: 'detect'
    }, document.getElementById("bot"));


    botConnection.postActivity({
        type: 'event',
        from: { id: 'userid'},
        name: 'ClientTimezoneOffsetEvent',
        value: tzoffset.toString()
    }).subscribe(function (id) { console.log('ClientTimezoneOffset: "' + tzoffset + '" sent'); });

    //listens for a specific event from the bot
    botConnection.activity$
        .filter(activity => activity.type === "event" && activity.name === "disablebutton")
        .subscribe(activity => disableuploadbutton(activity.value));

    botConnection.activity$
        .filter(activity => activity.type === "event" && activity.name === "enablebutton")
        .subscribe(activity => enableuploadbutton(activity.value));

    function disableuploadbutton(val) {
        //hide wc-upload
        $(".wc-upload").hide();
        console.log(val);
    }

    function enableuploadbutton(val) {
        $(".wc-upload").show();
        console.log(val);
    }
</script>

Test Result:

1)disable button

enter image description here

2)enable button

enter image description here

Besides, you can also try to use the backchannel mechanism to achieve your requirement.

Upvotes: 2

Related Questions