Form Builder Example

I’ve built a Form Builder to automate creation and validation of forms for CRUD operation.

Link to app: Anvil | Login

Structure:

  1. schemas: using Zod library validation (thanks, @stucork), create a data validation model
  2. form_config: create a form configuration to tell how’s the form look and feel. It’s a list with the rows of the form. If a row have more than one field, put these fields inside another list.

form_config example:

    [
        {"key": "name", "type": "text", "label": "Name"},
        {"key": "document", "type": "text", "label": "Document", "mask": "00.000.000/0000-00"},
    ],
    [
        {"key": "brands", "type": "text_list", "label": "Brands"},
        {"key": "tags", "type": "text_list", "label": "Tags"},
    ],
    [
        {
            "key": "areas",
            "type": "multi_select",
            "label": "Areas",
            "options": ["CLOTHES", "SHOES", "APPARELS"],
            "tooltip": "Which areas this supplier operates in",
        },
        {"key": "notes", "type": "text_area", "label": "Observações"},
    ],
...

Each entry of form_config can have attributes like:

  • key: the name of column that will be stored. Uou can have nested schemas. To reference it in then form_config, use “key” with dot notation (eg: other_info.notes)
  • type: html inputs (text, email, tel) and other like text_area, checkbox, text_list (ChipsInput), select (DropDown), multiselect (MultiSelectDropDown)
  • label
  • tooltip
  • option: for select and multiselect
  • mask: this attribute uses IMask to format inputs

The form_builder can generate a form like this:

I think it’s useful for data heavy applications involving a lot of CRUD.

The next step is to package this to make it available in a more standard way.

8 Likes

One question: How can I implement a RepeatingPanel generator to allow form list (for contacts in this example)? I’ve tried but got very tricky…

For Zod, z.list() solves the problem. But didn’t managed generate components and manage the change events.

Hi,
Sounds great!
Is it a requisite to have a paid account to make it work?
I ask because when I try to run it it displays an error:

Permission denied when loading app dependency

Thank you!

HI movelabs,

would love to try it, can you please fix the dependency:
grafik

1 Like

Got the same problem. Waiting for a solution.

It’s Anvil Extras dependency. I don’t know why when cloning the app the dependency id is changed.

Remove this dep and add it again: C6ZZPAPN4YYF5NVJ

It’s Anvil Extras dependency. I don’t know why cloning the app the dependency id is changed.

Whoops! That was a bug, sorry – now fixed! :slight_smile:
Cloning this app now refers to the correct third-party dependency.

2 Likes

Hi @movelabs,
I’ve been playing for a while with your app, and it’s really a beautiful piece of code!

Now, how would you suggest to procede in order to use it in an application?

It is fair to tell that I’m very new to programming and to Anvil too, and so your word on this would be very helpful to find the easiest/neatest path to do it.
It’s been really difficult for me (and probably for others like me) to follow all the code, identifying clearly what are the core components, and what is just part of the example itself, and the coupling between them, if any.
(because there are also other complexities to take into consideration, like the routing, and its interdependence with the Form building)

To try to clarify my question:
So far I’ve identifed:

  • The utils package that seems to hold the logic for the Form building using
    • the form_builder package that contains the FormInput component
    • the nested_dict component

But there is also:

  • the form_configs and
  • the form_schemas
    that define the fields for the form and validation, and are specific for the form you want to build; so probably these interact with the previous to achieve the goal

Also I’ve seen that the example Form, “EditForm”, has a lot of code that interacts with the aforementioned components, and I can’t tell for sure what parts of the code are core to the functionallity and must be present in any Form I want to build using your Builder, and what are just part of this particular example, and might not be neccessary to include in my Form.

My apologies if the question is too basic, but as I said, it is a lot of code you have put in here, and with a good level of complexity; and due to my lack of experience in the field I find it difficult to follow.
I hope that my attempt to explain the situation was clear enough, given the fact that there are things that are beyond my current knowledge.

Your guidance will be much appreciated!!!
Thank you!!

Hey there @rfernandez2007!

I am also new to Anvil and I am not a full time developer. This was my first to solve a problem that I have with heavy CRUD applications and I am pretty sure with more experience I could do better.

But I’m glad you liked it. I’ll try ASAP to analyze the issues and help you.

Hey @movelabs !!
Thank you very much for you response!

Well, you might be new to Anvil, but your are not new to programming for sure!!
You’ve done quite well!!
Of course I liked it, and I also see a lot of potential growth in it.
I will be eagerly waiting for news from you!! (because now I’ve reached to a point in which I’m a bit afraid to use it out of the example context, without messing with the code in ways that cause unnecesary problems which I’ll probably be unable to spot)

Just to mention one thing that came to my mind almost instantly, and of which maybe you might like to take note for the future). For things like contact information that involve many similar items inside the main form, it will be supreme if that turns into a master/detail Form, with two underlying tables so you get total freedom and avoid having to define fields for each contact in the master table, and instead you generate records in, lets say, the Contacts table for example.

Best regards!!

1 Like

Hi @movelabs!
I hope you are doing well!!
One quick question …
I saw that you commented the radio button part.
Did you find any problem with the implementation?

    # elif self.type == "radio":
    #   for option in self.options:
    #     self.input = RadioButton(role="form-input", group_name=self.key, text=self.options)
    #     self.input.add_event_handler("clicked", self.validate)

Hi @rfernandez2007 !

Sorry, these days have been very busy around here.

Yes, I’ve found some trouble with radio button implementation and also child forms (like 1-supplier n-contacts).

Hi @movelabs
Ahh, I know … it happens :slight_smile: , don´t worry.
Ok. If you manage to fix it let me know.
I’ve been trying to add support for images, but I’m stuck at what I believe is the final step, in a point that exceeds my knowledge. You know, something that should work, but it does not, and I don’t know why or how to trace it.
I already posted a question in the forum.
If you would like to see the code just let me know.
Thank you!