Redirect to external links after record update through action button

Custom Coding
1

Hi,

Anyone can help on this? I want a redirection to a new url after the record being updated? I am trying to use the following, but it doesn’t work. Any insight on it?

</>
window.addEventListener(‘submit-form-success-form1’, (e) => {
console.log(‘form submit success’, e.detail);
myRecord.update()
.then(() => {
page.linkUrl = “https://www.jimsbond.com”;
page.redirectTo();
});
});
</>

Appreciate yr kind help.

Eric

2

window.addEventListener(‘update-record-success-list-details1’, (e) => {

console.log(‘update record success’, e.detail);

I have tried to change the 1st 2 lines, but still no response.

3

Hi,

Here is the code that would work for you:

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('update-record-success-list-details1', () => {
    window.location.href = 'https://www.jimsbond.com';
  });
});
</script>

Or, if the records to update (and as a consequence, the list-details block) are inside a classic modal

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('update-record-success-list-details1', () => {
    window.parent.location.href = 'https://www.jimsbond.com';
  });
});
</script>
4

Hi Matthieu,

That’s great, it works! However, if it is possible to show up as a modal one? Since I don’t want to show the url in a browser. I know there are three kinds of modal size? Any specifications could be found?

Really appreciate your kindness in assisting me.

Brgds

Eric

5

Open a Softr modal to open the url? No that’s not possible.
My advice: don’t be stuck on such things, showing or not the url in the browser has 0 consequence for users, UX or your business. And they will always be able to find it.

You can always use this code to open it in a popup but your users should allow this in their browser settings which is not always the case. Moreover: it will give the url :sweat_smile: + no customization + really not a great UX

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('update-record-success-list-details1', () => {
    const popupWindow = window.open('https://www.jimsbond.com', '_blank', 'width=500,height=500');
    if (popupWindow) {
      popupWindow.focus();
    } else {
      alert('Popup window could not be opened. Please check your browser settings and try again.');
    }
  });
});
</script>

If the update occurs in a Softr modal and you want to stay in the Softr modal after redirection => just use the very first code I gave you in this thread (to be inserted in the modal page - child page)

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('update-record-success-list-details1', () => {
    window.location.href = 'https://www.jimsbond.com';
  });
});
</script>
6

Thanks for you advice. The reason why I want it to be this is that the last page is showing a redemption success msg. Therefore, I want to show it like a pop-up so that it won’t be easily be recorded in bookmark.

Is there anyway easy way that I can bring those dynamic data from the list and form to the new page? Any specific code that could be applied?

7

Not that I know, it would need a much more complex script to perform it.
That being said, the solution might not need any code, if the redirection is made within your app. Playing with list-details block in the new page is often a solution. That’s all I can do to help you

1 Like
8

Is EventListener unique to this example. Is that what the record primary field title would be called?

1 Like
9

Hi,
The event listener has nothing to do with a primary field. It’s about the whole update action. When you click “update” in the action modal and the update is a success => it redirects to an external link of your choice. You just have to change list-details1 by the ID of the block where the update occurs and the https://.....

The event listener for a successful update is 'update-record-success-blockID'. In this example, the update occurs in a block called list-details1.

10

Hi all! Thank you for the helpful thread. @matthieu_chateau I am trying to add a event listener for a block with multiple “update record” action buttons and I want them to each redirect to a different location. Since one-click update buttons are only visible to logged in users I cannot send you the working page, but here is more info on each button. As you can see, classes and etc are the same across both but they have different names, nested in a div.

Button #1

<button class="nw87ex7 nw87ex9" data-testid="button" data-loading="false" data-disabled="false" aria-busy="false">
<div class="nw87exg">Interview</div>
</button>

Button #2

<button class="nw87ex7 nw87ex9" data-testid="button" data-loading="false" data-disabled="false" aria-busy="false">
<div class="nw87exg">Reject</div>
</button>

Can you let me know how I can edit the code to accomplish this? This code is working to redirect each button to the same location:

<script>
  window.addEventListener('block-loaded-additional-info-from-provider', () => {
    window.addEventListener('update-record-success-additional-info-from-provider', () => {
      window.location.href = '/slug';
    });
  });
</script>
11

Hi,

Could you test this (header custom code of the page)

<script>
  let redirectUrl = '';

  window.addEventListener('block-loaded-additional-info-from-provider', () => {
    const buttonDivs = document.querySelectorAll('button .nw87exg');

    buttonDivs.forEach((div, index) => {
      div.parentElement.addEventListener('click', () => {
        const buttonText = div.innerText;

        if (buttonText === 'Interview') {
          redirectUrl = '/interview';
        } else if (buttonText === 'Reject') {
          redirectUrl = '/reject';
        }
      });
    });
  });

  window.addEventListener('update-record-success-additional-info-from-provider', () => {
    if (redirectUrl) {
      window.location.href = redirectUrl;
    }
  });
</script>

Also another way to perform this, if you don’t want to rely on the text value of a button (div.innerText), is to use the index of a button. The index can be used if and only if the two - or more - buttons have the same class.

<script>
  let redirectUrl = '';

  window.addEventListener('block-loaded-additional-info-from-provider', () => {
    const buttons = document.querySelectorAll('button .nw87exg');

    buttons.forEach((div, index) => {
      div.parentElement.addEventListener('click', () => {
        if (index === 0) {
          redirectUrl = '/interview';
        } else if (index === 1) {
          redirectUrl = '/reject'; 
        }
      });
    });
  });

  window.addEventListener('update-record-success-additional-info-from-provider', () => {
    if (redirectUrl) {
      window.location.href = redirectUrl;
    }
  });
</script>
12

This worked! Thank you so much!!

2 Likes