Advice for a form heavy web app

I have a internal ERP app currently made in Zoho Creator that also communicates with a python desktop app(for project management) that I am also eliminating. It is very form heavy, about 80 tables with a lot of table reference relationships.

I was able to finish the API in xano easily, and build a couple of forms in weweb. Kinda tedious to do required inputs, success, error, and other items. It works tho. Should I setup a template?

I considered typeform, but since I will have drop downs for table refs that seems hard, and also it would prevent me from using a form for both create and update. Not sure if its doable with dynamic drop downs too

What tips for a form heavy app would you give to me create these forms simply?

Hey,

It really depends on what takes time while building your app.

If it’s the UI part, I’d recommend creating your own design system first and then reusing your ready-made inputs indeed.

Otherwise, you could try to create your own VueJS component that takes a config file (like a JSON schema) and scaffolds the form for you, then expose it in the editor to make visual changes to it.

If it’s the API part, you could use Xano add-ons to limit the number of roundtrips to the backend and have some joint tables already available in API calls.

EDIT: you could have a look at libraries like this one to help for your Vue component: GitHub - jarvelov/vue-form-json-schema: Create forms using JSON schema. Bring your components!

My only advice is, wait for the reusable components, I mean, it really depends on your usecase, and skills, as @Quentin mentioned some Custom Component options as well.

I’ve done a fair share of form heavy stuff too, but it’s not very sustainable in the nocode way, I have used some tricks to avoid repetition as much as possible, but yeah, unless there is true reusable components (coming I think at the end of the year), I think that anything else, is gonna be a little complicated (if you want to change it all at once, in one place).

What I did, was, I created one div, with all the fields inside (e.g text, count, select), and then, with huge JSONs, I displayed conditionally each type, but again, this lets you make it sustainable only “locally” a.k.a within the scope of the JSON bound loop, I’m eagerly expecting the update of components, hoping this it be a gamechanger for bigger projects.

An example of the JSON, so you have an idea. I also handled custom Error states, based on regex, so there is also texts and patterns for that.