I have created a widget that retrieves the Current User details of the current ZOHO CRM logged in person.
I have a button that takes the Email of the Current User and filters a database based on the retrieved Email.
I currently have this working by clicking on a button, however I am trying to have this function trigger when the page is loaded.
<div style="text-align:center">
<div style = "width:100%;margin:auto;">
<button type="button" style="margin:20px;cursor: pointer;background-color: blue;color:white;padding-top:4px;padding-bottom:4px;width:200;" id="wOpen"><i class="fa fa-check"></i>Refresh My Tasks</button>
</div>
</div>
<script>
var currentUserEmail;
$(document).ready(function() {
ZOHO.embeddedApp.on("PageLoad", function(onloadData) {
data1 = onloadData;
});
$("#wOpen").click(function() {
ZOHO.CRM.CONFIG.getCurrentUser().then(function(data){
console.log(data.users[0].email);
currentUserEmail = data.users[0].email;
document.getElementById('iframe1').src = 'https://creatorapp.zohopublic.com.au/ozeitaus/tasks/report-embed/Copy_of_Tasks_Report/J7qC6AS7Jzk8sNJabbTV6jrrWzz4GhSTJHQWkspmm2Sjm7zWNECD2qUWwOdOaDkqGZO5GOT87bufbUqMDRCpQhyD0y0JazH1P4fv?Status=Completed&Status_op=19&MainTaskOwnerEmail='+ currentUserEmail;
})
});
ZOHO.embeddedApp.init();
});
</script>
<iframe id="iframe1" height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src=''></iframe>
</body>
</html>
Instead of fetching the user details separately after the PageLoad event, fetch it inside that function itself.
Sample Code (Not tested)
ZOHO.embeddedApp.on("PageLoad", function(data) {
//.....
ZOHO.CRM.CONFIG.getCurrentUser()
.then(function(userdata){
console.log(userdata.users[0].email);
currentUserEmail = userdata.users[0].email;
})
.catch((error) => {
console.error(error);
});
///......
});
ZOHO.embeddedApp.init();
Move the contents of the click function to the on PageLoad callback