topic Customizing the Draw widget in ArcGIS Web AppBuilder Questions

Customizing the Draw widget

PingYang — Tue, 19 May 2015 21:53:52 GMT

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 Developers ,

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.

Peter

Re: Customizing the Draw widget

RebeccaStrauch__GISP — Tue, 19 May 2015 22:05:01 GMT

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.

Re: Customizing the Draw widget

QunSun — Wed, 20 May 2015 06:23:21 GMT

Ping, I download your Widget.html.zip 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.

Re: Customizing the Draw widget

PingYang — Thu, 21 May 2015 17:08:42 GMT

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)?

Thanks,

Re: Customizing the Draw widget

PingYang — Fri, 22 May 2015 16:17:36 GMT

Never mind,

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

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.push(map.graphics.graphics[0]);
featureSet.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.