APP bridge Modal iframe contents communicate with the parent page

Hi!

I faced with with issue too. It doesn’t work because app bridge dispatches event before your modal loads. Here is how I resolved the issue:

APP:

app.bridge.subscribe(Modal.ActionType.DATA, ({ action, data }) => {
      switch (action) {
        case 'CANCEL': {
          this.modal.dispatch(Modal.Action.CLOSE);
          break;
        }
        case 'SAVE': {
          // SAVE LOGIC HERE
          this.modal.dispatch(Modal.Action.CLOSE);
          break;
        }
        case 'LOADED': {
          // data you would like to pass to the modal
          const data = {};
          app.bridge.dispatch(Modal.data(data));
          break;
        }
        default: {
          break;
        }
      }
    });

And inside of your modal code you need to dispatch an event on load and subscribe to DATA action.

bridge.dispatch(Modal.data({ action: 'LOADED' }));

bridge.subscribe(Modal.ActionType.DATA, (data) => {
  // NOTE THAT IT'S SUBSCRIPTION TO ALL ACTIONS AND YOU NEED ADDITIONAL CHECK HERE
  console.log('REVERSED DATA TRANSFER', data);
});

Hope it helps.