setCustomPanel sample

Technical Support WebViewer
, , ,
1

WebViewer Version: 11.11.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? No

Please give a brief summary of your issue:

Hi, I am trying to use setCustomPanel, and my expectation is in the left panel there should be a new tab added given the tab properties I pass in. And on click of that tab I should see a component render in this left panel given the panel render function I set. To start, I am pasting in the sample from the docs and this isn’t working:
```
var myCustomPanel = {
tab:{
dataElement: ‘customPanelTab’,
title: ‘customPanelTab’,
img: ‘/favicon-32x32.png’,
},
panel: {
dataElement: ‘customPanel’,
render: function() {
var div = document.createElement(‘div’);
div.innerHTML = ‘Hello World’;
return div;
}
}
};

instance.UI.setCustomPanel(myCustomPanel);

});

```

I am calling setCustomPanel after WebViewer init, any thoughts to get a tab added correctly to my left panel?

Thanks,
Makoa

3

Hello Makoa,

Thank you for contacting WebViewer Forums.

The setCustomPanel() API is used for Legacy UI. Starting in WebViewer v11, the default uses Modular UI. For more information on customizing Modular UI panels, see our documentation here: Modular UI Panels | Apryse documentation

Regards,
Luke

4

Thanks for the clarification, I was able to add my panel using the newer methods shared.

Thanks,
Makoa