Skip to main content
Answered

return menu items with promise in getWidgetMenuItems

  • July 24, 2020
  • 1 reply
  • 710 views
K

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

Best answer by Ahmed El Gabri

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

View original
Was it helpful?

1 reply

Ahmed El Gabri
Mironeer

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

K
1 person likes this
  • K
    Kingsley Chan

Reply


Behind the Canvas: Powering Innovation in Miro

Terms & Conditions