Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

In this document, you will learn to use an HTML directive and get user input and store them into the dynamic data.

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.

The below schema will save 

{
    "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. 

<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 (above) in the HTML Directive.

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.

self.submitQuery('intent','display text', ‘Event’, Custom Object}

var myFunction = function(e) { 
     var fname = $('#'+$('iframe').attr('id')).contents().find('#fname').val();
     var lname = $('#'+$('iframe').attr('id')).contents().find('#lname').val();
     self.submitQuery('derive', 'form submitted','', { "fname": fname, "lname": lname });
    e.preventDefault();
 }

When the user fills the form and clicks the submit button, the intent mentioned in the Bot view template code will get triggered and continue the flow.

The example flow is in the attachment. After importing this example flow, you must make changes to the Bot view template as suggested above to get the flow working.

  • No labels