AnsweredAssumed Answered

Dynamic controls on custom widget ESRI WAB

Question asked by wmakari on Dec 20, 2019
Latest reply on Dec 20, 2019 by wmakari

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.

Outcomes