topic Re: Editor and Templatepicker Creation in Custom Widget in ArcGIS Web AppBuilder Questions

Editor and Templatepicker Creation in Custom Widget

MargoBlosser1 — Tue, 09 May 2017 20:33:08 GMT

I am creating a custom Widget that is added to a WAB Developer Edition application. I am adding the editor and template widget to a bodyPanel div.

My main widget – GeoCapture gets loaded through the config.json inclusion. The GeoCapture Widget loads a dropdown menu that allows a uses to select what they want to do – 1) Add New Feature 2) Select Existing Feature.

Depending on the menu pick a second widget is created that has the UI for either 1) Add New Feature 2) Select Existing Feature.

For the Add New Feature widget:

1) I create and startup the search widget

2)Create the editor and templatepicker widgets and start the widgets.

I do not get the templatepicker templates displayed after editor and templatepicker widgets have been created (see image).

In the debugging tools for the AddWidget around line 201, I can see that at “featureLayers: templateLayers,” I have layers.

I suspect that the issue is that the editor and template picker are not getting instantiated and are not running widget startup on the map onLoad event. I likely need to do something like this “this.map.on("Load", lang.hitch(this, 'editWidgetCreate'));” to my Add New Feature widget. But I am not sure how to hitch to a separate widget.

Thanks in advance for any suggestions!

-Margo

Re: Editor and Templatepicker Creation in Custom Widget

ScottLehto2 — Wed, 10 May 2017 15:08:28 GMT

I was wondering/fighting something similar, but you are far ahead of me. Newbie question. How did you know how to create a panel div where you could bring the editor and template picker div's in? I was looking to do something similar and i'm just getting started. Any suggestions or references would be very helpful.

Re: Editor and Templatepicker Creation in Custom Widget

RobertScheitlin__GISP — Wed, 10 May 2017 15:08:57 GMT

Margo,

The map is long since loaded once your widget is created so you will never get a map.on load event fired inside your widget.

Re: Editor and Templatepicker Creation in Custom Widget

MargoBlosser1 — Wed, 10 May 2017 15:28:03 GMT

Scott,

Make a templated widget and load your UI. Look at 'dojo/text!./widget.html','dojo/text!./themes/uiAdd.html','dojo/text!./themes/uiSelect.html', in the require statement. Think of the widget.html as the main html. I then load the different UIs when I load the widgets that I want.

I had to load the editor template during the map load event to get it to work.

I was hopping to be able to hitch the map load event to the Add widget scope but not sure how to do it so I created work around and loadded editor widget during map load event and swap out UIs from view created during load.

here is a snippet of my Widget UI

<div id="MenuNode" data-dojo-attach-point="MenutNode">
<div class="headerPanel">
<table>
<tr width="300px">
<td style="padding:10px;">
<font color="white">Step 1. Select Input Method</font>

</tr>
</table>
<div>

</div>

</div>
<div class="bodyPanel" style="height:auto">
<table align="center" style="padding:10px;">

<tr>

<td style="padding:5px;">
<select data-dojo-type="dijit/form/FilteringSelect" id="fruit" name="fruit" style="" data-dojo-attach-event="onChange:uiSelector">
<option value="Add">Add New Feature</option>
<option value="Select">Select Existing Feature</option>
<option value="Update">Update Features</option>
</select>
</td>
<td></td>

</tr>

</table>
</div>

Hope this helps!

-Margo

Re: Editor and Templatepicker Creation in Custom Widget

ScottLehto2 — Wed, 10 May 2017 19:44:02 GMT

Thank you. This will help. A couple more newb questions if you don't mind. In the JavaScript file you reference the

domConstruct.empty(this.ResultsNode); is this a node that is created by this line of code or is this referring to an HTML element declared in your widget.html file?

And when you say your main widget – "GeoCapture gets loaded through the config.json inclusion.", How can one get information on that?lol.