Immediate client side response before updating database, how?

Need help App Organization
1

Hi folks!

First of all a big thanks to all for helping me out on my way to building my first web app.

I’m creating a producthunt/reddit style upvoting functionality for repeating groups. Right now, when a user clicks, a workflow starts to make changes in the database. This causes a delay between clicking and seeing the number of votes change by one.

I’ve tried to find a way to make the app response immediate e.g. change the number at once, and only after that make changes in the database. However, I haven’t found the right solution yet.

How would you make this happen?

Thanks,
Olli

2

Have you looked at an autobind on the field ?

1 Like
3

Thanks for the quick reply Nigel!

Autobinding works with input fields right? I’m trying to change data by clicking a vote button where the number of upvotes shows in the button (e.g. http://www.producthunt.com).

I don’t see how I could apply autobinding here, but I’ve never used it before. How would that work?

4

Ah, ok. You are right, I was thinking you just wanted a boolean like/not liked.

Vote count is trickier, as it does take time to update and also for the count to ripple through.

You could maybe hide the count for a few seconds when they hit the button ?

Alternatively you could drive it off a custom state that updates periodically, and update that manually on button click.

5

Hiding the count - yes possible although not exactly ideal.

That custom state idea is interesting. Do you mean that the element would have a custom state upvoteCount that would would update to upvoteCount+/-1 on click?

How can I get the initial value from the database to the custom state then?

6

You could run a process on page load and then every x seconds … that refreshes the counts.

Update in situ on click ?

7

I’ll try that. I’ll make an update once I get something to work =)

I also found this. Which stops the automatic sorting of repeating group. Very helpful for this functionality. [Solved] Stop Repeating Group from Automatically Updating

8

Hi Nigel!

Your advice on custom states worked. This is what I did:

  • I downloaded the repeating group data source to a custom element (to disable automatic sorting of the repeating group once the vote count changes)
  • I populated the button with the vote count related to the data type
  • I created 3 custom states:
  1. upvotecount // to store current upvote count
  2. upvotecount+1 // to store the upvote count after upvoting
  3. vote status [with options ‘button not clicked’, ‘upvoted’, ‘upvote removed’]
  • I set up the following 3 workflows
  1. When the user clicks the button and button’s state is ‘button not clicked’ (i.e. if clicked for the first time), set upvotecount+1=parent group’s number+1 AND set upvotecount=parent group’s number // These are used to store both values in the client side
  2. When the user clicks the button and button’s state is ‘upvoted’, change upvoted to upvote removed
  3. When user clicks the button and button’s state is ‘upvote removed’ change ‘upvoted voted’

All three workflows also trigger API workflows that modify data in the database.

When the ‘vote status’ changes, the text displayed in the button changes to
‘upvotecount+1’ or ‘upvotecount’ using conditions.

What all this does in practice:

  • I get up-to-date values from the database for the first time
  • When the vote count changes by this user or other users, the repeating group does not get resorted or updated, which is ok for my use case.
  • When the user votes for the first time, the values (votecount+1 & votecount) get stored to custom states.
  • For the subsequent clicks, the value shown is drawn from the custom state, not from the database

The result: the vote count changes immediately & updates in the database are done later using API workflows.

1 Like