Question

Change iframe src with link on the board

  • 16 October 2023
  • 2 replies
  • 79 views

Badge +1

Hi, I’m looking to give a user the ability to change the src displayed inside an iframe using a link on the board. 
 

I.e. if the iframe displays a google doc that the user can edit inline, when they click a text link on the board the document will be changed for a different one that they can edit. 

is this possible? 
 

thanks,

Chris


2 replies

Badge

Hi Chris!

Only one idea I have in mind is to use custom actions and open a modal window:

const urlRegExp = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/

async function previewLinkHandler({items}) {
const item = items[0];
const url = urlRegExp.exec(item.content)[0]
console.log(url)
await window.miro.board.ui.openModal({
url
});
}

window.miro.board.ui.on("custom:preview-link", previewLinkHandler);
window.miro.board.experimental.action.register({
"event": "preview-link",
"ui": {
"label": {
"en": "Preview link"
}
},
"scope": "local",
"predicate": {
"$and": [
{"type": "text"},
{"content": { "$regex": urlRegExp.source } }
]
},
"contexts": {
"item": {}
}
}
);

In the example I use the predicate to show the custom action only for items with type text and that has a URL in the content property. You can find the guidelines on how to use custom actions here: https://developers.miro.com/docs/add-custom-actions-to-your-app.

Badge +1

Thanks Kirill, I haven’t seen custom actions before, I’ll take a look. 

Reply