Skip to main content

Hello,

 

I am trying to add a custom icon to the menu for a given widget, this is the code for doing so:

function jiraCard() {

  miro.board.ui.openModal('modal.html',{ width: 400, height: 600 }).then(() => {

    miro.showNotification("modal closed");

  });

}

miro.onReady(() => {

  miro.initialize({

    extensionPoints:{

      getWidgetMenuItems: (widgets) => {

        return{

          tooltip: 'Estimate',

          svgIcon: '<circle cx="12" cy="12" r="9" fill="none" fill-rule="evenodd" stroke="currentColor"       stroke-width="2"/>',

          onClick: async (widgets) => {

            jiraCard()

          }

        }

     }

   }

 })

})

The problem is that this code makes all the default widgets disappear, so that the only button the menu is the custom widget that I am defining. Is there anyway to prevent this problem?

Hi @Manav Bhatia,

 

Thanks for reaching out!

You are almost there! As getWidgetMenuItems returns a Promise you need to add the await keyword before calling the jiraCard() function:

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      getWidgetMenuItems: (widgets) => {
        return {
          tooltip: 'Estimate',
          svgIcon: '<circle cx="12" cy="12" r="9" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
          onClick: async (widgets) => {
            await jiraCard()
          }
        }
      }
    }
  })
})

 

That should solve your issue,

Anthony

Hi @Anthony Roux,

 

Thanks for your response. Unfortunately, even when I use the code that you suggest, I still have the same issue. It seems like the widgets parameter is not being used much. Is there any way I should be using it to get the remaining menu icons?

If your issue persists after adding the await it might be linked to what you have in modal.html. Could you please share what you are building in that modal view? I tried on my side to build a simple modal with images and it works fine.

 

Can it be, that you have to return an array?

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      getWidgetMenuItems: (widgets) => {
        return [{  // <--
          tooltip: 'Estimate',
          svgIcon: '<circle cx="12" cy="12" r="9" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
          onClick: async (widgets) => {
            await jiraCard()
          }
        }] // <--
      }
    }
  })
})

Oh, and be aware, that getWidgetMenuItems is deprecated and will eventually disappear.

Reply


Terms & Conditions