Building Dynamic UI

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

Dynamic Properties

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.

Updating Widget Data

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.

Click to expand

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

Click to expand