Save to Firebase DataSheet after 3 seconds on Button


#1

Hello. I think I need some help with a script to delay the upload of data to my DataSheet after a button is pressed.

The ultimate goal is this.

User presses button, background card color changes. After 3 seconds background card color switches back to a default color. It is important that the firebase data is updated so all users can see the change.

I have everything working except for the DataSheet persisting the default value after the 3 second delay.

I placed a script in the SaveData interaction, though I could easily make it a second Interaction and a separate script if needed. Note: The application uses a document_key that is constant and a column named ‘state’, which varies. The background card uses a state change to track the ‘state’ column data.

Works awesome, except for the delayed effect I am looking to achieve.

Thank you in advance for reading.

 // This function modifies the value saved to the data sheet.
// There is a variable named 'input' that provides the input values:
// it's a JavaScript object with properties that contain all the
// values collected from the UI.

setTimeout(myFunction, 3000)

function myFunction() {
  alert("Change value of state in dataSheet now!");
  //return input;  cannot seem to return input delayed  
}

return input;

#2

Hi,

The interactions are run separately so the first interaction may be running even the second is already finished. On my example the button has two interactions; first one is simple script with delay and second one changes the background rectangle’s fill color. The bg color changes immediately without being blocked by timeout script.

Here’s the example: https://neonto.cloud/preview/l6zxl6dj

In case you want to show the Firestore update always after n milliseconds then it is probably not possible without writing some custom code. The firebase plugin siply listens Firebase collection and updates immediately when there are changes in data (the delay depends on network etc. and is unpredictable).


#3

Thank you so much for responding. The timing of it isn’t too critical, however it is important that it updates into the cloud Firebase data, so that everyone sees the color change back to default.

Thank you for sending me the followup email suggesting I take a look at the CodeGlance button in React Studio to check out how it handles the DataSheet under the hood. I already had a button configured to clear the background back to default setup, so when I looked at CodeGlance I could see how it was being triggered. Then I simply copy and pasted the generated reset code into my timer function and BINGO!

I was working for a couple days on that issue, thank you for guiding me in the right direction!


#4

Great to hear that you got it working. I made this quick demo which showcases the similar functionality:

https://neonto.cloud/u/firebasedelaydemo

If you click anywhere on the list it will first update the status to 1 and then I have custom script with timeout which returns the state back to 0. I suggest to test this with different browser windows so you’ll see that the Firebase plugin is really listening changes and list item state changes when someone clicks on the list item.