While I appreciate the fact I can build a form using JSON, I find the syntax to be rather unlogical and cumbersome. For one, I think having three different ways to style or markup the form is quite annoying. I would strongly advocate for a more centralized approach, like:
I realize you're probably not going to replace the current external library that you've used, but I wanted to emphasize this anyway, hoping you will consider building this thing from the ground up instead - it will make all of our lives a lot easier, is my estimation.
Anyway, I can get around this syntax by applying a bunch of JS mappers, which is not ideal, but it'll have to do. But now I want to control the UI, specifically align the label to the left. More concretely, I was hoping to find the exact same properties for fields that I can find in the UI. However, 1) there is no autosuggest for these properties and 2) your own documentation falls short in providing these properties: The JSON Schema Form component for Retool Apps | Retool Docs
I would really like to know how I can align the label to the left. I also want to be able to control the width. I know, it's a lot, but this is simply my expectation.
I genuinely hope you'll consider improving this aspect - building fields manually is not an option for me. Also, adding more and more components downgrades my app's performace a lot, so I was really hoping to be able to use the JSON Form.
Ideally, I would be able to first build a form exactly how I would like using the UI and then, with the press of a button, turn those components into JSON data, essentially converting forms into JSON and vice versa.
That would allow this component to really shine and become way more robust, rather than having to rely on some React library and having to force a one-way compatibility.
Great post, I agree, we should make it easier to style forms that are being generated from JSON.
What are the three current ways you mentioned? I can think of custom CSS, using the component's inspector (UI Schema input) and another option?
I can definitely put in a feature request for this, we would likely need to build this in-house as opposed to using a library under the hood so this might take some time but would definitely be worth it.
To your point on trying to "find the exact same properties for fields that I can find in the UI", I am a little confused. Could you give me an example of these properties?
Also, are the input labels of your form not aligned left by default?
The width of the input should also be the full width of the form component by default, are you looking to make the input more narrow and less wide?
If you could share a screen shot I can try to help find a work around while the engineering team works on these feature requests.
I do love the idea for building the form exactly how you want using the UI in the app builder and then convert this into JSON schema that you can use to set up a database.
Thanks for your thoughtful response! I hope the team will review this feature request, as I believe it would make things a lot more DRY. I tend to rely heavily on variables and configurations to define things, simply because typing is faster than clicking and dragging. That’s essentially the motivation behind this suggestion.
What I meant by "three ways to construct the form" is that there are three distinct code blocks used to define the form: JSON Schema, UI Schema, and Default Form Data. I believe these could be merged into a single schema/config to keep things more centralized and better aligned.
Regarding "finding the exact same properties for fields as in the UI," my point was that any field property available in the default UI—such as "disabled," "width," or other attributes—should seamlessly integrate into the JSON Schema Form's list of options. This way, they match up directly, rather than requiring additional specifications like "ui:emptyvalue," which feels inconsistent.
Another example is "aligning labels to the left," which, as far as I could tell, isn’t easily replicated. I was referring to positioning labels to the left of the input box, making them inline rather than stacked on top of each other.
Unfortunately, I can’t share a screenshot, as I’m not using this method at the moment due to these incompatibilities.
In conclusion, building this feature from the ground up would ensure better consistency with the UI-native way of constructing forms. While it’s likely a significant undertaking, it would help users define their forms in a more structured and programmatic way.