add custom script

[androidealp]

Very cool tool!

I intend to use it as a wireframe.

I would like to know if it is possible to add a field for a custom script?

this for all fields globally or for the page.

Type event on the button for a corresponding action.

If not, what is the best way to add this feature?

[givanz]

Hi

Thank you.

You can add inputs globally for all components by including them in the _base component that is extended by most components https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-common.js#L100

For example to edit the event for click you can use something like

Vvveb.Components.add("_base", {
    name: "Element",
    properties: [{
        key: "element_header",
        inputtype: SectionInput,
        name:false,
        sort:base_sort++,
        data: {header:"General"},
    }, {
        name: "Id",
        key: "id",
        htmlAttr: "id",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Class",
        key: "class",
        htmlAttr: "class",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Click Event",
        key: "clickevent",
        htmlAttr: "onclick",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }
   ]
});  

---

If you want to use a predefined list of javascript functions that can be selected for events then you can use a select input like this:

Vvveb.Components.add("_base", {
    name: "Element",
    properties: [{
        key: "element_header",
        inputtype: SectionInput,
        name:false,
        sort:base_sort++,
        data: {header:"General"},
    }, {
        name: "Id",
        key: "id",
        htmlAttr: "id",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Class",
        key: "class",
        htmlAttr: "class",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Click Event",
        key: "clickevent",
        htmlAttr: "onclick",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: SelectInput,
        data:{
    options: [{
                value: "myfunction()",
                text: "My function"
            }, {
                value: "alert('Message')",
                text: "Display message"
            }, {
                value: "anotherFunction()",
                text: "Another Function"
            }]
       },
    }
   ]
});