topic Dynamic controls on custom widget ESRI WAB in Web AppBuilder Custom Widgets Questions

Dynamic controls on custom widget ESRI WAB

wadsonmakari — Fri, 20 Dec 2019 11:45:47 GMT

I am developing a custom widget using WAB. Below is a snippet on what the UI will look like

The controls if the red box are dynamic in the sense that they are controlled by the 2 radio buttons above. The controls shown are relevant when the Boundary radio button is selected. However, when the user selects the Site radio radio button I would like to remove these controls and replace them with controls that are relevant to the Site option.

Currently I have these controls in html template file in a div

<table style="width:100%;">
<tbody>
<div data-dojo-attach-point="myDynamicDiv">
<tr>
<td style="text-align:right;width:87.5px;">Type:</td>
<td colspan="2" style="width:175px">
<select style="padding-right:5px;width:100%;" data-dojo-attach-point="viewAmendBoundaryType" data-dojo-attach-event="onChange:addVSPBoundaryNames" data-dojo-type="dijit/form/Select"/>
</td>
<td style="text-align:right;width:87.5px;">Name:</td>
<td colspan="2" style="width:175px">
<select style="padding-right:5px;width:100%;" data-dojo-attach-point="viewAmendBoundaryName" data-dojo-attach-event="onChange:addVSPBuffers" data-dojo-type="dijit/form/Select"/>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td style="text-align:right;width:87.5px;">Buffer:</td>
<td colspan="2" style="width:175px">
<select style="padding-right:5px;width:100%;" data-dojo-attach-point="viewAmendBoundaryBuffer" data-dojo-type="dijit/form/Select"/>
</td>
<td style="text-align:right;width:87.5px;">Buffer Type:</td>
<td colspan="2" style="width:175px">
<select style="padding-right:5px;width:100%;" data-dojo-attach-point="viewAmendBoundaryBufferType" data-dojo-type="dijit/form/Select"/>
</td>
<td colspan="2" style="text-align:center;">

</td>
</tr>
<tr>
<td colspan="8" style="padding:10px;">
<ul class="vspList"></ul>
</td>
</tr>
<tr>
<td colspan="8" style="width:100%">
<hr>
</td>
</tr>
</div>

</tbody>

</table>

When a user selects the Site radio button I would like to clear the contents of this div and replace them with the controls that are relevant for the Site option.

What is best approach to take? Anyone with a sample that does something similar?

I also need to be able to attach events on some of the controls.

I tried to dynamically build the controls using something like this

_buildBoundarySiteDiv: function(){

alert('here');
var html = '<tr>'+
'<td style="text-align:right;width:87.5px;">Type:</td>'+
'<td colspan="2" style="width:175px">'+
'<select style="padding-right:5px;width:100%;" data-dojo-attach-point="viewAmendBoundaryType" data-dojo-attach-event="onChange:addVSPBoundaryNames" data-dojo-type="dijit/form/Select"/>'+
'</td>'+
'<td style="text-align:right;width:87.5px;">Name:</td>'+
'<td colspan="2" style="width:175px">'+
'<select style="padding-right:5px;width:100%;" data-dojo-attach-point="viewAmendBoundaryName" data-dojo-attach-event="onChange:addVSPBuffers" data-dojo-type="dijit/form/Select"/>'+
'</td>'+
'<td></td>'+
'<td></td>'+
'</tr>';
//alert(html);

var myContent = domConstruct.toDom(html);

domConstruct.place(myContent,this.BoundarySiteDiv);

//alert('here 2');

The controls did not have the styling as shown in the image above. Any pointers will be much appreciated.

Re: Dynamic controls on custom widget ESRI WAB

KenBuja — Sun, 12 Dec 2021 09:00:07 GMT

I've done this in one of my widgets using css. I have two radio buttons to choose the method

My setting/css/style.css file contains this class

.spatial-prioritization-setting .esriCTHidden {
  display: none; }‍‍‍‍‍‍

I have two radio buttons in my Settings.html file with an onclick event

<form name="prioritizationMethod">
  <div class="esriCTDownloadTabTextbox">
    <input data-dojo-attach-point="radPrioritizationCoins" type="radio" class="jimu-radio-btn"
      name="prioritizationRadio" value="Coins"
      data-dojo-attach-event="onclick: _onPrioritizationMethodChange" />
    <label
      data-dojo-attach-point="labelPrioritizationCoin">${nls.prioritization.prioritizationCoins}</label>
  </div>
  <div class="esriCTDownloadTabTextbox">
    <input data-dojo-attach-point="radPrioritizationHigh" type="radio" class="jimu-radio-btn"
      name="prioritizationRadio" value="HML"
      data-dojo-attach-event="onclick: _onPrioritizationMethodChange" />
    <label data-dojo-attach-point="labelPrioritizationHigh">${nls.prioritization.prioritizationHigh}</label>
  </div>
</form>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And in my Settings.js, that onclick event adds or removes the class to my objects (and does some other things with the table)

_onPrioritizationMethodChange() {
  if (this.radPrioritizationCoins.checked) {
    html.removeClass(this.coinLimits, "esriCTHidden");
    html.addClass(this.HMLMethod, "esriCTHidden");
  } else {
    html.addClass(this.coinLimits, "esriCTHidden");
    this._prioritizationMethod = "Priority";
  }
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The item coinLimits that is being changed look like this

<div data-dojo-attach-point="coinLimits">
  <div class="esriCTDownloadTabInputContainer">
    <div class="esriCTDownloadTabLabel">
      ${nls.prioritization.allocatedCoins}
    </div>
    <div class="esriCTDownloadTabTextbox">
    <div data-dojo-attach-point="allocatedCoins" data-dojo-type="dijit/form/NumberTextBox"
      data-dojo-props="constraints:{min:1,places:0},style:{width:'100%'},value:100"></div>
    </div>
  </div>
  <div class="esriCTDownloadTabInputContainer">
    <div class="esriCTDownloadTabLabel">
      ${nls.prioritization.maximumCoinsPerCell}
    </div>
    <div class="esriCTDownloadTabTextbox">
      <div data-dojo-attach-point="maximumCoins" data-dojo-type="dijit/form/NumberTextBox"
      data-dojo-props="constraints:{min:1,max:100,places:0},style:{width:'100%'},value:10"></div>
    </div>
  </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Dynamic controls on custom widget ESRI WAB

wadsonmakari — Fri, 20 Dec 2019 17:33:02 GMT

Thanks I will try this approach and let you know how I get on. Thank you very much.