| description |
|---|
Widgets are the UI building blocks of Appsmith. Widgets empower you to visualise, capture and organise data with simple configuration and zero HTML/CSS. |
This document presumes you understand the basics of Displaying Data & Capturing Data and expands on the concept of building dynamic UI that reacts to user inputs and system data
{% embed url="https://youtu.be/vlx8TEuep5I" %}
Every property of a widget can be described dynamically using javascript inside handlebars {{}} . The properties which do not have an input to write javascript can be made dynamic by clicking the JS button next to them. This transforms the property into an input field that can be used to write code.
Let us take an example of a table displaying a list of products. When a user selects a product in the table, we may want to update the product information in a form so that the user can update the product.
In order to achieve this, we can populate the default values of each of the Form's widgets with the corresponding value selected in the table. We can reference the Tables selectedRow property using its name inside the {{ }}
Get Product Name Input (Default Text property)
{{ Table1.selectedRow.productName }}Get MRP Input (Default Text property)
{{ Table1.selectedRow.mrp }}Get Category Dropdown (Default Option property)
{{ Table1.selectedRow.category }}Here Table1 is the name of the widget
