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;">
<div class="jimu-btn" data-dojo-attach-point="btnViewAmendAdd" data-dojo-attach-event="onClick:addDataShare">Add</div>
</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.
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>
Thanks I will try this approach and let you know how I get on. Thank you very much.