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.

Sample schema:

{
    "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 in the HTML Directive as shown below.

if(!msg.payload.orbita) {
    msg.payload.orbita = {};
}
if(!msg.payload.orbita.directive) {
    msg.payload.orbita.directive = [];
}
msg.payload.orbita.directive = [{
    type    : "html5",
    options : {
        template : "300x240",
        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;

Properties and their Description

Bot View Template

To handle the Submit button from the HTML form, you have to create a function in the Custom JS tab of the Bot View Template node and use the self.submitQuery property.

If using an intent utterance to trigger an intent:

self.submitQuery('intent utterance','display text', 'Event', Custom Object)

if using an event to trigger the intent,

self.submitQuery('FlowMessageFreeTextEvent','display text', 'FlowMessageFreeTextEvent', Custom Object}

In this example, place the below code in the Custom JS tab of Bot View Template node.

var myFunction = function(e) {
    self.submitQuery('success', 'form submitted','', $(e.target.parentElement).serializeArray());
};

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

Saving the user input from HTML directive

You can make an interactive HTML form and get input from the chatbot users and store that data.

In the below example, you can collect the Firstname and Lastname of the chatbot users when they click on the Submit button.

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.

The First name and the Last name will be available in the property  msg.payload.originalDetectIntentRequest.payload.extPayload

Dynamic Data Manager

You should use the Dynamic Data Manager node to store the data. In some cases, where you would like to clean the data before storing it, you can use a function node before the Dynamic Data Manager.

In this example, we have used a function node to arrange the data before storing it.

// Insert data to the Dynamic Data
msg.payload.data = {
    "firstname" : msg.payload.originalDetectIntentRequest.payload.extPayload[0].value,
    "lastname" : msg.payload.originalDetectIntentRequest.payload.extPayload[1].value
};
return msg;

And the Dynamic Data Manager node should be set to Create with empty payload.

Related Articles

• Page:
  Live Agent Directive
• Page:
  Adaptive Cards Guide
• Page:
  How do I use Google directives?
• Page:
  How do I use directives?
• Page:
  How to use HTML Directive