This should be pretty simple but I know I am missing something. My custom DrawBox does not load on my widget. The widget just shows the loading icon
I want to basically modify the DrawBox dijit to use in a custom widget. More specifically, all I want is to show just 3 drawing options. Point, Line and Polygon.
I am testing this widget in the Demo Widgets app and my custom widget is in widgets/samplewidgets
I copied DrawBox.html and DrawBox.js into MyWidget folder
I have it all setup but the widget wont load. Here's my Widget.html
<div> <label>${nls.selectParcelsLabel}</label> <br> <!-- <div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props='types:["point","polyline","polygon"],showClear:false' style="margin-top:5px;"></div> --> <div data-dojo-attach-point="drawBox" data-dojo-type="widgets/samplewidgets/MyWidget/DrawBox" data-dojo-props='types:["point","polyline","polygon"],showClear:false' style="margin-top:5px;"></div> <br> <div class="jimu-btn clear-btn" data-dojo-attach-event="onclick:_onBtnClearClicked">${nls.clearButton}</div> </div>
And here's my Widget.js
define(['dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'jimu/utils', './DrawBox', 'jimu/dijit/ViewStack', 'esri/tasks/GeometryService', 'esri/config', 'esri/graphic', 'esri/graphicsUtils', 'esri/geometry/Point', 'esri/geometry/Polyline', 'esri/geometry/Polygon', 'esri/symbols/SimpleMarkerSymbol', 'esri/symbols/SimpleFillSymbol', 'esri/renderers/SimpleRenderer', 'esri/renderers/jsonUtils', 'esri/toolbars/draw', 'esri/request'], function(declare, _WidgetsInTemplateMixin, BaseWidget, esriConfig, utils, DrawBox, ViewStack, GeometryService, config, graphic, graphicsUtils, Point, Polyline, Polygon, SimpleMarkerSymbol, SimpleFillSymbol, SimpleRenderer, jsonUtils, draw, request, jimuUtils) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget, _WidgetsInTemplateMixin], { // Custom widget code goes here baseClass: 'jimu-widget-mywidget', //this property is set by the framework when widget is loaded. name: 'MyWidget', //methods to communication with app container: postCreate: function() { this.inherited(arguments); this.drawBox.setMap(this.map); }, onClose: function() { this.drawBox.deactivate(); }, _onBtnClearClicked: function() { this.drawBox.clear(); }, }); });
I modified DrawBox.html in the MyWidget folder like so. Basically commented out what I dont need
<div style="position:relative;width:100%;"> <div class="draw-items"> <div title="${nls.point}" data-geotype="POINT" data-commontype="point" class="draw-item point-icon"></div> <div title="${nls.line}" data-geotype="LINE" data-commontype="polyline" class="draw-item line-icon"></div> <!-- <div title="${nls.polyline}" data-geotype="POLYLINE" data-commontype="polyline" class="draw-item polyline-icon"></div> --> <!-- <div title="${nls.freehandPolyline}" data-geotype="FREEHAND_POLYLINE" data-commontype="polyline" class="draw-item freehand-polyline-icon"></div> --> <!-- <div title="${nls.triangle}" data-geotype="TRIANGLE" data-commontype="polygon" class="draw-item triangle-icon"></div> --> <!-- <div title="${nls.extent}" data-geotype="EXTENT" data-commontype="polygon" class="draw-item extent-icon"></div> --> <!-- <div title="${nls.circle}" data-geotype="CIRCLE" data-commontype="polygon" class="draw-item circle-icon"></div> --> <!-- <div title="${nls.ellipse}" data-geotype="ELLIPSE" data-commontype="polygon" class="draw-item ellipse-icon"></div> --> <div title="${nls.polygon}" data-geotype="POLYGON" data-commontype="polygon" class="draw-item polygon-icon"></div> <!-- <div title="${nls.freehandPolygon}" data-geotype="FREEHAND_POLYGON" data-commontype="polygon" class="draw-item freehand-polygon-icon"></div> --> <!-- <div title="${nls.text}" data-geotype="POINT" data-commontype="text" class="draw-item text-icon" data-dojo-attach-point="textIcon"></div> --> <span class="drawings-clear jimu-float-trailing" data-dojo-attach-point="btnClear">${nls.clear}</span> </div> </div>
No changes were made to DrawBox.js
Can someone help me why my DrawBox wont load?
I am sure I am missing something.
Thanks!
Solved! Go to Solution.
Roy,
Well one of the first things is the fact that you did NOT change anything in the DrawBox.js.
'dojo/text!./templates/DrawBox.html', if your folder structure does not have a widgets/samplewidgets/MyWidget/templates folder than this is an issue.
And assuming you have added:
selectParcelsLabel: "Select Parcels", clearButton: "Clear"
to your widgets/samplewidgets/MyWidget/nls/strings.js
you should be good to go.
Roy,
Well one of the first things is the fact that you did NOT change anything in the DrawBox.js.
'dojo/text!./templates/DrawBox.html', if your folder structure does not have a widgets/samplewidgets/MyWidget/templates folder than this is an issue.
And assuming you have added:
selectParcelsLabel: "Select Parcels", clearButton: "Clear"
to your widgets/samplewidgets/MyWidget/nls/strings.js
you should be good to go.
That was it! I knew it was a simple tweak I was missing. Thanks Robert. You did it again