Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • denis ushakov 11 posts 144 karma points
    Mar 14, 2019 @ 23:17
    denis ushakov
    0

    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.

  • Nicholas Westby 2054 posts 7103 karma points c-trib
    Mar 15, 2019 @ 02:42
    Nicholas Westby
    100

    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:

    // 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
    });
    

    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

  • denis ushakov 11 posts 144 karma points
    Mar 26, 2019 @ 13:58
    denis ushakov
    0

    This helped me out! Thank you

Please Sign in or register to post replies

Write your reply to:

Draft