Add timer on ui page

Rj27
Mega Guru

Hi All,
I have created a custom ui page that gets opened on click of a ui action on ritm. I am passing few values from ritm to this ui page. Ui Page as below:

find_real_file.png 

For each checkbox on the page, i need to set some timer ,say 5sec each. So in this case total timer should be set for 15secs. Timer will start once ui page loads.
If i click on Approve and Send button before 15secs, i should get an alert stating "I have not taken the standard time of 15secs to review this page. I I want to continue?." 
If i click on YES for this first alert, I should be able to proceed ahead. If NO is clicked on alert, i should be routed back to validation ui page.


How Can I add timer on ui page?

1 ACCEPTED SOLUTION

@Rj27 

Another way if you don't want to use GlideAjax to get the time when user clicks the button use this

function validate(){

var d = new Date();

var nowTime = (d.getTime())/1000; // get value in seconds

var initialTime = gel('hiddenValue').value;

var initialTimeSeconds = initialTime/1000; // get value in seconds

var diff = nowTime - initialTimeSeconds;

if(diff > 15){

alert('');

return false;

}

}

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

View solution in original post

6 REPLIES 6

Anurag Tripathi
Mega Patron
Mega Patron

Ankur Bawiskar
Tera Patron
Tera Patron

@Rj27 

Take this approach

1) create hidden html element in UI page which would store the now date time in seconds; so it means when UI page loads

During the button click you need to check the difference between now time and the html hidden element

if more than 15 then show alert

On button click; perform GlideAjax and get the value in seconds for now time

you already have the html hidden element value; so subtract

sample HTML in UI page

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

    <g:evaluate jelly="true" object="true" var="jvar_initialTime">
        var gdt = new GlideDateTime().getNumericValue();
        gdt;
    </g:evaluate>
    
    <input type="hidden" name="hiddenValue" id="hiddenValue" value="${jvar_initialTime}"/>
    
</j:jelly>

UI Page Client Script:

function validate(){

var initialTime = gel('hiddenValue').value;

// perform glideajax

// subtract

if(diff > 15){

alert();

}

}

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

@Rj27 

Another way if you don't want to use GlideAjax to get the time when user clicks the button use this

function validate(){

var d = new Date();

var nowTime = (d.getTime())/1000; // get value in seconds

var initialTime = gel('hiddenValue').value;

var initialTimeSeconds = initialTime/1000; // get value in seconds

var diff = nowTime - initialTimeSeconds;

if(diff > 15){

alert('');

return false;

}

}

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Hi Ankur,

Thanks for the response!
Can I not directly set timer somewhere?

Because in my actual requirement, total number of fields is not fixed. the ui page has some email fields like To,Cc,Bcc,and Body of the mail which will be sent on click of ui action 'Send mail'.
And there can be multiple values in TO,CC,Bcc because the fields are of type glide_list.
Something like this:
find_real_file.png
I have to set timer based on total fields (User field - wait time 5sec each, body -wait time 10sec)

So based on total number of values in user(in this case 4 -Total time from user=20sec) and time from body =10sec
So total time = 30sec.
So basically i have to take the count first.