Creator Page Auto Refresh and sends and received data internally or externally with RealTime Updates

08/21/2024 12:49 PM - Comment(s) - By Jesus Sosa

Steps to Simply Auto Refresh a Page:

  1. Use the following meta tag in the <head> section of your html page snippet in Creator where your Forms, Reports, Views, Dashboards, and anything is located:
    <meta http-equiv="refresh" content="5" > 
  2. Apply the following configurations:
    • Set the reload period. The number 5 in this example can be changed to the preferred number of seconds for each reload.
    • It is also possible to instruct the browser to fetch a different URL when the page is refreshed. To do so, use this variation of the meta tag:
      <meta http-equiv="refresh" content="5;URL='http://creatorapp.zoho.com/...'">

Note: Meta refresh may impair the web browser's "back" button in some browsers including IE 6 and older.

Note: Auto refreshing a page may impact your data transfer because every time the page is reloaded, data transfer is incurred.


Advanced Steps with More functionalities than auto-refreshing:


1. Create a new view for your table that you want to monitor for updates

2. Create an Added_Time criteria for your new view Example.. Created in the last 2 minutes [Added_Time >= zoho.currenttime.subMinutes(2) ]

3. Create an html/page that utilizes jQuery (see the Gist below here's the link)
<!DOCTYPE html

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset="utf-8"

<title>Page Refresh</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>

$(function(){

var zoho, url, request;

zoho = {

adminuser : "", // the admin user of the ZC app

appname : "", // the app name

view : "", // the view you are referencing

form : "", // your form name the view references

interval : 60000 // how often you want to check for new records 60000 = 60 sec

};

url = "https://creatorexport.zoho.com/"+zoho.adminuser+"/"+zoho.appname+"/json/"+zoho.view+"/callback=?";

request = function(){

$.getJSON(url,function(json){

var records = json[zoho.form] || [];

if(records.length !== 0){

window.parent.location.hash = "#Script:page.refresh";

}

});

};

window.setInterval(request,zoho.interval);

});

</script>

</head>

<body>

</body>

</html>

    
4. You don't have to worry about your login session because the JSESSIONID you already have will be used on the remote iframed page and the AJAX is using Zoho creator's built in JSONP feature.
 
5. Update the zoho object values in the refresh html page (note : you want to use your newly created Added_Time criteria view also don't set the interval to greater than the Criteria subMinutes time. A little lower is better. So if using a 2 minute criteria set the interval to like 100000);

6. Create an html view in Zoho Creator, embed your view that you want to show updates for

7. Drop an iframe into your html view like this. <iframe src="http://myurl.com/refresh.html" ></iframe>



Here's how it works.. 
1. The iframed page uses jQuery to make a JSONP request to the criteria'd view you specify
2. Javascript is used to check to see if their are any new records.
3. If so the iframed page sets the parent Zoho Creator HTML view's URL hash to #Script:page.refresh which triggers the hashchange event and executes Zoho Creator's built in refresh code. 


Here's the html page to iframe in. MAKE SURE YOU UPDATE THE zoho object fields or it won't work! 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset="utf-8"">

<title>Page Refresh</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>

$(function(){

var zoho, url, request;

zoho = {

adminuser : "", // the admin user of the ZC app

appname : "", // the app name

view : "", // the view you are referencing

form : "", // your form name the view references

interval : 60000 // how often you want to check for new records 60000 = 60 sec

};

url = "https://creatorexport.zoho.com/"+zoho.adminuser+"/"+zoho.appname+"/json/"+zoho.view+"/callback=?";

request = function(){

$.getJSON(url,function(json){

var records = json[zoho.form] || [];

if(records.length !== 0){

window.parent.location.hash = "#Script:page.refresh";

}

});

};

window.setInterval(request,zoho.interval);

});

</script>

</head>

<body>


</body>

</html>


Jesus Sosa

Share -