Category: UI Widgets
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Is there an alt for component control( from retool)?

Issue

I want to change the value of a Datepicker widget using a button's event handle function on Appsmith. Currently, I can only do it by using the storeValue function and binding it to the Datepicker widget. I suggest adding a feature to programmatically set meta properties on widgets to make it easier.

Resolution

The solution discussed involves changing the value of a widget (in this case, a Datepicker) within the event handler function of another widget (in this case, a button). This can be achieved using Appsmith's JS bindings.

To do this, we can use the storeValue function to assign the value in the click event of the button and then bind the value of the store in the Datepicker widget. The storeValue function is used to store data that can be used across different widgets and functions.

Here's an example of how to achieve this:



  1. Create a store to hold the value of the Datepicker widget:



  {
    "name": "selectedDate",
    "type": "STRING",
    "initialValue": ""
  }



  1. Add a button widget with an event handler function to update the value of the selectedDate store:



  const today = new Date().toISOString().slice(0, 10);
  storeValue("selectedDate", today);



  1. Bind the value of the selectedDate store to the Datepicker widget:



  {
    "widgetName": "DatePicker1",
    "text": "{{selectedDate}}"
  }

With this setup, clicking on the button will update the value of the selectedDate store, which in turn will update the value of the Datepicker widget.