CODEWITHSUNDEEP
javascriptc#botframeworkbotschatbot
Chaitanya N G
Chaitanya N G

Reputation: 524

How to add conditions w.r.t Adaptive cards in ChatBot developed using Microsoft Bot Framework SDK V4 in C#?

Blockquote

I have a chat bot with multiple waterfall dialogs and one of them uses adaptive card for displaying the form for getting inputs and it is developed using MS Bot framework in C# using SDK V4 template and the channel is WebChannel as a result HTML was used at back end for bot to work 

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat: Full-featured bundle with ES5 polyfills</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/latest/webchat-es5.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>
        const token = 's7W';

        const styleOptions = {
            botAvatarImage: '',
            botAvatarInitials: 'BF',
            userAvatarImage: '',
            userAvatarInitials: 'WC',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
        };
        var d = new Date();
        var tzoffset = d.getTimezoneOffset();
        const store = window.WebChat.createStore(
            {},
            function (_ref) {
                const dispatch = _ref.dispatch;
                return function (next) {
                    return function (action) {
                        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                            dispatch({
                                type: 'WEB_CHAT/SEND_EVENT',
                                payload: {
                                    name: 'webchat/join',
                                    value: tzoffset.toString()
                                }
                            });
                        }
                        return next(action);
                    };
                };
            });

        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token: token }),
            styleOptions: styleOptions,
            store: store,
            webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
        }, document.getElementById('webchat'));
        document.querySelector('#webchat > *').focus();
    </script>
</body>
</html>

in browser or webchannel.

My query is:

I want to keep conditions in the adaptive card such as:

  1. Check on mandatory field values,
  2. To display container based upon a particular value selected in a drop down
  3. How to check the email value is valid or not using REGEX
  4. How to check the values in a given container(which is displayed based upon a value selected in the drop down) are provided i.e. mandatory values validation?

I assume this has to be done by using JavaScript which should be embedded in the HTML page at the back side but the problem is i am not sure how? as i am very novice w.r.t javascript.

Please help me with query or problem by providing details in step by step manner or in a guide manner as i am very new to javascript and coding stuff w.r.t the es5 bundle.

The current HTML file w.r.t to ChatBot i have in attached for reference where i have used few lines of script in HTML or and some other things with help of web and some of my previous questions on ChatBot using the es5 bundle.

Updating the query for clarity 29 Oct 2019:

I have an Adaptive Card designed with following containers:

My queries are as follows:

  1. If I select 2 or Both as options in drop down as part of Container 3 then only Container 4 should be displayed. If I select 1 then container 4 should be disabled or hidden. Is this achievable either through JavaScript or C# code or any other settings? If yes then how, please explain in detail as possible step by step manner as i am very new to coding?

  2. Can we have mandatory values validation while submitting the data in the Adaptive card i.e. as per my above modified explanation if i click on submit without entering the text inputs provided in the container 1 i should be getting a pop up or any kind of error message possible that mandatory values are not provided? Is this possible to achieve either though some JavaScript or C# in adaptive card if yes how, please explain in detail as possible step by step manner as i am very new to coding?

  3. One of the text inputs is email how to have validations for email input where user can provide multiple emails with semicolon(;) separated but the value should be in proper email format like [email protected]. How can we provide this kind of validation in adaptive cards?

Upvotes: 0

Views: 506

Answers (1)

Kyle Delaney
Kyle Delaney

Reputation: 12264

None of what you're asking for is possible on the client side using builtin features of Adaptive Cards. If you don't want to build your own Direct Line client with your own Adaptive Cards renderer (which would be very difficult), you'll either have to be satisfied with workarounds or rethink your design specs. You haven't actually provided a draft of the card in question, either with JSON or screenshots, so I'm kind of working blind.

If I select 2 or Both as options in drop down as part of Container 3 then only Container 4 should be displayed. If I select 1 then container 4 should be disabled or hidden. Is this achievable either through JavaScript or C# code or any other settings?

The conventional solution here is to just use multiple cards. Wait until the user chooses an option from "container 3" and sends that information to the bot, and then the bot can send the next card based on what the user selected.

Alternatively, you can get rid of container 3 and infer the user's selection based on which parts of the card they fill out. You could perhaps put container 4 in a ShowCard action to indicate that it's optional.

Can we have mandatory values validation while submitting the data in the Adaptive card i.e. as per my above modified explanation if i click on submit without entering the text inputs provided in the container 1 i should be getting a pop up or any kind of error message possible that mandatory values are not provided?

. . .

One of the text inputs is email how to have validations for email input where user can provide multiple emails with semicolon(;) separated but the value should be in proper email format like [email protected]. How can we provide this kind of validation in adaptive cards?

Again, this isn't possible on the client side unless you build your own client, though this can be achieved on the bot side. When your bot gets the user's response from the Adaptive Card, the bot can validate it and then just send a message to the user explaining what went wrong and asking them to try again. Eventually there will be packages to help you with this, and in the meantime you can have a look at this DCR for examples of what you can do. You might also be interested in reading my latest blog post for more information.

Upvotes: 1

Related Questions