2. PHPRunner General questions
  3. Timed message on record add
This topic is locked

Timed message on record add

 		11/30/2024 1:16:58 PM
PHPRunner General questions
A
 asawyer13 authorDevClub member

I generally do this on a record add

$pageObject->setMessageType(MESSAGE_INFO);
$pageObject->setMessage("The data was successfully saved");

Works well but in this case I'm staying on the add page and I don't want the user to enter information and think they've already saved it.

Is there a way to remove the "The data was successfully saved" message after 3 or 4 seconds, os replace it totally with a popup message that shows for 3 or 4 seconds?

Thanks
Alan
D
 		DRCR Dev 12/5/2024

HI

Instead of the message, I would load a session variable, if the session equals something, break out of PHP and run a sweetalert timed popup that closes after a period time and break back into PHP.

The code for ther sweetalert2 popup is on the sweetalert code page.
M
 		MikeUk 12/5/2024

Another way is to use the sweetalert toast option, you can add a timer in miliseconds after which time it closes.

I wroteand added this to custom_function.js
call it using.

showToast('title', 'message', 'icon' seconds, position);

icons 'e' Error, 'i' Info, 'w' Warning and 's' Success.
position translation bottom-end - bottom right, top-start = top-left.

function showToast(title, message, imgIcon, duration, fc) {
// postions:'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'
var myBordercol = '';
var myPosition = '';
if (fc == 0) {myPosition = 'bottom-end';}
if (fc == 1) {myPosition = "center";}
if (fc == 2) {myPosition = 'top-start';}
if (fc == 3) {myPosition = 'top-end';}
if (fc == 4) {myPosition = 'center-end';}
var myIcon = "info";
imgIcon = typeof imgIcon === 'string' && imgIcon.length > 0 ? imgIcon : 'info';
if (imgIcon.startsWith('e')) {myBordercol = "red";myIcon = "error";}
else if (imgIcon.startsWith('s')) {myBordercol = "green";myIcon = "success";}
else if (imgIcon.startsWith('i')) {myBordercol = "blue";myIcon = "info";}
else if (imgIcon.startsWith('w')) {myBordercol = "orange";myIcon = "warning";
}
if (duration !== 0) {var myDuration = duration || 3;}
else {var myDuration = 20;
}
myDuration = myDuration * 1000;
if (myDuration > 0 && myDuration < 1000) {myDuration = 3000;}
Swal.fire({
toast: true,
width: 450,
showClass: { popup: '' },
position: myPosition,
icon: myIcon || 'info',
timer: myDuration > 0 ? myDuration : null,
title: '<div style="font-size: 16px; font-weight: bold;">' + (title || 'Information') + '</div>',
html: '<div><font size="3">' + message + '</font></div>',
showConfirmButton: false,
timerProgressBar: myDuration > 0,
showCloseButton: true,
customClass: {popup: 'custom-toast'},
didOpen: function(toast) {
if (myBordercol) {
toast.style.border = '2px solid ' + myBordercol;
}
}
});
}// -----------------------------------------