Event Listener for Dynamic Lists (React Version)

Custom Coding
1

Hi guys,

New React lists feel great! I would love to learn more about Even Listeners for the new React lists to move our custom codes to the new version. Some of our use cases:
_ Listen for when the list finishes loading.
_ Listen for filter value change.
_ Count the number of total items
_ Mutation Observer / when a node is inserted

Regards,
Son

2 Likes
2

Huge ++ to this please. @artur

3

here are few events that could be helpful

block-loaded event is triggered when React mounts the block into DOM. It can be used instead of DOMContentLoaded event that is used in old custom codes.

window.addEventListener('block-loaded-table1', () => {
	console.log('Block loaded');
});

get-records event is triggered on every data response from softr data service. It can be used for getting the data manipulating before it get’s rendered.

const onRecords = (e) => {
	// we got new data under e.details
	console.log(e.detail);
	//console.log [{id: '***', fields: {...}}]
};

window.addEventListener('get-records-table1', onRecords);

const onRecords = (e) => {
	setTimeout(() => {
		// The block finish rendering 
		// I may do some staff here.
	}, 50);
};

window.addEventListener('get-records-table1', onRecords);

get-records:before event that is triggered before sending request, It can be used to catch the inline filter or search field changes.

const onFilterChange = (e) => {
	console.log(e.detail);
	//console.log { search: '', filter: [ { field: 'size', value: 'M' } ] }
};

window.addEventListener('get-records-table1:before', onFilterChange);

Note: table1 is the block name in studio settings

2 Likes
4

Thank you so much.
You save my week :slight_smile:

1 Like
5

@artur this code doesn’t appear to work when targeting header blocks.

I’ve tried a handful of different approaches in this topic and I haven’t been able to get it to work.

Using a DOMContentLoaded event works, but for some reason Safari has a hard time finding the HTML element to update (separate issue).