...
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) | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|