BottomPanel does not work anymore


Badge

Hello everyone

I've been developing the Kobi application for a few months now, using the BottomBar as a tool to select the app’s main functions.

The code I use is almost identical to what is published in the sdk 1.1 documentation (see code in appendix). Furthermore, everything worked without any problems for several months.

However, for a couple of weeks now the BottomPanel no longer appears.

Are there any specific reasons for the transition to sdk 2.0 why this is happening, or some other reason I am not aware of? In any case, is there any workaround?

Thanks for everything 

Alberto

-----

Appendix the code used.

 miro.initialize({
    extensionPoints: {
      bottomBar: {
        title: `Kobi`,
        svgIcon: Kobi,
        onClick: () => {
          miro.board.ui.openBottomPanel("kobipanel.html", {width: 204,height: 48,});
          },
        },
      getWidgetMenuItems: (widgets) => {
        return Promise.resolve([{
          tooltip: 'show',
          svgIcon: Kobieye,
          onClick: (widgets) => {
            showWidget();
          }
        },
        {
          tooltip: 'expand',
          svgIcon: Kobiexp,
          onClick: (widgets) => {
          expandWidget();
          }
        }])
      },  
    },
  })
})

Anthony Roux 4 months ago

Hi there,

Thanks for raising this. It seems that some updates we have been doing to improve Miro’s UI have introduced a regression on the Web SDK v1. The technical team is working on a fix that will solve this ASAP.

Note that the fix might change the location of the panel as the bottomPanel is being removed from Miro UI but this should not require any development on your side.

I will post more information when I hear from the engineering team. 

View original

12 replies

I am experiencing the same issue since Monday (4/4) .  the app was working well up to this week when it stopped calling the bottom.html .  But the app calls the other html files without any issues.  I am wondering if something changed in the back-end to cause this?  

Userlevel 5
Badge

Hi there,

Thanks for raising this. It seems that some updates we have been doing to improve Miro’s UI have introduced a regression on the Web SDK v1. The technical team is working on a fix that will solve this ASAP.

Note that the fix might change the location of the panel as the bottomPanel is being removed from Miro UI but this should not require any development on your side.

I will post more information when I hear from the engineering team. 

Userlevel 5
Badge

Hi there,

Just wanted to give you a heads-up on this. The team has deployed a fix. The bottomPanel should be now available on the top-right of Miro (ironically). This should work out of the box, the only issue you might face is the size of the panel, depending on the content you try to display you might need to customize it.

Really sorry for the inconvenience, we are making sure that the way we design extension points for the new developer platform will be scalable and take into consideration future possible UI changes.

 

EDIT: we heard from some users that the panel is not behaving as expected, the team is investigating and might rollback the update.

Badge

Thank you very much for your fix.

In my case, a simple panel with icons to launch the primary functions of the application, everything works fine. However, I must note that the panel is displayed in the bottom centre, exactly as before.

That’s fine for me.

Best

Alberto

Badge

Hi Anthony

Unfortunately, I must note that the compatibility issues with version 1.0 during the transition to 2.0 are occurring again.

I am in the process of migrating the Kobi app planned for the end of the year. However, the app in version 1.0 is still in use by students and professors. 

For the past few days, I believe downstream of one of your updates, the icon to activate the app that used to appear in the top right panel, no longer appears, even if the app is properly initialized: This is the message I get in the console:

Plugin initialized | Kobidev | 3458764519775325011

 

Please find the snippet of the activation code at the bottom for your convenience.

Do you think the development team can correct the glitch?
Waiting for your feedback

I thank you for your patience!! :)

Alberto Giretti

 

--------------------------------------------------------------------------------------------------------

  miro.initialize({

    extensionPoints: {

      bottomBar: {

        title: `Kobi`,

        svgIcon: Kobi,

        onClick: () => {

          //miro.showNotification('open kobi panel');

          miro.board.ui.openBottomPanel("kobipanel.html", {width: 204,height: 48,});

          //miro.board.ui.openModal("kobipanel.html", {width: 204,height: 48,});

          },

        },

      getWidgetMenuItems: (widgets) => {

        return Promise.resolve([{

          tooltip: 'show',

          svgIcon: Kobieye,

          onClick: (widgets) => {

            showWidget();

          }

        },

        {

          tooltip: 'expand',

          svgIcon: Kobiexp,

          onClick: (widgets) => {

          expandWidget();

          }

        }])

      },  

    },

  })

})

I see the same issue now. Our apps are all gone from the menu. We don’t plan to migrate to Web SDK v2 yet since some key features are missing.

Userlevel 5
Badge

Thanks for raising this issue.

 

We will investigate and come back to you.

Meanwhile the workaround will be to change the extension point you use for another one. We do acknowledge that it is not ideal and are really sorry for the inconvenience.

I tried switching from BottomBar to Toolbar.

But i don’t get it running.

 

I also tried this sample code:

 

miro.onReady(() => {   miro.initialize({      extensionPoints: {         toolbar: {            title: "The button title",            librarySvgIcon:               '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',            toolbarSvgIcon:               '<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',            onClick: () => {               miro.showNotification("You clicked a toolbar item!");            },         },      },   });});

But i don’t get a App entry in the left toolbar.

What am i doing wrong?

Thanks Tom

Userlevel 5
Badge

It seems to work on my side.

 

I have cloned this v1 demo application: https://github.com/miroapp/app-examples/tree/v1/drag-and-drop

Branch: v1

App: drag-and-drop

 

In file: index.js I commented the code from line 4 to line 28 and replaced it by:

miro.onReady(() => {
miro.initialize({
extensionPoints: {
toolbar: {
title: "The button title",
librarySvgIcon:
'<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
toolbarSvgIcon:
'<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
onClick: () => {
miro.showNotification("You clicked a toolbar item!");
},
},
},
});
});

Started the server using npx serve -p 8081, configured the app URL in the app settings (making sure the developer use it not a new one, as all new developer apps created are using the SDK v2). Installed the app on the developer team, opened a Miro board and I can see the app:

 

It seems to work on my side.

 

I have cloned this v1 demo application: https://github.com/miroapp/app-examples/tree/v1/drag-and-drop

Branch: v1

App: drag-and-drop

 

In file: index.js I commented the code from line 4 to line 28 and replaced it by:

miro.onReady(() => {
miro.initialize({
extensionPoints: {
toolbar: {
title: "The button title",
librarySvgIcon:
'<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
toolbarSvgIcon:
'<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
onClick: () => {
miro.showNotification("You clicked a toolbar item!");
},
},
},
});
});

Started the server using npx serve -p 8081, configured the app URL in the app settings (making sure the developer use it not a new one, as all new developer apps created are using the SDK v2). Installed the app on the developer team, opened a Miro board and I can see the app:

 

 

Thanks, seemed it was a caching problem in my case. I changed App URL to a new file and it worked fine.

 

Thanks Tom

We have switched our entry point from `bottomBar` to `toolbar` and it’s working now.

Userlevel 2
Badge

 

Thanks for raising this issue.

 

We will investigate and come back to you.

Meanwhile the workaround will be to change the extension point you use for another one. We do acknowledge that it is not ideal and are really sorry for the inconvenience.

 

Hey everyone! I just wanted to follow up and let you know that we found a bug, and a fix was rolled out this week. Theoretically, everything should be working as expected again, but please let us know if you’re still encountering any issues!

-Joanna

Reply