Action Buttons - Update Records event listeners

Custom Coding
1

We have added two event listeners for Action Buttons Update Record action.

update-record-success event with field values is triggered after getting a response with a success status.
update-record-failure event is triggered after getting a response with an error status.

window.addEventListener('update-record-success-list1', (e) => {
	// e.detail is an object with updated field names and values
	console.log('update record success', e.detail);
	// update record success { 
	//                   payload: { "Full Name": "Softr" ... },
	//                   id: "rec123456"
	//                 }
});

window.addEventListener('update-record-failure-list1', (e) => {
	console.log('update record failure', e.detail);
	// update record failure 'Email field is required.'
});

// To reload the page after record update on #list1 block
window.addEventListener('update-record-success-list1', () => {
	window.location.reload()
});
4 Likes
2

Thank you so much for the update! :wink:

3

For “add record” action buttons, should I use ‘submit-form-success-formX’ and ‘submit-form-fail-formX’ as event listeners or ‘add-record-success-listX’ and ‘add-record-success-listX’?

4

Hi @artur, are there also click events we can track more generally (independent of what kind of action button it is) for the new action buttons?

5

@matthieu_chateau it’s still a form-submit...

@vonperger we will be adding selectors to buttons to track those too. Do you need generic click handler on action buttons ?

6

hi @artur thanks for looking into this. I would like to add stuff like calling fathom events or make.com webhooks etc when someone clicks on a button (mouse over might also be an interesting event). Ideally the generic list click (not the action button) would also have a selector. Thank you!

1 Like
7

@artur Could you share what is the event listener for add-record-success action buttons?

8

Hi Rebecca,
This should work: replace update-record-success-list1 by submit-form-success-listX

9

That works - thanks!!

10

Hi, would it be possible to have event listeners for Open URL action buttons on list block ?
I use webhooks URLs from Make and would like to use custom code to add logged-in user data (email and full name) in the data sent to Make.

11

@artur +1 for Open URL action buttons. This may already be implemented, but I’m not having any success with it. I have a similar situation as @Hippo, using the Open URL action button send activate a webhook handler that triggers an Airtable automation. Would like a somewhat simpler solution to notifying the user via toaster message on success of the action.

12

Could these event listeners also be used for password update button success? That would be super helpful since I use a modified profile block to prompt first time users to update temporary password to something secure. The issue is when they click update password, literally nothing happens. Would be SUH-WEET if I could trigger my confetti on password update success!!! :partying_face: :sparkles: :tada:

13

I also really need to somehow capture the clicks on an “Open external URL” button or combine two actions into one button - update record and open URL.

Any ideas how to do this?

It’s for tracking how many people apply to jobs via our platform :slight_smile:

1 Like
14

@artur is there a way also to catch delete events? I managed to catch the add and update.
Thanks!

15

window.addEventListener('delete-record-success-blockname', () => {
or
window.addEventListener('delete-record-failure-blockname', () => {

As per example =>

<script>
window.addEventListener('block-loaded-table1', function () {
    window.addEventListener('delete-record-success-table1', () => {
        window.dispatchEvent(new CustomEvent('reload-block-list6'));
    });
});
</script>
2 Likes
16

Hi, thanks so much for this. Is there an event listener for “add-record” action button?

17

@squatrito Unfortunately, add-record doesn’t exist yet, but I will ask the team to add it. I assume we could have it ready sometime next week

1 Like
18

awesome! Looking forward to it

19

The event listener for “add-record” action button is (For now)

window.addEventListener('submit-form-success-blockname', () => {
or
window.addEventListener('submit-form-failure-blockname', () => {

Then in the future I suppose submit-form will be replaced by add-record for dynamic blocks except for the form blocks.

2 Likes
20

Tested, and working properly! Thanks a million

1 Like