Trigger widget button "onclick" event programmatically

1743
2
Jump to solution
01-21-2022 04:23 PM
Labels (2)
LanceCole
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>
  <div class="status" data-dojo-attach-point="iconItemStatus">
  </div>
</div>

 

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

LanceCole_0-1642811141022.png

 

 

0 Kudos
1 Solution
2 Replies
LanceCole
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 = 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.