recreate WAB Tab Theme

[henrilebon974]

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.

[jcarlson]

Could you, perhaps, use a Section together with a Views Navigation?

Then you could just fiddle with the navigation button styles to make them look like tabs.

[henrilebon974]

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]

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 */}
<Link to="?views=view_4">
    <Button size="sm" onClick={this.myFunc}  className="float-right" css={[focusOutline]}>
            {this.props.intl.formatMessage({
              id: "open_widget",
              defaultMessage: defaultMessages.open_widget
            })}
     </Button>
  </Link>

[henrilebon974]

Thank Kevin.

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