JSON Form | Appsmith - SolFind Web Lens

JSON Form | Appsmith

https://docs.appsmith.com/reference/widgets/json-form • 83 KB fetched
Open original page

JSON Form | Appsmith

Ask AI
Search

Ask Appsmith AI Submit message

Examples How do I install Appsmith using Docker? How do I connect to my local PostgreSQL database? How do I pass inputs from a widget to a query? How do I trigger multiple queries conditionally? How do I fix the error: This value does not evaluate to type Array<Object>?

Try Appsmith

* Get Started

* Introduction

* Build Your First App

* Self Hosting

* New Installation Guides

* Manage Installation

* Upgrade Installation Guides

* Concepts

* Connect Data

* Overview

* How-to Guides

* Reference

* Datasources

* Query Settings

* Concepts

* Build Apps

* Overview

* Quickstart

* How-to Guides

* Reference

* Widgets

* Audio

* Audio Recorder

* Button

* Button Group

* Camera

* Card

* Category Slider

* Chart

* Checkbox

* Checkbox Group

* Code Scanner

* Container

* Currency Input

* Custom

* Datepicker

* Divider

* Document Viewer

* Form

* Filepicker

* Icon Button

* Iframe

* Image

* Input

* JSON Form

* List

* Map

* Map Chart

* Menu Button

* Modal

* MultiSelect

* Multi TreeSelect

* Number Slider

* Phone Input

* Progress

* Radio Group

* Range Slider

* Rating

* Rich Text Editor

* Select

* Stats Box

* Switch

* Switch Group

* Tabs

* Table

* Text

* TreeSelect

* Video

* Accessibility

* Theme

* Sample Apps

* Write Code

* Overview

* How-to Guides

* Reference

* Global Objects

* Global Functions

* JS Libraries

* Fetch API

* Data Transformation

* JavaScript Settings

* Concepts

* Best Practices

* Manage Apps and Users

* Authentication

* Granular Access Control

* Versioning with Git

* Setup SCIM Provisioning

* Embed Appsmith

* Migrate Applications

* Audit Logs

* Branding

* External Client Portal

* Packages

* Overview

* Tutorial

* How-to Guides

* Reference

* Package Version Control

* GIT Apps with Packages Best Practices

* Code Packages

* UI Packages

* Workflows

* Overview

* Tutorial

* How-to Guides

* Reference

* Workflow Triggers

* Workflow Queries

* Workflow Functions

* Pass Parameters to Workflows

* Run History

* Troubleshooting

* Overview

* Self-hosting Errors

* Application Errors

* Product

* FAQ

* Security

* Telemetry

* Support at Appsmith

* Privacy Policy

* Release Notes

* Contribute

* Build Apps

* Reference

* Widgets

* JSON Form
On this page
JSON Form

This page provides information on how to use the JSON form widget, which efficiently generates forms from JSON data, eliminating the need for manual form creation.

The submit button on the JSON form is always visible and cannot be disabled or hidden.

Configure JSON Form Widget
Content properties

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

Data

Source Data json

Connects the JSON Form to your datasource or widget, allowing you to add new records or edit existing ones. To bind data to the JSON Form, click on Generate Form and select either a datasource, query, or widget.
If you don't have a query, you can choose your datasource, select the desired table or collection, and specify the identifiable property. Appsmith automatically generates a customized JSON form for your datasource and creates an insert or update query connected to the onSubmit event.

*
Select table/collection: enables the selection of the relevant table or collection type corresponding to the datasource.

*
Form Type: specifies the type of form to be created, with two options:

* Create records

* Edit records

*
Get values from: enables the selection of the Table or List widget from which the form should retrieve its values. You can then view and edit the corresponding data in JSON Form. This option is available when the Form Type is set to Edit Records and is only applicable to Table and List widget.

*
Data Identifier: serves as an attribute for the unique identification of a datasource object. By default, it's set to the primary column of the datasource. This option is available when the Form Type is set to Edit Records.

Edit records
Additionally, you can use JavaScript by clicking on JS to write bindings for the Source Data property. To populate the JSON Form with data, you need to provide the data in a structured JSON format like this:
Expected data structure:
{
"name": "John",
"date_of_birth": "20/02/1990",
"age": 29,
"employee_id": 1001
}

You can display dynamic data by binding the response from a query or a JavaScript function to the Source Data property. For instance, to display a master-detail form when a user selects a row in a Table widget, you can add the below code in the Source Data property:
Example :
{{ tbluserData.selectedRow; }}

You can click on an individual row in the Table and update data in the form fields.
Based on the JSON data provided, the JSON Form automatically identifies the appropriate field type for each value. For example, if the data contains the field age , the form sets the field type to a Number Input . Additionally, you have the flexibility to add or customize field types using the Field Configuration property .

Auto Generate Form boolean

When enabled, the form layout updates automatically when the field types inside the Source Data are changed. With this, the Field Configuration property also gets automatically updated to reflect any changes in the Source Data property.
However, it's important to note that enabling this feature overrides any custom configurations that you are providing through data transformations using JavaScript.

Generate Form string

When the Auto Generate Form property is disabled, this button becomes visible. You can use this button to manually regenerate the form layout. With this, the Field Configuration property also gets updated to reflect any changes in the Source Data property.

Field Configuration list

Contains all the generated form fields. You can rearrange the items and configure them by clicking on the ⚙️ gear icon. Alternatively, the eye icon allows you to hide specific fields.
Clicking the gear icon ⚙︎ enables you to customize each form field extensively. You can select any one of the following options from the Field Type property to update the widget type for that field on the JSON Form:

* Array

* Checkbox

* Currency Input

* Datepicker

* Email Input

* Multiselect

* Multi-line Text Input

* Number Input

* Object

* Password Input

* Phone Number Input

* Radio Group

* Select

* Switch

* Text Input

Each field type offers unique sets of customizable events and configurations. For instance, the Number Input field can have a min and max value, whereas the Select field includes the options property.
Most of the field properties are similar to those found in widget properties. To explore more about these properties, you can refer to the widget reference guide for more information.

Add New Field string

Adds a new field in the form. Fields added this way are known as custom fields and you have the flexibility to delete these fields at a later time. It's important to note that custom fields do not update the Source data property.

General

Title string

Sets the text that appears at the top of the form as a title.

Hidden Fields in Data boolean

Enabling the this option updates the output data to include information from hidden fields in the source data.
For instance, suppose you have a registration form where the Date of Birth field is hidden from users in the UI. When you enable the Hidden Fields in Data option, you can access the Date of Birth field through the formData reference property.

Visible boolean

Controls the visibility of the widget. If you turn off this property, the widget would not be visible in View Mode . Additionally, you can use JavaScript by clicking on JS next to the Visible property to conditionally control the widget's visibility.
For example, if you want to make the widget visible only when the user selects Yes from a Select widget, you can use the following JavaScript expression:
{{ Select1.selectedOptionValue === "Yes" }}

Animate Loading boolean

This property controls whether the widget is displayed with a loading animation. When enabled, the widget shows a skeletal animation during the loading process. Additionally, you can control it through JavaScript by clicking on the JS next to the property.

Disable Invalid Forms boolean

When turned on, the JSON Form widget checks the validation properties, and the Submit button is automatically disabled if there are failing checks.

Show Reset boolean

When the property is enabled, a reset button is added to the form. Clicking this button resets all fields in the form to their default values. This is useful if a user wants to start over with a new entry or if they entered the wrong information and need to clear the form.

Submit Button Label string

Sets the text for the Submit button.

Reset Button Label string

Sets the text for the Reset button.

Height string

This property determines how the widget's height adjusts to changes in its content. There are three available options:

* Fixed : Maintains a constant height for the widget, allowing you to adjust it by dragging or using the resize handle.

* Auto Height : The widget's height adjusts dynamically in response to changes in its content.

* Auto Height with limits : Same as Auto height , with a configurable option to set the minimum and maximum number of rows the widget can occupy.

Events

onSubmit

Sets an action to be executed when the user clicks the Submit button on the form.

Style properties

Style properties allow you to change the look and feel of the widget.

Color

Background Color string

Sets the background color of the widget, specified as a CSS color value . It can also be manipulated programmatically using the JavaScript functions.

Border Color String string

Sets a color for the form's border, specified as a CSS color value . It can also be manipulated programmatically using the JavaScript functions.

Border and shadow

Border Width number

Sets the width of the widget's border. Accepts number values only, in px.

Border radius string

Applies rounded corners to the outer edge of the widget. If JavaScript is enabled, you can specify valid CSS border-radius to adjust the radius of the corners.

Box Shadow string

This property adds a drop shadow effect to the frame of the widget. If JavaScript is enabled, you can specify valid CSS box-shadow values to customize the appearance of the shadow.

Button styles

Button color string

Represents the color of the button, specified as a CSS color value . The background color can also be modified programmatically using JavaScript functions.

Button variant string

Specifies the style type of the button to indicate its significance.
Options:

* Primary : Fills the button with color.

* Secondary : Adds a colored border to the button while keeping the button itself white.

* Tertiary : This option does not apply any specific styling changes to the button.

This property can be dynamically set using JavaScript by providing a string value of PRIMARY , SECONDARY , or TERTIARY .

Border radius string

Applies rounded corners to the outer edge of the widget. If JavaScript is enabled, you can specify valid CSS border-radius to adjust the radius of the corners.

Box Shadow string

This property adds a drop shadow effect to the frame of the widget. If JavaScript is enabled, you can specify valid CSS box-shadow values to customize the appearance of the shadow.

Icon string

Specifies the icon to be displayed on the button. Additionally, you can use JS to dynamically set the icon. You can refer to the documentation of blueprintjs to explore a wide range of available icons.

Position string

This property allows you to configure the Icon 's placement.
Options:

* Left : Aligns the Icon to the left side of the Label.

* Right : Aligns the Icon to the right side of the Label.

Placement string

Determines the spacing between the Icon and the Label .
Options:

* Start

* Center

* Between

Reference properties

Reference properties are properties that are not available in the property pane but can be accessed using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to get the visibility status, you can use JSONForm1.isVisible .

formData object

Contains a JSON object with the field names and their current values in the form.
Example:
{{ JSONForm1.object }}

fieldState object

A JSON object describing the state of each field in the form. State data includes: isDisabled , isRequired , isVisible , and isValid .
Example:
// To access the object:
{{ JSONForm1.fieldState; }}

// To get state for a particular field (e.g., "name"):
{{ JSONForm1.fieldState.name; }}

isValid boolean

Reflects whether the widget's inputs are considered Valid.
Example:
{{ JSONForm1.isValid; }}

sourceData object

Contains a JSON object of the original source data which was bound to the form.
Example:
{{ JSONForm1.sourceData; }}

Methods

Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.

These methods are asynchronous, and you can use the .then() block to ensure execution and sequencing of subsequent lines of code in Appsmith.

setVisibility( :boolean )

Sets the visibility of the widget.
Example :
JSONForm1 . setVisibility ( true ) ;

setSourceData( :object )

Sets the data to be displayed in the widget.
Example :
JSONForm1 . setSourceData ( < data > )

JSON Form | Appsmith

Links found on this page