Dynamic form generator (JSON Schema)

#1

Hi

I want to know Is it possible to have a way to generate a dynamic form based on JSON Schemas or something else in Aurelia vNext?

For example, react-jsonschema-form in React helps us to create a pluggable UI system.

I like to have this beside Aurelia-Toolbelt vNext. Is it possible?

1 Like
#2

It’s doable now, but the shape is under a refactor, so it would be better to wait for a bit more. For vCurrent, this is dead simple.

1 Like
#3

As a fact, the production apps I am working on for my employer heavily use meta data (json) to drive UI from backend.

Which includes form, validation, action menu, help info. Aurelia is really good at this.

We are planning to do more. As the pages have lots in common due to consistant design language, we felt we can use meta data to drive some common view, like paginated table view with custom columns. This will further reduce front-end code size, and provide more dynamic UI based on our clients data shape.

3 Likes
#4

@bigopon I will

@huochunpeng May I ask you how you do this?
Of course, I’ve postponed all my plans for the vNext, but I’m curious how you do it with vCurrent.

1 Like
#5

Wouldn’t it just be a repeat of the main $.properties.keys()?
Then a few switch cases for the types.
The rest of which would simply be input properties .to-view from UI schema and input values .from-view to formData.

1 Like
#6

@khuongduybui
The main concern for me is integration between the schema and any new UI toolkit.
For example, the above product by React works with Bootstrap.
Is it possible to integrate an unified schema to any component?

1 Like
#7

This might be a bad idea, but I’m throwing it out anyway.

Let’s say I define a set of base classes for etc. with the bindable and behaviors I want.

Then I define a set of, say, bootstrap custom elements that extends these base classes with the appropriate templates.

That way, to “plug in” a different UI system, I simply create a different set of custom elements with their templates.

Then I can decide which set to “require” in my views.

1 Like
#8

Just generic element using repeat.for and various bindings, nothing special.
There is only one feature that standard aurelia libs didn’t offer. I have a special validation tool to make validation descriptive.

2 Likes
#9

This article may be of some help https://www.sitepoint.com/composition-aurelia-report-builder/

2 Likes
#10

I rolled my own custom solution as the teams that integrate need more than basic form controls. It was a fun project with aurelia.

2 Likes
#11

I created a plugin although there are admittedly some design issues that led me to start rewriting it since I know a lot more about aurelia now, the current version is available here https://github.com/jbockle/aurelia-json-schema-form

3 Likes