Answered

restricting getWidgetContextMenu

  • 21 May 2021
  • 3 replies
  • 29 views

Badge +2

Is there a way to restrict the widgets that getWidgetContextMenu applies to? I’m adding a new button, and I’d only like this button to show up for kanban. 

icon

Best answer by Max Harper 21 May 2021, 19:22

@manavb1  
My recommendation would be to run miro.board.selection.get()  right out of the ‘SELECTION-UPDATED’ eventlistener and then apply logic on the array of widget objects returned that will either add your button or not depending on your logic. 

psuedo: for doing it to just stickies. 

if (widget.type === “STICKER”){ add the button } else { do nothing }

View original

3 replies

Userlevel 7
Badge +11

@manavb1  
My recommendation would be to run miro.board.selection.get()  right out of the ‘SELECTION-UPDATED’ eventlistener and then apply logic on the array of widget objects returned that will either add your button or not depending on your logic. 

psuedo: for doing it to just stickies. 

if (widget.type === “STICKER”){ add the button } else { do nothing }

Badge +2

Hi @Max Harper,

Thanks for your response, could you explain how the add button logic works? So far I have the following:

    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()
}
}]
}
}
})

However, this seems to add a button for every widget, even when I enclose it in the if statement you suggested.

Userlevel 7
Badge +11

@manavb1

I forgot one thing which is that Miro has deprecated the “widget context menu”. 

See thread here and SDK notice here

 

However: its still working for the time being. As you’re already seeing. 

 

SOLUTION:

Here’s a thought from looking at the SDK .ts file  on this line here. . .

    /**
*
* **Deprecated**
* This method is deprecated.
*
* @deprecated
*/
getWidgetMenuItems?: (widgets: IWidget[], editMode: boolean) => Promise<IWidgetMenuItem | IWidgetMenuItem[]>
}

 

Noting that ‘widgets’ is returned for passage into the promise context in the method passed into the arrow function.

 

. . .   and looking at this sample app… 

https://github.com/miroapp/app-examples/blob/a801cb7852a3b982cde6fb943cfceeda3df6606b/drag-and-drop/js/index.js#L14

getWidgetMenuItems: () => {
return Promise.resolve({
tooltip: 'Hi',
svgIcon: icon24,
onClick: (widgets) => {
console.log('onClick', widgets)
},
}

Noting that ‘widgets’ (undefined any other scope) is passed as an argument for the on-click callback function → Wondering where does that ‘widgets’ come from in this context? Ohh, it must be returned in the getWidgetMenuItems method. 

 

So: 

This code below solves your problem: 

etWidgetMenuItems: (widgets) => {
console.log("widgets", widgets)

// INSERT YOUR LOGIC HERE
if(widgets[0].type === "STICKER"){
return Promise.resolve({
tooltip: "Perception-Map-Demo",
svgIcon: icon24,
onClick: async (widgets) => {
const authorized = await miro.isAuthorized();
if (authorized) {
miro.board.ui.openLeftSidebar('builder.html')
} else {
miro.board.ui.openModal('not-authorized.html')
.then(res => {
if (res === 'success') {
miro.board.ui.openLeftSidebar('builder.html')
}
});
}
}
})
}
}

 

https://www.loom.com/share/7e8b9fac555240e2bf385125c79d6f21

Reply