Error in passing data from iframe to modal inside zendesk app

[bold-satinder]

Hi there,

I am not sure that I am positing at the right place.

I am building a sidebar app with js and I have iframe.html from there I am calling my main.js script file. main.js is responsible to open the modal (dialog.html) and pass the context. When modal opens, I am not getting the context in the console.

main.js
async function openInstallModal() {
try {
const data = await client.get(["ticket.requester.id"]);
const requesterId = data["ticket.requester.id"];

const result = await client.invoke("instances.create", {
  location: "modal",
  url: "assets/install-dialog.html",
  size: { width: "600px", height: "700px" },
  metadata: {
    ticketId: 12564,
    customData: "Hurray!",
  },
});

console.log("Modal opened with instance ID:", result);

} catch (err) {
console.error("Failed to get ticket info:", err);
}
}

modal.js

const client = ZAFClient.init();

// The app.registered event fires when the Zendesk app is ready and the DOM is loaded.
client.on("app.registered", async () => {
client.get("metadata").then(function (context) {
console.log("App context:", context);
});
});

In context, I am not getting my passed data.