Best practice for saving events/input fields on change (especially rich text input field)

Ask us anything
1

Hi all,

Who has a best practice for a good user experience to (automatically) save event changes of input fields?

What I have tried so far:

  • simple save button: works fine, but is yet another visible button that requires pressing
  • automatically save on changes (with or without debouncing): when directly hooked up to an API call, especially with a rich text input field this causes a glitch/disturbance when typing through the moment of the API call - resulting in a messy experience (where the focus on the field is lost requiring the user to re-select the field to continue typing).
  • pressing enter on a field doens’t work for all input field, such as a rich text.
  • double mouse click works fine on desktop, but not on tablet/mobile.
  • BEST ONE I FOUND SO FAR: automatically save on changes to a variable (object) that is saved in the background via an API-call - detached from the work done by the user. ← this seems by far the smoothes/least noticeable method, but I’m just wondering how to best automate the API-call (is it perhaps a timer that triggers the API after a few seconds of inactivity by the user?)

Any contributions are highly appreciated!

Thanks,
Thijs

2

So it sounds like you know the input elements are directly accessible - so the data is live there which you’ll see change in the logs on every keystroke.

Now if you set a workflow on that element to trigger “on change” you can then action whatever you’d like such as your API save.

Be careful not to save it on literally every change otherwise you’ll overload the server for one!

I would opt to set a “delay” of a few seconds as a second step to the on change event before firing the API call.

image
image317×263 8.91 KB

image
image406×260 8.77 KB

But if you’re looking for absolute realtime changes, you need to step into the world of the fairly new integration of Supabase Realtime which is designed for live chat etc.

image
image294×117 5.83 KB

1 Like
3

@what.gift solution will work there’s also a few other ways you could do this

You can also set a on blur workflow so when someone unfocuses the input it will then trigger the workflow

image
image639×210 2.6 KB

1 Like
4

Hi @Yaj ,

With ‘on blur’ the event value is no longer recognized. So I suppose this means I need two workflows:

  • Workflow 1: record a variable with the initial value ‘on focus’
  • Workflow 2: overwrite that variable ‘on change’
  • Workflow 3: make API-call with data in that variable ‘on blur’

If you have a better suggestion, I’d love to hear it.