Select to view content in your preferred language

Trigger widget button "onclick" event programmatically

Jump to solution
01-21-2022 04:23 PM
Labels (2)
MVP Regular Contributor

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 class="status" data-dojo-attach-point="iconItemStatus">


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




0 Kudos
1 Solution
2 Replies
MVP Regular Contributor

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 = + '_panel';
          panelConfig = dockableItem.getConfigForPanel();
            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)
            aspect.after(panel, 'onClose', lang.hitch(this, function(){


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.