HI m making use of the drawbox dijit but I dont want my users to have access to all the drawing options.
After looking at the drawbox dijit it seems I just want to call "this.drawBox.activate('EXTENT')" then I can do stuff _onDrawComplete.
but Im not sure why I cant call my function from the HTML.
Hers my js, Im trying to call the grabArea function from my HTML
define(['dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'dojo/_base/html',
'dojo/_base/lang',
'dojo/on',
'jimu/dijit/drawbox',
],
function(declare, BaseWidget, _WidgetsInTemplateMixin, html, lang, on, Drawbox) {
var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-JimDrawbox',
name: 'JimDrawbox',
drawBox: null,
_initStuff: function(){
this.drawBox = new Drawbox;
},
postCreate: function() {
this.inherited(arguments);
this._initStuff();
this.drawBox.setMap(this.map);
this.drawBox.types = ["EXTENT"];
this.drawBox.keepOneGraphic = true;
this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));
console.log(this.drawBox.types)
//this.drawBox.activate('EXTENT')
},
grabArea: function() {
this.drawBox.activate('EXTENT')
},
_onDrawComplete: function(graphic) {
var geometry = graphic.geometry;
console.log(geometry);
}
});
And here's my HTML
<div>
<button class ="button" onclick="this.grabArea()">Click to draw extent</button>
</div>
I just keep getting
Uncaught TypeError: this.grabArea is not a function
at HTMLButtonElement.onclick
So it seems my grabArea function isnt visible to the HTML at that point, but I'm not sure why.
JS isnt my main language so Im struggling a bit to resolve it.
Finding WAB one of the hardest frameworks I've come across to decipher so far...
Solved! Go to Solution.
I tried removing the html from the DrawBox template, but that broke the select tool. My solution was as follows:
in the Widgets.js file (path: \widgets\Draw\Widgets.js), I went to the function when the Widget opens "onOpen: function()" right after "this.customDrawToolTips();", I created the following code:
//This function below removes all types of drawing that are not to appear to the user for the Measurement Tool
let drawTypes = document.getElementById('jimu_dijit_DrawBox_1').children[0].children;
let drawOptions = Array.from(drawTypes);
drawOptions.forEach(el => {
if(
el.classList.contains('line-icon') == true || el.classList.contains('polyline-icon') == true ||
el.classList.contains('circle-icon') == true || el.classList.contains('polygon-icon') == true
) {
el.style.display = 'block';
} else {
el.style.display = 'none'
}
});
. In the "if" I put only the options that I wanted to keep appearing for the user, the else for any classlist different from the if parameter.
"drawTypes" I took the child of the child, I checked the classlist attribute printed in the "console.log", because each icon has its unique classlist pattern. Follow the example, I hope I have helped new developers with questions about how to do it.