How to create custom input field for Responsive Plain JavaScript Template?
On your site I found tutorial for creating custom input fields for Responsive Angular Template but there seems to be no documentation on how to do so for Plain JavaScript.
Could you provide one? Point me to one?
Example:
I am trying to create an autocomplete address field using google api.
I want to be able to pick it as one of the field types so it can be included in multiple forms and easily added removed by user.
I don't need many settings associated with that field. What i tried doing is copying code for "plain-text" field and modifying it throughout formulate but that went unsuccessful. I feel like i was missing a step somewhere.
The backend portions are identical, including the back office AngularJS.
You'll want to ignore the frontend AngularJS though. Instead, you'll use plain JavaScript. Here's a basic shell of what you'd need to do:
// Dependencies.
let ValidationUtil = require("/App_Plugins/formulate/templates/responsive.plain-javascript/utils/validation");
// Ensure fields have been initialized.
let key = "formulate-plain-js-fields";
window[key] = window[key] || [];
/**
* Renders the field.
* @param fieldData The field data that should be used to render the field.
* @param fieldValidators The associative array of the field validating functions.
* @param cssClasses The CSS classes to attach to the element.
* @param extraOptions Additional options that are less commonly used.
* @constructor
*/
function RenderAutoComplete(fieldData, fieldValidators, cssClasses, extraOptions) {
//TODO: ...
}
/**
* Returns the DOM element for the field.
* @returns {Element} The DOM element.
*/
RenderAutoComplete.prototype.getElement = function () {
return this.element;
};
/**
* Adds the data for this field on the specified FormData instance.
* @param data {FormData | any} The FormData instance or associative array.
* @param options {{rawDataByAlias: boolean}} Optional. The options for setting the data.
*/
RenderAutoComplete.prototype.setData = function (data, options) {
//TODO: ...
};
/**
* Checks the validity of the value in this field (adding inline validation messages if necessary).
* @returns {Promise[]} An array of promises that resolve to validation results.
*/
RenderAutoComplete.prototype.checkValidity = function () {
//TODO: ...
};
// Add this field type to the window object so Formulate will pick it up.
window[key].push({
key: "AutoCompleteField",
renderer: RenderAutoComplete
});
How to create custom input field for Responsive Plain JavaScript Template?
On your site I found tutorial for creating custom input fields for Responsive Angular Template but there seems to be no documentation on how to do so for Plain JavaScript.
Could you provide one? Point me to one?
Example:
I am trying to create an autocomplete address field using google api.
I want to be able to pick it as one of the field types so it can be included in multiple forms and easily added removed by user.
I don't need many settings associated with that field. What i tried doing is copying code for "plain-text" field and modifying it throughout formulate but that went unsuccessful. I feel like i was missing a step somewhere.
I'll need to put some better documentation together, but most of this applies: http://www.formulate.rocks/articles/custom-field-types
The backend portions are identical, including the back office AngularJS.
You'll want to ignore the frontend AngularJS though. Instead, you'll use plain JavaScript. Here's a basic shell of what you'd need to do:
Depends on if you have a JavaScript build step. If not, you'll need to extract some of the utility functions. You can find the ones for validation here: https://github.com/rhythmagency/formulate/blob/4d264e92d0ee8f20506c20f117498ea2853aaa74/src/formulate.frontend/responsive.plain-javascript/utils/validation.js
This helped me out! Thank you
is working on a reply...