gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

Adding custom elements inside the form #593

Open punto- opened 6 years ago

punto- commented 6 years ago

Hi.

What is the best way to add custom elements inside a form? I need to add a button to a part of my form, I haven't seen the "button" element in the documentation. I also need to add a QR code, using a library (http://jeromeetienne.github.io/jquery-qrcode/) which takes a div element as a parameter and creates the image inside it. If I create a section of the form using "type": "object" on the schema, is it possible to obtain the div where it's contained?

Thanks

WhileTrueEndWhile commented 6 years ago

You could use a configuration like this:

{
    "schema": {
        "type": "object",
        "properties": {
            "customFieldInstance": {
                "type": "string"
            }
        }
    },
    "options": {
        "view": {
            "fields": {
                "/customFieldInstance": {
                    "templates": {
                        "control": "<b>Loading...</b>"
                    }
                }
            }
        }
    },
    "postRender": function (topControl) {
        const customFieldInstance = topControl.childrenByPropertyId.customFieldInstance;
        const htmlElement = customFieldInstance.domEl;
        const value = customFieldInstance.getValue();
        // console.log(htmlElement, value)
        // $(htmlElement).text(value);
        // $(htmlElement).qrcode(value);
    },
    "data": {
        "customFieldInstance": "aabbccddeeff"
    }
}