Best Approach for Rich Text Autosave in WeWeb + Xano

Ask us anything How do I?
1

Hello,
What is the best approach to implement an autosave feature for a Rich Text field between WeWeb and Xano?

Thanks in advance,

2

@Farouk ,

hey, not sure if it suits your goal, but Iā€™d set debounce on rich text element and create a ā€œonChangeā€ workflow that makes post/patch/put api-call to xano for data saving.

3

Hi @Farouk,

Iā€™m not sure if this is what you mean with an ā€˜autosaveā€™ feature, but this method doesnā€™t require the user to press a save button:

In my experience, the ā€˜on changeā€™ workflow with debounce interrupts the typing - resulting in a bad user experience. Fast users/typers want a short debounce time, but then there are the 2 finger typers that take ages to type and the debounce will have placed the cursor somewhere else so it messes up their flow. After endless trial and error, I found the best to do is this:

First, to keep things bundled: make the rich text element into a component and add two variables in that component:

  • ValueChanged (boolean)
  • NewValue

Then add three workflows:

  1. On click: passthrough check that ā€˜ValueChangedā€™ is false, then record the initial value to NewValue.
  2. On change: record changes (set debounce off)
  3. On blur: passthough check that ā€˜ValuedChangedā€™ is true, then make API call to record the change. Plus, set ā€˜ValueChangedā€™ back to false.

Another benefit of this method is that you can log changes in the backend that actually make some sense (otherwise you will have many records with just a couple of words changed each time when relying on the debounce).

And if you want to get fancy, then add another variable: ValueSaved (boolean) and add to the last workflow that this is true after successful recording and then set it back to false after a 1 second delay or so. This you can use to give a green glow or whatever as a nice user experience.