Customizing the Draw widget

05-19-2015 02:53 PM
New Contributor II

I plan to customize the Draw widget that default from web AppBuilder, I plan to do is copy code from Clip and ship | ArcGIS API for JavaScript to the existing Draw widget, however, I didn't make it working.

How can I add the function in the "require" (from the HTML) into the "function" (stemapp\widgets\Draw\Widget.html), I tried to add them in the front, however, I kept getting the message "can not create widget" when re-starting the app. Has anyone have experiences?

I looked at the page from the tutorial: Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer... ,

Is there a better way to show my change for the application? currently I am doing is first remove the draw widget from the edit and then add a new one, however, it is kind of slow.

Look forward to hearing from you.


0 Kudos
4 Replies
MVP Esteemed Contributor

Before you start creating a custom draw widget, have you looked to see what is already out there?

Enhanced Draw Widget

eDraw widget

Also, check out Web AppBuilder Developer Edition – Customization Resource List​ for a list of other custom widgets and links to help docs for creating your own custom widgets.

by Esri Contributor
Esri Contributor

Ping, I download your file.


Widget.html is the template file of Widget. You should follow the  spec about how to develop template-based dijit.

1. You edit Widget.html, but it is not intact. The whole Widget.html should in only one root element, such as <div> tag. In your Widget.html, it begins with <div> tag, but it doesn't end with </div>. So It is an invalid Widget.html and dojo can't parse it.

2. You should not write any JavaScript in Widget.html. So <script> tag is forbidden in Widget.html. You should migrate the JavaScript into Widget.js.

3. <button id="extract" data-dojo-type="dijit/form/Button" onclick="extractData()">Extract Data</button>

This code also has some issues. You should uses data-dojo-attach-point instead of id in Widget.html. You should uses data-dojo-attach-point="click:extractData" instead of onclick="extractData()" and add a new method 'extractData' in Widget.js. At last, make sure you requre 'dijit/form/Button' in your Widget.js.

New Contributor II

Qun Sun

I checked the resources that from the eDraw widget

and follow your suggestions, however, I still have the problem.

How can I the follow the spec that you mentioned(where can I find them, for e.g., if I want to add a button to the widget, how many step I should go through)?


0 Kudos
New Contributor II

Never mind,

I think now it is working, instead use button, I copied from the eDraw example

<input type="button" class="jimu-input blue-button" value="${nls.extract}" data-dojo-attach-event="ondijitclick:extractData"/>

and add the extratData function in the Widget.js but I didn't included 'dijit/form/Button' because there is no require keywork anymore.

I am kind of still struggling in simplifying the eDraw example widget this time. What I plan to do is not that complex but:

1) Draw polygon on the map

2)Turn the draw result (graphics) into feature set(I have seen some code like this:

var featureSet = new FeatureSet();
var features = [];
.features = features;

However I couldn't figure out how can I accommodate this code into the existing example.

Has anyone done this before?

Thank you all for so many help.

0 Kudos