Add event listeners to events programaticlaly

How do I do X?
1

Is there a way to assign an event call back to an event (say Button.onClick) programmatically?

Something like button1.addEventListener(“onClick”, button_1_click)
or button1.onClick += button_1_click;

2

Not directly like that, but did you know that you can store functions in the appsmith store? It looks like this:

// MyJsObject
export default {
  myFunc1: () => { 
    showAlert('Ran myFunc1')
    return true
  }
}

// Elsewhere in your JS
await storeValue('myWellNamedCallback', MyJsObject['myFunc1'])

// In your buttons onClick event
{{ appsmith.store.myWellNamedCallback?.() || myFallbackFunc() }}

You want any callback you define in your object to return true so that we can use the OR operator (||) to define a fallback in case we haven’t stored a function yet.

3

That looks nice. But how do I do something like this:

for (button in buttons)
{
button.onClick += button_click;
}

4

Can you tell us more about your use case here?

5

I create dynamic tables (with dynamic columns) and want to make them editable and assign a corresponding call back in code.

6

That sounds very interesting. Could you elaborate further?