{% extends "../../layout.twig" %} {% set page_title = 'Events' %} {% set page_slug = '/events/' %} {% block page %}

{{page_title}}

You can pass in a cf.EventDispatcher instance to listen for events of your Conversational Form instance.

var dispatcher = new cf.EventDispatcher();
dispatcher.addEventListener(cf.FlowEvents.FLOW_UPDATE, function(event){
	// your code here
}, false);
var cf = new cf.ConversationalForm({
	formEl: document.getElementById("my-form"),
	eventDispatcher: dispatcher
});

All events are CustomEvents, expect the detail object to contain data.

cf.EventDispatcher() implements the EventTarget interface

List of events

Event name Description
cf.TagEvents.ORIGINAL_ELEMENT_CHANGED Original tag (dom element) has changed value. 
event.detail: {
	value: String,
	tag: cf.ITag
}
cf.FlowEvents.USER_INPUT_UPDATE When ever the UserInput element changes value. 
event.detail: cf.FlowDTO
cf.FlowEvents.USER_INPUT_INVALID When an error has been registered. 
event.detail: cf.FlowDTO
cf.FlowEvents.FLOW_UPDATE When ever the flow of Conversational Form is updated. 
event.detail: {
	tag: this.currentTag,
	ignoreExistingTag: this.ignoreExistingTags
}
ChatListEvents.CHATLIST_UPDATED When the chatlist has been updated. 
event.detail: cf.ChatList
cf.ChatResponseEvents.USER_ANSWER_CLICKED When user clicks a previous answer. 
event.detail: cf.ITag
cf.ControlElementEvents.ON_LOADED When an control element is loaded, like when an control element contains an image.
cf.ControlElementEvents.ON_FOCUS When focus on an control element. 
event.detail: cf.ControlElementVector
cf.ControlElementEvents.SUBMIT_VALUE When control value has changed, ex. clicking a check-box, radio-button etc. 
event.detail: cf.ControlElement || 
cf.OptionButton
cf.UserInputEvents.CONTROL_ELEMENTS_ADDED When a control element has been added. 
event.detail: cf.ControlElementsDTO
cf.OptionButtonEvents.CLICK Option element click, normally you would use cf.ControlElementEvents.SUBMIT_VALUE. 
event.detail: cf.OptionButton
cf.ControlElementEvents.PROGRESS_CHANGE Upload a file, get progress event. 
event.detail: 
cf.ControlElementProgressStates.BUSY || 
cf.ControlElementProgressStates.READY || 
cf.ControlElementProgressStates.READY
cf.UserInputEvents.HEIGHT_CHANGE When height of input field change. 
detail: number 
//this.inputElement.scrollHeight
cf.UserInputEvents.KEY_CHANGE 
event.detail: {
	dto: cf.FlowDTO
	keyCode: Number
	inputFieldActive: Boolean
}
cf.UserInputEvents.SUBMIT On user submits value. 
event.detail: cf.FlowDTO
cf.UserInputEvents.FOCUS On user input field Focus.
cf.UserInputEvents.BLUR On user input field Blur (focus removed).
cf.MicrophoneBridgeEvent.TERMNIAL_ERROR When Microphone interface terminates.
cf.ControlElementsEvents.CHANGED When control elements changed, added or removed elements.
cf.ControlElementsEvents.ON_RESIZE When control elements resizes.
{% endblock %} {% block toc %} {# #} {% endblock %}