JS Question Type Object
The question type object provides callback functions for the various events that happen while a user configures a product.
Create the file [customization_assets_dir]/javascript/custom_questions.js. CB will automatically load this file if present (or a min.js file if present).
A JS Question Type Object (a plain JavaScript object) with a set of functions. and pass it as a parameter the function registerQuestion() of the ConfigBox AMD module configbox/configurator.
Example custom_questions.js
define(['cbj', 'configbox/configurator'], function(cbj, configurator) {
// Custom question type object
var customType = {
// .. set of methods to implement (see below on this page)
}
// Replace Name_of_your_type with your type name
configurator.registerQuestion('Name_of_your_type', customType);
});
In this file you can register any number of question types.
Methods to implement in the JS Question Type Object:
init() - will run on page load and the function needs to initialise any JS-powered content in the question
initEach() - will run on page load AND each time the configurator view gets refreshed via AJAX calls
onSystemSelectionChange(event, questionId, selection) - runs when the system changes a selection (auto-selects, selection removals from rule engine, etc). If the variable selection is null, it means deselection.
onQuestionActivation(event, questionId) - runs when the rule engine activates the question
onQuestionDeactivation(event, questionId) - runs when the rule engine deactivates the question
onAnswerActivation(event, questionId, answerId) - runs when the rule engine activates an answer of the question
onAnswerDeactivation(event, questionId, answerId) - runs when the rule engine deactivates an answer of the question
onValidationChange(event, questionId, validation) - runs when the validation engine alters validation settings for the question (calculation based min/max values)
onValidationMessageShown(event, questionId, message) - runs when the engine instructs to show a validation message for the question
onValidationMessageCleared(event, questionId) - runs when the engine instructs to hide a validation message for the question
Full example
define(['configbox/configurator'], function(configurator) {
var customQuestionType = {
/**
* Will run on page load and the function needs to initialise any JS-powered content in the question
*/
init: function() {
},
/**
* Will run on page load AND each time the configurator view gets refreshed via AJAX calls
*/
initEach: function() {
},
/**
* Runs when the system changes a selection (auto-selects, selection removals from rule engine, etc)
* @param {Event} event
* @param {Number} questionId
* @param {String|NULL} selection - NULL on deselect, the internal selection value for the answer instead
*/
onSystemSelectionChange: function(event, questionId, selection) {
},
/**
* Runs when the rule engine activates the question
* @param {Event} event
* @param {Number} questionId
*/
onQuestionActivation: function(event, questionId) {
},
/**
* Runs when the rule engine deactivates the question
* @param {Event} event
* @param {Number} questionId
*/
onQuestionDeactivation: function(event, questionId) {
},
/**
* Runs when the rule engine activates an answer
* @param {Event} event
* @param {Number} questionId
* @param {Number} answerId
*/
onAnswerActivation: function(event, questionId, answerId) {
},
/**
* Runs when the rule engine deactivates an answer
* @param {Event} event
* @param {Number} questionId
* @param {Number} answerId
*/
onAnswerDeactivation: function(event, questionId, answerId) {
},
/**
* Runs when the validation engine changes validation for a question
* @param {Event} event
* @param {Number} questionId
* @param {Object} validation - plain object with vars minval and maxval
* values of each are either NULL for no validation or a number
*/
onValidationChange: function(event, questionId, validation) {
},
/**
* Runs when the engine instructs to show a validation message
* @param {Event} event
* @param {Number} questionId
* @param {String} message - Plain text message to display
*/
onValidationMessageShown: function(event, questionId, message) {
},
/**
* Runs when the engine instructs to remove a validation message
* @param {Event} event
* @param {Number} questionId
*/
onValidationMessageCleared: function(event, questionId) {
}
}
// Now we register the custom question type to the configurator engine
configurator.registerQuestion('customtype', customQuestionType);
});
Mind that your callback functions are called even if the event is about another question type. Check the question type like this in the beginning of each function:
var customQuestionType = {
onValidationMessageShown: function(event, questionId, message) {
if (cbj('#question-' + questionId).is('.type-customtype') === false) {
return;
}
}
//.. other methods
configurator.registerQuestion('customtype', customQuestionType);
}
Compare with built-in question type JS Objects which are located in [applicaton assets folder]/javascript/questions.js.
AMD modules for development
There is a number of framework functions to support coding question types. See this article for the most useful methods.