Page Comparison

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 post it to the dynamic dataan intent.

Dynamic Schema

You need a dynamic schema to save the content from the user.

Sample schema:

Image Added

Template node

Code Block

{<html>
  <head>
 "fields": [    <style>
    {   </style>
    <script     "type": "String",
            "fieldType": "text",type="text/javascript">
    </script>
  </head>
  <body>
 "ref": "",  <form> 
         "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<p><label for="fname">First name:</label><br>label> <input type="text" id="fname" name="fname" value="John"><br> <label></p> 

        <p><label for="lname">Last name:</label><br>label> <input type="text" id="lname" name="lname" value="Doe"><br><br> <button ></p> 
        <p style="text-align: center;"><button onclick="window.parent.myFunctionhtmlFormSendData(event)">Submit</button>/button></p>
  
    </form>
  </body>
</html>

HTML Directive

Use the HTML form (above) in the HTML Directive (below).

Code Block

if(!msg.payload.orbita) {= msg.payload.orbita =|| {};
}
if(!    msg.payload.orbita.directive) {= msg.payload.orbita.directive =|| [];
  }  //node.warn(msg.payload.orbita.directive =multiagent.chat.chatText );
    [msg.payload.orbita.directive.push({
    type    type: "html5",
        options : {
    {         template : "300x300400x150",
        html     url: `<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>`
        id : "newId",
        renderBubble : true`/oeapi/userdata`
        }
    }
   }]
);
return msg;

Property	Description
`type : “html5“`	The type should be set to html5 to invoke the HTML Directive.
`options: {}`	The options object contains the following properties. template html id renderBubble
`template : "300x300"`	(OPTIONAL) The template property defines the size of HTML content.
html: ``Place the html content here	.URL to the HTML page
`id:"html-content-1"`	(OPTIONAL) This property helps to set the id value of the iframe.
`renderBubble : true`	(OPTIONAL) This property defines how to render the html5 directive in the chatbot. If it is true, it will render inside the chat bubble and if it is false it will render outside of the chat bubble. By default, the `renderBubble` is set to `true`

renderBubble: true

renderBubble: false

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’'Event', Custom Object}

if using an event to trigger the intent,

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

For event:

Image Added

For utterance:

Image Added

Code Block
var

myFunction

htmlFormSendData = function(e) { 
     var fname = $('#'+$('iframe').attr('id')).contents().find('#fname').val();
     var lname = $('#'+$('iframe').attr('id')).contents().find('#lname').val();
     // self.submitQuery('

derive

FlowMessageFreeTextEvent',

'form submitted

'Thanks','FlowMessageFreeTextEvent', { "fname": fname, "lname": lname });
     self.submitQuery('utterance intent formResult', 'Thanks','', { "fname": fname, "lname": lname });
    e.preventDefault();
 };

When the user fills the form and clicks the submit button, the intent utterance mentioned in the Bot view template code will get triggered and continue the flow.be sent to cause the formResult intent to fire.

Image Added

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.

View file

name	HTML_Directive.json

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.

Code Block

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.submitQuery('Your data submited', 'User data', null, {fname: document.getElementById('fname').value, lname: document.getElementById('lname').value});">Submit</button> </form>`
    }
   }]
return msg;

The First name and the Last name will be available in the property

msg.payload.originalDetectIntentRequest.payload.extPayload

Versions Compared

Old Version 6

New Version 7

Key

Dynamic Schema

Template node

HTML form

HTML Directive

Bot View Template

Saving the user input from HTML directive

Related articles