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
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.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?
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
would you mind giving me a sample code to use for the buttonClick eventListener?
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.
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.