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.
Peter
Before you start creating a custom draw widget, have you looked to see what is already out there?
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.
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.
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,
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.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.