topic Trigger widget button "onclick" event programmatically in ArcGIS Web AppBuilder Questions

Trigger widget button "onclick" event programmatically

LanceCole — Sat, 22 Jan 2022 00:27:18 GMT

I am experimenting the the WAB Launchpad theme and would like to open/close various widgets programmatically. I have attempted to fire the onclick event in the following code but cannot seam to access the needed node. I am not a web developer and only have a little experience with JavaScript and none using dojo.

Also, I can understand how to access the widget information when using "this" in the widget code itself, but how do you access "this" for the widget from outside the widget. I have experimented with the dom but the onclick event is not accessible via my crude attempts.

The HTML code excerpt is from one of the widgets on the AnchorBarControler

Re: Trigger widget button "onclick" event programmatically

AnjulPandey — Sat, 22 Jan 2022 11:58:04 GMT

@LanceCole

Please refer to this post for assistance.

https://developers.arcgis.com/web-appbuilder/sample-code/close-widget-programmatically.htm

https://developers.arcgis.com/web-appbuilder/api-reference/widgetmanager.htm

Re: Trigger widget button "onclick" event programmatically

LanceCole — Mon, 24 Jan 2022 00:49:12 GMT

Thanks @AnjulPandey ,

You got me going in the right direction for what I needed. I want to be able to use the Launchpad Theme but with only one widget open at any time. Made a few modifications based upon the info you provided and have it crudely working. Need to do a lot of clean up.

themes\LaunchpadTheme\widgets\AnchorBarController\config.json - added the following code:

{ "singleWidgetPanel": true }

themes\LaunchpadTheme\widgets\AnchorBarController\widget.js - added lines 6-10 (near 650 in source of the _onDockableNodeClick method)

panelId = dockableItem.config.id + '_panel'; if(dockableItem.isOpen){ dockableItem.setPanelIndex(this._calPanelIndex()); panelConfig = dockableItem.getConfigForPanel(); if(this.config.singleWidgetPanel){ this.openedIds.forEach(function (widgetId){ this.panelManager.closePanel(widgetId + "_panel"); }, this); } this.panelManager.showPanel(panelConfig).then(lang.hitch(this, function(panel){ console.log("position: ", panelConfig.panel.position) panel.setPosition(panelConfig.panel.position); aspect.after(panel, 'onClose', lang.hitch(this, function(){ dockableItem.setOpened(false); this._removeFromOpenedIds(dockableItem.config.id); if(dockableItem.iconItemNode){ dockableItem.iconItemNode.focus(); } })); }));

themes\LaunchpadTheme\widgets\AnchorBarController\BaseIconItem.js - set position.index = 0 on line 5. Will clean this up later to use the config settings.

getConfigForPanel: function(){ var panelConfig = lang.clone(this.config); panelConfig.backgroundColor = this.getColor(); panelConfig.panel.position = this._initPosition(); panelConfig.panel.position.index = 0; //this.panelIndex; return panelConfig; },

As noted previously I am not a developer and have no experience with Dojo and only a little with JavaScript. Open to input and revision suggestions.