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:
- Check on mandatory field values,
- To display container based upon a particular value selected in a drop down
- How to check the email value is valid or not using REGEX
- 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:
- Container 1: Has few text inputs to be filled in
- Container 2: Few check boxes to be selected
- Container 3: A drop down option which has 1, 2 or Both as options to be selected
- Container 4: Few other text boxes for input
- Lastly: a submit button out side of all containers
My queries are as follows:
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?
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?
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?
