Disable button in custom widget

654
2
Jump to solution
07-07-2021 07:18 AM
KamranYusaf1
New Contributor III

Hi,

I am developing my own custom widget for use in WAB. I have this button:

 
      <div data-dojo-attach-event="onclick:_onExecute" class="jimu-btn" style=" text-align:center;">Redigér</div> 
    
 
which i would like to disable at onOpen . I tried giving it id and data-dojo-attach-point but i couldn't manage to disable the button. Can someone point me in the direction of how to achieve this?
 
What i am trying to achieve is to disable the button until i have made some checks.
 
Thanks
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

I have a function to enable my buttons that applies a jimu css class

  _enableBtn(btn, isEnable) {
    if (btn) {
      if (isEnable) {
        html.removeClass(btn, "jimu-state-disabled");
      } else {
        html.addClass(btn, "jimu-state-disabled");
      }
    }
  }

 Here's how I have a button set up in my html file:

<div data-dojo-attach-point="btnApplyCoins" id="coinsbtn" class="jimu-btn apply"
     data-dojo-attach-event="onclick:applyEdits" style="margin-top: 10px">
  ${nls.applyCoins}
</div>

And here's how I call the enable function

this._enableBtn(this.btnApplyCoins, isEnable);

View solution in original post

2 Replies
KenBuja
MVP Honored Contributor

I have a function to enable my buttons that applies a jimu css class

  _enableBtn(btn, isEnable) {
    if (btn) {
      if (isEnable) {
        html.removeClass(btn, "jimu-state-disabled");
      } else {
        html.addClass(btn, "jimu-state-disabled");
      }
    }
  }

 Here's how I have a button set up in my html file:

<div data-dojo-attach-point="btnApplyCoins" id="coinsbtn" class="jimu-btn apply"
     data-dojo-attach-event="onclick:applyEdits" style="margin-top: 10px">
  ${nls.applyCoins}
</div>

And here's how I call the enable function

this._enableBtn(this.btnApplyCoins, isEnable);
KamranYusaf1
New Contributor III

Hi @KenBuja ,

This was exactly what i needed! Only thing that missed was to add the module 

dojo/_base/html
I found that from one of Your other answers:)
 
Thanks alot!
0 Kudos