1
0
-1

Hello, I've added the below to the form load rule in order to respond to a postMessage from an iFrame within the form. I'm receiving the message as expected as the console log 'done' fires, but I can't seem to update the data field I need (data.provisoResult) from within this function.  

Note, the below code simply updates the data field to "done" as I wanted to try and hone in on the issue. In reality, the data field will take the postMessage response (i.e. data.provisoResult =  event.data).

Any suggestions appreciated. Thank you.

//for receiving post messages from Proviso iFrame
function receiveMessage(event)
{
if (event.origin == "https://test.bankstatements.com.au" || event.origin == "https://bankstatements.com.au") {
//Correct domain
console.log("done");
data.provisoResult = "done";
}
else {
//Else, incorrect domain- no post message for you.
console.log('wrong domain');
}
}

window.addEventListener("message", receiveMessage, false);
    CommentAdd your comment...

    1 answer

    1.  
      2
      1
      0

      Hi Sam,

      That code looks like it should work as you expect.  Do you have any other code elsewhere that updates the data.provisoResult field?  Is there a typo in the field name 'provisoResult'?

      I'd suggest using Chrome's debug feature and put a breakpoint on the data.provisoResult = "done" line.

      Press F12, then Ctrl-o, enter app.js as the filename, then Ctrl-f to search for receiveMessage to locate your code and add the breakpoint.

      If you go to the Console tab, you can inspect the data field with 'maestro.Form.data.proivisoResult'


      1. Sam Fursdon

        Thanks for the response Bill. To test, I've tried setting the data field content before the function:

        data.provisoResult = "it works here";
        
        function receiveMessage(event)
        {
          if (event.origin == "https://test.bankstatements.com.au" || event.origin == "https://bankstatements.com.au") {
        
            data.provisoResult = "But will it work here?";
            console.log("done");   
          }
          else {
         
          console.log('wrong domain');
          }
        }
        
        window.addEventListener("message", receiveMessage, false);
        };

        When running this on page load, the data field will update to "It works here". However it still wont update within the receiveMessage function (doesn't take on the "But will it work here?" value).

        I've tried setting the breakpoint, but i'm just getting 'undefined' when entering 'maestro.Form.data.proivisoResult' into the console. I could be going about this wrong though, please see attached screenshot. 

      2. Bill Frost

        Hi Sam,

        What happens when you hover the mouse over 'data' in data.provisoResult for a while?

        You should see something like this:

               

        That's really the equivalent of typing 'maestro.Form.data' in the console tab, but a bit quicker.

        Check that the 'data' object has the SFMData property, then locate your provisoResult property and check its value.  You could also just hover over the 'provisoResult' portion of 'data.provisoResult'.

        If its value is undefined, is its spelling/case correct?  You can guarantee its name is correct in the rule code editor by double-clicking the field from the component tree like this:

        I think there is also an issue with Angular not detecting the assignment to the data field because it takes place outside of an Angular scope.

        Try adding $rootScope.$digest() after the data field is updated, like:

        function receiveMessage(event)
        {
            console.log("done");
            data.myfield = event.data;
            $rootScope.$digest();
        }

        window.addEventListener("message", receiveMessage, false);

      3. Sam Fursdon

        Hi Bill,

        Just worked out what was happening - seems the data field was updating, but the text display that referenced the data-field (to test it) wasn't updating until something else on the page was clicked. I'm using the code to validate that the iFrame action was complete, meaning that when the 'continue' button is clicked the field will refresh and the validation rule will correctly prevent or allow the user to continue.  

        Thanks for your help, and sorry for all the trouble. 

      4. Bill Frost

        Hi Sam,

        Great you've got it working.  The lag you are seeing is due to Angular not being immediately aware of an update outside of an Angular scope.

        Adding the $rootScope.$digest() call in your message receive function will fix that lag so the text display updates immediately.

      5. Sam Fursdon

        Great to know, thanks again Bill.

      CommentAdd your comment...