Can I create input fields for both displaying and updating data in them? 🧐

What’s up guys?

I’d like my input fields to serve as both display field and input field. I’ve seen many websites doing that.
Right now I’m cheating by using the placeholder value for displaying data and the value binding field for updating data, but that’s no best practice.
Any better suggestion from the masters of AG?

Don’t know if this helps, but I created a single form, and I just create a page variable for the record ID. If I click on an existing record, I set the ID and this tells me I am editing the record (or perhaps deleting). Otherwise, I know I am adding a record.

Maybe you can explain the exact interaction?

You can display the record in the input fields, and if any changes are made or if the user presses Save, this can save the data.

1 Like

Thanks Daniel,
I guess I’m too new to understand how to implement it but I see where you are coming from.

This is my working “cheat” setup where I use the placeholder area to retrieve the data from the resource and i use Value to make updates to the data:

I use a simple SET_KEY to make the update upon hitting the button:

Now trying to implement your solution (first input field):

This is where I’m lost:

When I hit the button, how to I fetch the updated data in the input field which is bound to a GET data variable? How do I make the switch between this var and some var that will hold the data to be updated in the resource?

I think I’ve made some progress.
The value of the input field is bound to a pageVars whose schema is the same as that of the data variable that retrieves data from the resource.
On page focus, I set the page variable to the values of data.getProvider:

But the pageVars is empty so my input field shows no data.
I know I’m close to the solution… :stuck_out_tongue: Not sure yet what I’m missing.

Hi,

Your latest approach is almost correct - what’s happening is that the page focus event happens and the values are bound before the data is fetched. The solution is to set this logic in the variables tab, editing the logic of the single-type data variable (or whichever you’re using). Populate your page variable after the get record flow and it should work. Do note that you’ll have to disconnect the loop that refreshes the data every 5 seconds or your input fields will constantly reset back. In this case, you’ll have to set up some custom event to refresh the data when you update the record.

Alternatively, you can make a true/false page variable, let’s call it “updateData”, and use an IF flow function after the get record flow to check if said variable is true. If it is, update your local data, and make the updateData variable false. Then, you can set up the update button to make the updateData variable true, allowing the data to refresh again.

Hopefully that was understandable. Let me know if it worked out for you!

1 Like

Indeed, I’ve figured that out last night and addressed it simply with a 500ms delay between page focus and the set pageVar.

Now my struggle is that I can no longer update the data.
It used to work well when the input field value was bound to the data var that updates the resource with SET_KEY(data.getProvider, "corpName", data.updProvider.corpName) in the update record function.

Now the field value is bound to the pageVars that “fetches” data from data var.
On tap, I set the “update” data var to the input value of pageVars:


Then I update the record like before with SET_KEY(data.getProvider, "corpName", data.updProvider.corpName) but nothing happens.

Using just a delay can be a bit wonky- if the connection is poor, fetching the data might take longer than 500ms, which is why I recommend setting the variable after the get data flow is complete.

To help you with the updating issue, I’d need some additional info: After updating the record, do you use the get record flow to get the latest update? Or does your database return the updated item after an update? By “nothing happens”, does the update record fail (go into the second output) or just not do anything? Does your app has write permissions to the database? Is there a reason you can’t use the SET_KEY formula anymore? i.e. SET_KEY(data.getProvider, "corpName", pageVars.updProvider.corpName)

Good point, I’ll fix that then.

I don’t get the latest record, no need because the last typed in update in the field remains displayed there in the field after save. I want it to be updated in the database.
No fail, just the button click does nothing. Write/Read permissions same as before, all open.
What if I set the data var after the input field component onChange event?

Try looking at the debugger / using the debug log flow function to see what’s going on in button tap logic flow and the page/data variable.

I would not recommend using the onChange event for this. It would make the logic very messy.

Thanks for your intervention.
Debug did not provide any message because it was something else which I fixed. I had an onBlur event that hides the button when input field no longer focused.

I’ll share a little tutorial about this two-way input field feature for all newbies like me.

99% done!
There’s one bit I’m missing, the page crashes (blank and freezes).

The page might be crashing due to either the “false until data=true” being setup incorrectly (i.e. it never gets set to true) or because the logic in this loop is being executed constantly with no delays. You can also try attaching this logic directly to the data variable logic canvas instead of the page focused event.

I went for this solution, because I do not see where the BOOLEAN and/or the IF setups could be wrong. Thanks so much!
Are you now the person in charge of assisting the community here?