JSON Schema Form
Last updated
Was this helpful?
Last updated
Was this helpful?
In Lowcoder, the JSON Schema Form component enables developers to generate dynamic, data-driven forms by leveraging JSON Schema definitions. This approach streamlines form creation and ensures consistency across applications.
Key Features:
Dynamic Form Generation: By inputting a JSON Schema, the component automatically constructs the corresponding form fields, reducing manual coding and potential errors.
UI Schema Customisation: Beyond the structural definition provided by the JSON Schema, a UI Schema allows for detailed customisation of the form's presentation, including layout adjustments and widget selections.
Data Binding: The form's data can be seamlessly bound to other components or queries within Lowcoder, facilitating real-time data interactions and updates.
Validation: Built-in validation mechanisms ensure that user inputs adhere to the constraints defined in the JSON Schema, providing immediate feedback and enhancing data integrity.
Event Handling: The component supports event handlers, such as 'Submit', enabling developers to define specific actions triggered by user interactions, enhancing the form's interactivity and functionality.
Styling and Theming: Developers can apply custom styles and themes to the form, ensuring visual consistency with the overall application design.
We have created a sample App for you to review.
On Component Playground, you can interact with the JSON Schema Form component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the component.
In the Auto-Docs of JSON Schema Form component, we have shown how to use different properties of the component. It also includes the Styling properties of the component.
These properties are accessible in {{ }} notations, as well as in JavaScript Queries.
data
Object
The JSON data of the Form component i.e, the components present inside the Form component.
hidden
Boolean
Returns True or False based on whether the Form component is hidden or not
Events give you the ability to trigger further actions (with Event-Handlers).
Submit
When a User "submits" a form
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
setData
Set the data of the property Data
clear
Clear the data of the property Data
reset
ReSet the data of the property Data