Binding API data and appsmith.store to an input widget

Hello,

I need to display data from an API get call to an input field and I want to edit this input field by clicking on a button, a modal opens and there I have something like a num pad und I can click different numbers, click OK and then I want to overwrite the input field with that number and in the next step I pass this through a post request to the database.

How can i display this on the input widget?

{{api.data.number
appsmith.store.number
}}

This may not be the right way of doing it, but when calling the API, I’d have it store the number.

So if your api query is api, the script running it would be something like

queryApi: async () => {
await api.run()
await storeValue(“number”,api.data.number)
}

Then the input text of that field would be
{{appsmith.store.number}}

Hope that helps!

@isa.grafit if you store the new number to Appsmith store when clicking the OK button, you can use {{appsmith.store.number || api.data.number}} in the Default Value of the Input widget.
Let me know if this works for you.

Hello @Amelia, thanks for your answer.

storing does work with your solution, but the input field doesn’t update.

That’s what I’m doing:

storeValue on OK Button

closing Modal is working but open the other Modal not.

What I’m doing wrong here?

Thanks!

Isa

Can you share a loom.com screen recording of this workflow and issue?

@Amelia modal stuff works but not the data binding. it only works if I’m use appsmith store or api.data… your code snippet does not work. do you have any other idea?

thanks!

Hi @isa.grafit , Can you try awaiting on storeValue(“inputPlaquesCount” …) in the onClick function.