Skip to main content

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

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.

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

Reply


Terms & Conditions