Ken
Ken8mo ago

Creating button eventListeners

Hie guys. I have an app with three button components and a text box. Each of these buttons is returning a result. I am trying to output the result of the respective button pressed in the textbox. I have seen the documentation suggesting using an onclickeventlistener for each button. Can you please help me with instructions on implementing this feature, or a possible alternative approach as recommended. Maybe a small sample code example would help as well. I can proceed based off that.
6 Replies
Tiago Serafim
Tiago Serafim8mo ago
If I understood correctly, you want to change the content of one textbox for the result of the last button pressed? You have to add a client side runnable that watches the result of the buttons and updates a variable in the state.foo variable. Then, you link the textarea to this state variable.
Ken
KenOP8mo ago
Okay, I will give that a shot. Also, if I have multiple users, does each user have a unique instance of the app, or the users use the same app instance? I am asking this because multiple people will be pressing different buttons at the same time, so the variable in state. foo should be unique to each user. I read the documentation and I see windmill has public apps available as standalones, just confirming that the app will be a unique instance to each user?
Tiago Serafim
Tiago Serafim8mo ago
Each time a user loads the App page, the JavaScript state is blank It's possible to get the current user email and use that to save data for that specific user, but that is up to you to do, as far as I understand
Ken
KenOP8mo ago
would you mind giving me a sample code to use for the buttonClick eventListener?
Tiago Serafim
Tiago Serafim8mo ago
I'm not at my computer right now, but Windmill has some video tutorials on its YouTube channel. Also, Trevor Sullivan's channel also has some nice complete tutorials.
Ken
KenOP8mo ago
Cool, I will check these and see if I can get something along the lines. Nothing came up related to button on click eventListeners. For this particular case, I think we will need a background runnable That listens for a button click event and sets a some variable based on the button clicked. Example code below. // Define a function to update the state based on the last button pressed function updateStateWithLastButtonResult(buttonId) { // Assuming the result of the button press is stored in a similar manner for each button // For example, if each button press updates a global variable with its result let result; switch (buttonId) { case 'a_a': result = a_a.result; // Assuming a_a is an object with a result property break; case 'c_a': result = c_a.result; // Assuming c_a is an object with a result property break; case 'e': result = e.result; // Assuming e is an object with a result property break; case 'd': result = d.result; // Assuming d is an object with a result property break; default: console.error('Unknown button ID'); return; } // Update the state variable 'foo' with the result state.foo = result; // Link the updated state variable 'foo' to the textarea with id 'j' setValue('j', state.foo); } // Example usage: // Assuming there's a way to listen to button presses, call updateStateWithLastButtonResult with the pressed button's ID // This part is pseudo-code, as the actual implementation depends on how the buttons are set up // buttonPressListener('a_a', () => updateStateWithLastButtonResult('a_a')); // buttonPressListener('c_a', () => updateStateWithLastButtonResult('c_a')); // buttonPressListener('e', () => updateStateWithLastButtonResult('e')); // buttonPressListener('d', () => updateStateWithLastButtonResult('d')); // Note: You'll need to implement or use an existing function similar to buttonPressListener // to actually listen to button presses and call updateStateWithLastButtonResult accordingly.