Is there a way to enable calendar option as an input in V4 chat bot C# other than using Adaptive cards?

Question

Is there a way to enable Date and Time input in other words calendar options in Chat Bot without using Adaptive cards as i understand from below link the Adaptive cards are not supported in all channels except for Microsoft channels.

How to add custom choices displayed through Prompt options inside Cards & trigger actions on choice click in BOT V4 using c#?

I had enabled Adaptive cards using the below inputs:

[BotFramework]: How to capture/extract the values submitted through Adaptive card rendered in C# Web Chat bot in a waterfall dialog?

Then my query: Is how can i enable the Date Time input in a BOT other than using Adaptive Cards like Hero Card or any other card(except Adaptive card)?

Language: C# SDK: V4 Channel: Web Chat Channel Deployed in : Azure

If there is a way i request you to please provide a detailed step by step guide as I am new to BOT and coding.

Thanks & Regards -ChaitanyaNG

I could not try the below from GitHub as this is related to React but my code is written in C# and SDK V4 from AZURE:

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/10.a.customization-card-components

Expected Result: Display calendar option and time option to select date and time such that i can capture the input values and proceed with my process in waterfall dialog C#

Actual Result: Unable to achieve it as Adaptive card seems to be not supported in Web Chat channel and only in Microsoft Channels like Skype

---

@mrichardson-MSFT: Thanks for all the help till now.

Issue Description:

I have BOT program with multiple waterfall dialog classes the last dialog class STEP #1: I am showing the adaptive card with two date and time inputs one for start and another for Stop Actual Result: The adaptive is displayed successfully both in Emulator and web chat channel without any issues STEP #2: When i click on SetSchedule on the Adaptive card displayed in step 1 the values should be captured in step #2 and displayed on the screen Actual Result : Works perfectly fine in emulator but not in Web Chat channel bot. I get an error in the Webchat Channel BOT. Please find the HTML file for accessing bot, the waterfall dialog class and the Adaptive card json file attached for reference. Along with it please find the error screenshot attached in webchat channel for reference.

Can you please guide me to solve this issue as you done for the sign in issue? Request your immediate help a this is blocking my work.

Thanks & Regards -ChaitanyaNG

using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Schema;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace EchoBot.Dialogs
{
    public class Adaptivecarddialog : WaterfallDialog
    {
        public const string cards = @"./AdaptiveCard.json";

        public Adaptivecarddialog(string dialogId, IEnumerable<WaterfallStep> steps = null)
            : base(dialogId, steps)
        {
            AddStep(async (stepContext, cancellationToken) =>
            {
                var cardAttachment = CreateAdaptiveCardAttachment(cards);

                var reply = stepContext.Context.Activity.CreateReply();
                reply.Attachments = new List<Attachment>() { cardAttachment };

                await stepContext.Context.SendActivityAsync(reply, cancellationToken);
                var opts = new PromptOptions
                {
                    Prompt = new Activity
                    {
                        Type = ActivityTypes.Message,
                        // You can comment this out if you don't want to display any text. Still works.
                    }
                };

                // Display a Text Prompt and wait for input
                return await stepContext.PromptAsync(nameof(TextPrompt), opts);
            });

            AddStep(async (stepContext, cancellationToken) =>
            {
                var res = stepContext.Result.ToString();
                dynamic jobject = JsonConvert.DeserializeObject(res);
                string NewStartDateTime = jobject.Startdate + " " + jobject.Starttime;
                string NewStopDateTime = jobject.Stopdate + " " + jobject.Stoptime;
                await stepContext.Context.SendActivityAsync($"StartDateTime:{NewStartDateTime}", cancellationToken: cancellationToken);
                await stepContext.Context.SendActivityAsync($"StopDateTime:{NewStopDateTime}", cancellationToken: cancellationToken);

                return await stepContext.EndDialogAsync();
            });

        }

        public static new string Id => "Adaptivecarddialog";

        public static Adaptivecarddialog Instance { get; } = new Adaptivecarddialog(Id);

        public static Attachment CreateAdaptiveCardAttachment(string filePath)
        {
            var adaptiveCardJson = File.ReadAllText(filePath);
            var adaptiveCardAttachment = new Attachment()
            {
                ContentType = "application/vnd.microsoft.card.adaptive",
                Content = JsonConvert.DeserializeObject(adaptiveCardJson),
            };
            return adaptiveCardAttachment;
        }
    }
}

 { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "id": "Start date text", "separator": true, "text": "Schedule Start DateTime:" }, { "type": "Input.Date", "id": "Startdate", "separator": true, "value": "2019-05-24" }, { "type": "Input.Time", "id": "Starttime", "separator": true, "value": "08:00" }, { "type": "TextBlock", "id": "Stop date text", "separator": true, "text": "Schedule Stop DateTime:" }, { "type": "Input.Date", "id": "Stopdate", "separator": true, "value": "2019-05-25" }, { "type": "Input.Time", "id": "Stoptime", "separator": true, "value": "08:00" } ], "actions": [ { "type": "Action.Submit", "id": "SubmitBtn", "title": "SetSchedule" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0" } 

Error Messages when tried twice: First Try {error: {code: "BotError", message: "Failed to send activity: bot timed out"}, httpStatusCode: 504} error: {code: "BotError", message: "Failed to send activity: bot timed out"} code: "BotError" message: "Failed to send activity: bot timed out" httpStatusCode: 504

SecondTry {error: {code: "BotError", message: "Failed to send activity: bot returned an error"},…} error: {code: "BotError", message: "Failed to send activity: bot returned an error"} code: "BotError" message: "Failed to send activity: bot returned an error" httpStatusCode: 500

HTML File:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat: Custom style options</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
    <style>
        html, body {
            height: 100%
        }

        body {
            margin: 0
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="webchat" role="main">

    </div>
    <script>
        (async function () {
            // In this demo, we are using Direct Line token from MockBot.
            // To talk to your bot, you should use the token exchanged using your Direct Line secret.
            // You should never put the Direct Line secret in the browser or client app.
            // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication

            // Token is found by going to Azure Portal > Your Web App Bot > Channels > Web Chat - Edit > Secret Keys - Show
            // It looks something like this: pD*********xI.8ZbgTHof3GL_nM5***********aggt5qLOBrigZ8
            const token = '<<Your Direct Line Secret Key>>';

            // You can modify the style set by providing a limited set of style options
            const styleOptions = {
                botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
                botAvatarInitials: 'BF',
                userAvatarImage: 'https://avatars1.githubusercontent.com/u/45868722?s=96&v=4',
                userAvatarInitials: 'WC',
                bubbleBackground: 'rgba(0, 0, 255, .1)',
                bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
            };

            // We are using a customized store to add hooks to connect event
            const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: { language: window.navigator.language }
                        }
                    });
                }
                return next(action);
            });

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

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));
    </script>
</body>
</html>

Answer 1

The short answer is that this feature isn't available. Adaptive Cards are the best route to go for any kind of UI-based date/time picker. And yes, Adaptive Cards are fully supported on Microsoft channels (which includes WebChat), and less so on other channels.

The best option you have would be to use the DateTime Prompt .

There's a lot of different methods with varying complexity to implement this, but the Virtual Assistant Calendar Skill uses it pretty extensively. Its DatePrompt and TimePrompt might be good places to start.

CoreBot also has a DateResolverDialog that may help and is a little easier to understand.

---

DateTime is pretty complex to work with in chat bots because "Wednesday at 4 o'clock" can mean Wednesday at 4AM or 4PM. The Timex Resolution Sample should provide additional ideas for dealing with this, if you're going with a text-based input.

---

It's possible that this isn't working for you in WebChat because of your other issue . I just tested the Date and Time inputs for this card and it's working:

{
    "type": "AdaptiveCard",
    "actions": [{
        "type": "Action.Submit",
        "id": "submit",
        "title": "Submit"
    }],
    "body": [
        {
            "type": "Input.Date",
            "id": "date",
            "title": "New Input.Toggle"
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "Input.Time",
                    "id": "time",
                    "title": "New Input.Toggle"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}