JS for pauzing and showing a message due to long API calls and record rules

Hi all,

I am reaching out to the community, since my app is containing some ‘advanced’ record rules and API’s, which leads that the standard solutions for adding a delay for the user doesn’t work. With that I mean that my form also contains 2 input number values where custom JS is used to show a thousand separator once the numbers are being filled… It appears that when multiple custom JS code is used on a form, not all are executed:

My user is directed in the following way:
1 Page with a 3 step form–>

after submit–>

  • Details page

Upon submit- → 8 record rules and 1 API call. The API call returns around 10 values which are stored in the database…

My goal is to show a result to the user that the results are generated… Unfortunately, the default plugin codes works great when recording around 10 values, but when things get more complicated (or just take more time), it doesn’t work…

So i tried to force a custom JS code from @Chem’s post : https://community.tadabase.io/t/chem-s-code-gems-displaying-a-loading-gif-during-form-submission-ep-4/3012
but it appears to be that the custom JS component with the sleep.utilities.code isn’t being executed…

So that leaves me with a question to the community: How can I add a delay in the record rules/ redirect workflow, to update the user that things are being executed on the background, which does work?

The code which I used on the form page:

TB.render(‘component_4’, function(data) {
data.ele.find(‘.form-submit button’).click(function(){
$(‘body’).append(‘

De resultaten worden gegenereerd…Even geduld aub…

’);
setTimeout(function(){
location.reload();
},5000);
});
});<>

And the code on the details page:

.loader{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(‘…/…/…/images/spinner-light.gif’)
50% 50% no-repeat rgb(249,249,249);
display: flex;
justify-content: center;
align-items: center;
}
.loader p{
margin-top: 200px;
}
body {
background-color: #ffffff;
}

<>

Check the video for the details:

@kruizf201 : since this involves custom JS, any recommendations how to pull this thing off?

1 Like

Hi @slimpens , Im working on a video to explain how to achieve this, I will post it for all the community as general topic

@kruizf201
Thanks Kevin, can’t wait to see it :slight_smile: