topic Re: recreate WAB Tab Theme in ArcGIS Experience Builder Questions

recreate WAB Tab Theme

henrilebon974 — Mon, 14 Jun 2021 09:33:18 GMT

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.

Re: recreate WAB Tab Theme

jcarlson — Mon, 14 Jun 2021 13:22:16 GMT

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.

Re: recreate WAB Tab Theme

Anonymous User — Mon, 14 Jun 2021 13:51:26 GMT

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>

Re: recreate WAB Tab Theme

henrilebon974 — Mon, 14 Jun 2021 17:18:56 GMT

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.

Re: recreate WAB Tab Theme

henrilebon974 — Tue, 15 Jun 2021 07:17:41 GMT

Thank Kevin.

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