Inside app.js I have following code to attempt to register a method to receive data from the modal:
document.onreadystatechange = function() {
if (document.readyState === 'interactive') renderApp()
function renderApp() {
var onInit = app.initialized()
onInit.then(getClient).catch(log.error)
function getClient(client) {
window.client = client
client.events.on('app.activated', onAppActivate)
}
}
}
async function onAppActivate(e) {
// Declare function to receive data from modal
window.client.instance.receive(processModdalData)
}
// Function to receive data from Modal
function processModdalData(event) {
log.info('MODAL DIALOG DATA RECEVIED')
}
In the modal.js I have following to initialiae
document.onreadystatechange = function() {
if (document.readyState === 'interactive') renderApp()
function renderApp() {
var onInit = app.initialized()
onInit.then(getClient).catch(log.error)
function getClient(client) {
window.client = client
}
}
}
In modal.js I have following upon submitting the dialog:
async function submitValues(e) {
var body = { var1: "val1", var2: "val2" }
log.info("Submitting values from modal")
window.client.instance.send( { message: {action: 'add', body: body} } );
window.client.instance.close();
}
The problem is that " occasionally processModdalData does not get invoked. Problem is random.
I’m curious about the “client” object and if I’m referencing it correctly when working with multiple pages. In the main app page I store client in ‘window.client’ and refer to it there in other methods in which its not easy/possible? to pass client as an argument. Same in the modal window. Is this valid? I was wondering if I’m overwriting the client object and causing issues in that way.
I saw some code examples where client was stored in the root of the JS file as follows:
— app.js –
var client
<further down>
function getClient(client) {
window.client = client
And same thing in modal.js:
– modal.js —
var client
<further down>
function getClient(client) {
window.client = client
Which is the correct way or does it mater? Is it possible that by using window.client i am causing this issue?
I’m not able to reproduce the issue. When I tried multiple times, the event is always received. Do you remember any sequence when the event is not received? Could you try reproducing the issue and confirm the sequence?
The code looks perfect. The modal and the placeholder app is rendered in different iframes. They will get their own document and window, I guess. So appending the client object to the window doesn’t matter. @Santhosh Can you please confirm if my assumption is right?
@stevemc,
As @Raviraj said, modal and app is rendered in different Iframes, and it won’t be a problem with the window.client.
when the function is not invoked, have you get any error in the console?
if so can you please share us the details, we will take a look and getback to you at earliest.
Thanks for the replies. I added lots of logging and cleaned up the code as much as I can and still I am getting same issue. Its somewhat random. I can’t put my finger on it. Sometimes it occurs repeatedly for 3 or 4 times in a row then it does not.
No errors at all are being generated. I get the last log messages from the client send() method and the log messages that I have put in client receive() method do not appear after that.
Question: I wonder if I am closing the modal too quicklY? Is the send async and do I need to await its completion before closing: This is what I’m doing:
I don’t know if it would help for me to show you the logs since there are no errors. Just in case below shows logs of data that is submitted and that’s the last log I get. No errors at all appear in log during session.
addTraining.html:30 Submitting form
addTraining.html:31 Start:2022-03-01 End: 2022-04-04
addTraining.html:36 Date Values: Now: Sun Feb 27 2022 07:03:00 GMT-0800 (Pacific Standard Time) Start: Tue Mar 01 2022 00:00:00 GMT-0800 (Pacific Standard Time) End: Mon Apr 04 2022 00:00:00 GMT-0700 (Pacific Daylight Time)
addTraining.html:37 Checking start date
addTraining.html:45 Checking end date
addTraining.html:56 Returning to main with body {cm_training: {…}}
Possible can you share us the app (removed your logic and have minimal code to reproduce of your issue)?
we will take a look and let you know what is wrong
@stevemc Were you able to discover the bug? I wonder if you got a chance to share a reproducible version of the app.
Some of the important details that are missing in the post are:
The placeholders where the app is rendered
A step by step description of user flow as the user using the app
Any pattern when processModalData() is not invoked
Think of the client object to be a programmatic bridge to talk to both Freshdesk and the Platform. So any method that you invoke on the client object will either register function definitions defined by the app developer or directly invoke them based on the use case. The same understanding along with the fact that both iframes get their own window and document contexts means that attaching to window isn’t actually helping. They are separate client instances anyway.
I suspect the problem is coming in combination with how app lifecycle events work in line with browser web page events. If we are able to drill down to what exact user flow causes processModalData() left uninvoked, we can inspect the thread of execution to find the root cause.
Hi. I was able to build the attached app that clearly reproduces the issue. I found that to reproduce you have to change “tab” to one of the other apps and then back to this one. For example, one way to reproduce is:
Today, the events that are handled in the frontend are owned by the Freshsales Suite team themselves. So I would probably try to put you directly in touch with the information that we found on this thread. Let’s see if we get some help.
@stevemc the bug has been identified within the Instance Method and we have asked the Freshsales team to resolve and roll out a fix. We will keep you posted. Thanks!
