Community

I just want to use part of the drawbox dijit but cant call my function from the widget HTML

2502
20
Jump to solution
08-22-2019 04:16 AM
JamesHone1
by
New Contributor III
‎08-22-2019 04:16 AM

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...

0 Kudos
20 Replies
DanielWallaws
by
New Contributor
‎02-13-2023 12:50 PM 
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.

 

0 Kudos