Web SDK - How to start an action on the board from a panel and keep it running after closing the panel

  • 27 October 2022
  • 4 replies
  • 198 views

Userlevel 1
Badge +1

I have a Web App for Miro that start an action from a Panel. once I click in a panel button I start and action moving cards in the board. The problem is that when I close the panel, the action stops. I know that this is the expected behavior for Panels, but I would need that the action keeps running even after the panel is closed.

 

Any ideas?


4 replies

Userlevel 5

What kind of Framework are you using for the frontend? Could you maybe use something like a serverless function from NextJS/Netlify to handle the request? (Basically you call the server endpoint, which in turn does the desired actions on the Miro board async outside of the panel itself, meaning it will run even when the board is closed) 

Userlevel 1
Badge +1

Hy Addison,

I’m using Vite. I think that is the default framework for Miro Web apps. Just to clarify one point. I’m trying to keep the app running after closing the panel not the board.

  1. I click on the app icon
  2. a panel opens
  3. I click on a button inside the panel
  4. the panel closes (now my app stops to run here)
  5. (What I want) the app should stay active, running and modifying the board.

Is your suggestion still the best approach?

 

thank you!!

Userlevel 1
Badge

Hello Adilson,

Another alternative to Addison’s robust server side solution.

One concept I’ve been exploring is using the headless iframe to do the long running work.

The headless iframe is usually used to listen for the icon click on the board and runs as long as the board is open:
https://developers.miro.com/docs/app-panels-and-modals#iframes

When you open a panel, this opens another iframe that only exists as long as the panel is open.

Instead of including the code for the long running task in the panel js, you could use the panel js to trigger the long running task in the headless iframe. You could do this with the postMessage api:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

In the app panel you could get the open frames your origin and post a message to each. 

For example:

app-panel.js

const frames = window.parent.frames
const message = {task: "whatever you want to trigger"}
for (let i = 0; i < frames.length; i++) {
try{
frames[i].postMessage(message, window.origin)
}catch(e){
console.log(e)
}
}

Then in your page that’s listening for the "icon:click" event, you could also listen for the message sent by the app panel, and use the message contents to trigger the corresponding long running task.

app.js 

window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "your.domain.com")
return;

triggerLongRunningTask(event.data.task)
});

This way the long running task is offloaded to headless iframe which will run as long as the board is kept open.

I’ve tried this with one use case and it seems work quite well. Hope this helps.

Userlevel 1
Badge +1

Hey @Sean Winters ,

Many months after your answer I got in the same situation again and decided to try your solution. It worked like a charm! Many thanks! 💪

Reply