Event handler does not have access to component states

I cannot access the state of a component inside an event handler JS script.

For example, I cannot access in an button click event handler run script, the state of a ListView component (though the preview works, in console log throws undefined).

It seems an event handler JS scope bug?

1 Like

Hello @Nico_Del_Piano!

Unfortunately the new ListView component doesn't handle the sub-component values. You can see in a preview that it is usually only returning the first entry's values and when you run it has no context/scope as you have described.

With ListViews, however, you can place a button within the list component that can process the current item's values within the JS script of the event handler. You can log the button tracking component values to the console to test this out -- textInput1.value should return the value of that named component in the ListView for any row that is clicked. Usually I pass this data to the responsible query using the additionalScope option for the query trigger.

Here is a post which uses this setup and then goes on to some additional use cases: Updating the table editable values - #16 by pyrrho

Aside: this is also how I like to send currentRow data (for things like custom columns) when using table actions.

1 Like

Hi @pyrrho, thanks for your response!

I think this helps at some extent, but what I need is to delete an item in my list view. The problem is that I'm editing the item, so I preload the list items from an existing data source, and when removing, I call to data.filter(...).

This does not work as I lose the current edit state of the other items that might have been updated, so I do need to access the current state of the list view items, and not the initial data source.

Do you have any suggestion on how to do a removal without losing the changes?

1 Like

I was thinking that this should do it:

ListView.instanceValues.filter((e, idx) => idx !== idxToDelete))

But when clicking the button, ListView.instanceValues is undefined--and I can see those values in the preview which is strange

1 Like

I have used a modal which contains a list view which has the remove functionality sort of built into the data source. In this case, the list view was populated by the selected rows of an underlying table so the remove button filtered the item from the selectedRows array:

I think you can setup a "removed" variable that is an array to which you add the PK of "removed" items. The ListvVew's data source could then self filter against values in the "removed" array without needing to update the data source and lose your current state values.

1 Like

I'll follow up on this thread if our team ships a feature for managing list view state!

1 Like