Advanced Functionality

[AStoker]

So, we're looking into using GrapesJS as a form builder. Out of the box, it looks like it does a great job of setting up static HTML forms, but we have some advanced cases where certain kinds of logic needs to be added to inputs to validate data, as well as dynamically showing or hiding certain elements. Additionally, we need to be able to save form values to a server, so we'd need some kind of logic built into the form inputs change events that allows us to post data.

I'm having a hard time finding much help in using GrapesJS in this way, so I figured I'd just ask. Any recommendations on examples, or if this is even the best library for the job? I know there's a forms plugin that adds a few basic elements, and that's great, but what I need is a bit more advanced and under the hood.

[artf]

Hi @AStoker did you check already how to create custom Components and Components with JS? With custom components, you should be able to create almost everything.

[AStoker]

I looked at that, but it wasn't exactly clear (at least to me). Do I need to define a new component for every bit of custom javascript I want to execute? If I have 10 different inputs that dynamically validate their fields, do I need 10 different custom components? Or if I have a block of text to dynamically show, what about those cases?

[artf]

Well not exactly, you can create a generic validation component and then make use of it for your other custom input components. You can also make use of some external library for validation but you will get, obviously, less control in the editor. So, it all depends on your editor's requirements.