...
For illustration, we will use a simple HTML form in the HTML directive to get the data from the user and save it to the dynamic data.
Dynamic Schema
You need a dynamic schema to save the content from the user.
...
| Code Block |
|---|
{
"fields": [
{
"type": "String",
"fieldType": "text",
"ref": "",
"options": [],
"multiple": false,
"validation": [
{
"required": false
}
],
"isDefault": false,
"label": "First Name",
"key": "firstname"
},
{
"type": "String",
"fieldType": "text",
"ref": "",
"options": [],
"multiple": false,
"validation": [
{
"required": false
}
],
"isDefault": false,
"label": "Last name",
"key": "lastname"
}
]
} |
HTML form
This Sample HTML form contains two input fields and a submit button.
| Code Block |
|---|
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <button onclick="window.parent.myFunction(event)">Submit</button> </form> |
HTML Directive
Use the HTML form in the HTML Directive.
| Code Block |
|---|
if(!msg.payload.orbita) {
msg.payload.orbita = {};
}
if(!msg.payload.orbita.directive) {
msg.payload.orbita.directive = [];
}
msg.payload.orbita.directive =
[{
type : "html5",
options :
{
// template : "300x300",
html : `<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <button onclick="window.parent.myFunction(event)">Submit</button> </form>`
}
}]
return msg; |
Bot View Template
To handle the Submit button from the HTML form, you have to create a function in the Custom JS tab of Bot View Template node and use the self.submitQuery property.
...
| View file | ||
|---|---|---|
|
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|