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.
<div class="jimu-anchorbar-iconitem jimu-float-leading" id="uniqName_11_0" widgetid="uniqName_11_0" settingid="widgets_Legend_Widget_18" style="margin-left: 7px;">
<div role="button" class="icon-item icon-item-background0 dockable" data-dojo-attach-point="iconItemNode" data-dojo-attach-event="onclick:_onNodeClick,onkeydown:_onNodeKeydown" tabindex="3801" aria-label="Legend" style="width: 40px; height: 40px;">
<img class="icon" src="/webappbuilder/apps/14/widgets/Legend/images/icon.png?wab_dv=2.23" data-dojo-attach-point="imgNode" alt="Legend" style="width: 20px; height: 20px;">
</div>
<div class="status" data-dojo-attach-point="iconItemStatus">
</div>
</div>
The HTML code excerpt is from one of the widgets on the AnchorBarControler
Solved! Go to Solution.
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.