recreate WAB Tab Theme

Question

Hello,

I would like to recreate the WAB Tab Theme. I'm not sure if it is possible with the widget Controller widget or the Views Navigation widget.

I would like create an other widget to show/hide widgets on a sidebar. I try to use the WidgetManager but the method closeWidget doesn't remove the dom of the target widget (screenshot below). And I don't know how catch the onClose event on the target widget.

Could you help me please.

henrilebon974 · Answer

Thank Kevin.

I think this approach is a pretty way. I'm going to work around that.

henrilebon974 · Answer

Thank Josh.

I tried that but I cannot catch the close event in the widgets. For example if we use a drawing tool with an editor widget when the user open an other widget the drawing tool is not closed.

Regards.

Anonymous User · Answer

I only briefly looked into opening / closing a widget that lives inside a widget controller. I believe you need to do something like having the widget controller open the panel. From the WAB days, if I recall correctly, the PanelManager was part of the app at large. I believe (and could be wrong), that the Panel becomes a child to the widget controller inside ExB, a subtle difference. Basically I got to the point where I could open a widget in the controller if I had already opened it manually (meaning the manual part to initialize the panel as part of the controller). I didn't get the code part of this workflow worked out. Here is a copy/paste of how far I got. openWidget = () =>{ const myWidgetURI = 'widgets/my-widget/'; const widgets = getAppStore().getState().appConfig.widgets; let widgetid = "" Object.keys(widgets).forEach(function(w) { if (widgets[w]['uri']){ if (widgets[w]['uri'] == myWidgetURI){ widgetid = widgets[w]['id'] } } }); const wm = WidgetManager.getInstance() wm.loadWidgetClassByUri(myWidgetURI).then((e) => { console.log("it loaded:", e) const activate = appActions.activateWidget(widgetid) getAppStore().dispatch(activate); //wm.openWidget(widgetid) //no effect return; } We abandon that approach as the app went in another direction. We pushed the widgets into a Views Navigation, much like Josh proposes. Switching from the controller to the views made more sense as we have a stepped through workflow. Inside each view we just have an entire widget. Moving from one view to the next is pretty straight forward with a button. Eg: import { Button, Link } from "jimu-ui"; {/* update the 4 to whatever number in your view */}