Answered

return menu items with promise in getWidgetMenuItems

  • 24 July 2020
  • 1 reply
  • 709 views

Hi,

 

I am trying to make a request to our server before returning the context menu in `getWidgetMenuItems` method.

But the context menu not showing correctly when any delay occurs (even if I create a promise with settimeout for 10 ms). The context menu items may not able to display when I click on an item within the board.

If I remove the settimeout, the context menu items will show correctly.

 

Something like this:

getWidgetMenuItems: async (widgets, editMode) => {

  const promise = new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve([

        {

          tooltip: 'Tools',

          svgIcon: 'svg-icon',

          onClick: async() => {

            // on click event

          }

        }

      ]);

    }, 10);

  });

  const result = await promise;

  return Promise.resolve(result);

}

 

Regards, 

K

icon

Best answer by Ahmed El Gabri 11 August 2020, 17:05

View original

1 reply

Hi @Kingsley Chan,

 

This code should work fine for your use case & test purposes, using https://httpbin.org/ to make a fake request.

getWidgetMenuItems: (widgets, editMode) => {
return fetch("https://httpbin.org/get").then(res => {
console.log(res); // just to proof that the request happens

return {
tooltip: "Tools",
svgIcon: "svg-icon",
onClick: () => {
console.log("onClick");
}
};
});
}

// or with async/await

getWidgetMenuItems: async (widgets, editMode) => {
const result = await fetch("https://httpbin.org/get");
console.log(result); // just to proof that the request happens

return {
tooltip: "Hi",
svgIcon: "svg-icon",
onClick: () => {
console.log("onClick");
}
};
},

The code above actually is doing slightly more, in your case since the result is the value you need to return you can do this

getWidgetMenuItems: (widgets, editMode) => {
return fetch("https://httpbin.org/get");
}

// or with async/await

getWidgetMenuItems: async (widgets, editMode) => {
const result = await fetch("https://httpbin.org/get");

return result;
}

 

Some points worth mentioning:

  • That the lack of an actual SVG icon will render a blank icon in the widget menu
  • The promise returned from getWidgetMenuItems must be resolved within 400ms, or the icons will not show up in the widget menu. 

You can check the SDK API types here https://github.com/miroapp/app-examples/blob/master/miro.d.ts

 

I hope this answered your question.

 

Best,

Ahmed

Reply