Help with custom WAB DrawBox

RoySP — Sun, 12 Dec 2021 08:34:01 GMT

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!

Re: Help with custom WAB DrawBox

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:34:03 GMT

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.

Re: Help with custom WAB DrawBox

RoySP — Thu, 09 Jul 2015 19:55:47 GMT

That was it! I knew it was a simple tweak I was missing. Thanks Robert. You did it again

topic Re: Help with custom WAB DrawBox in Web AppBuilder Custom Widgets Questions

Help with custom WAB DrawBox

Re: Help with custom WAB DrawBox

Re: Help with custom WAB DrawBox