topic Re: listen to event based on met criteria in Web AppBuilder Custom Widgets Questions

listen to event based on met criteria

LefterisKoumis — Mon, 06 Mar 2017 21:00:46 GMT

I have a number of check boxes that users can click on to activate a layer on each checkbox. After a number of check boxes clicked, I would like to capture the click event but not check the checkbox (stop any further actions), and inform the user that the max number of boxes is reached. If the user deselect a checkbox, then the functionality is restored again.

Suggestions? Thanks.

this.own(on(layerCheckbox.domNode, 'click', lang.hitch(this, function(){

if (numberofcheckboxes >5) //criteria met

{

--------------

} else {

})

Re: listen to event based on met criteria

RobertScheitlin__GISP — Mon, 06 Mar 2017 21:04:38 GMT

Lefteris,

That is normally what you would use dojo on.pausable for:

https://dojotoolkit.org/reference-guide/1.10/dojo/on.html#pausable

Re: listen to event based on met criteria

LefterisKoumis — Mon, 06 Mar 2017 22:41:43 GMT

Thank you Robert. However it is not to going to work for me. I modified my question because I realized that is not clear enough.

Re: listen to event based on met criteria

RobertScheitlin__GISP — Mon, 06 Mar 2017 23:02:23 GMT

Lefteris,

I would suggest you not spend time on trying to prevent the check. I would handle this by just un-checking the checkbox if the max checkbox count has been meet.

Re: listen to event based on met criteria

LefterisKoumis — Mon, 06 Mar 2017 23:48:06 GMT

Yes, you are correct. It seems to be too complex to prevent the check. However, I tried this below and it has no effect on the checkbox. The checkbox remains checked after the user clicked on it. The script below is from the function called when the user clicked on the checkbox, however it does not deselect the checkbox. The checkbox id has been assigned the layer name. Console shows false and the layer name meaning that the checkbox is correctly identified. Any obvious errors? Thank you.

if (numberoflayers > 4){
alert("Sorry, no more layers than 5 layer can be selected. Please remove a layer before you can add another one.")
var thestatus = registry.byId(layer.name);
thestatus.set("checked", false);

console.log(thestatus.checked + " " + layer.name);
return;
} else {
this.addLayerToMap(layer);
}

Re: listen to event based on met criteria

RobertScheitlin__GISP — Tue, 07 Mar 2017 00:08:42 GMT

Lefteris,

I have my checkboxes in my Widget.html file with data-dojo-attach-point property and use:

this.shareCbx.setValue(true);

if I want to check the checkbox

I tend to use the lightweight jimu/dijit/CheckBox though.

Re: listen to event based on met criteria

LefterisKoumis — Tue, 07 Mar 2017 16:24:21 GMT

Thanks. My checkboxes are constructed during design time and it seems to be a bit more complex to programmatically check or uncheck the boxes.

Re: listen to event based on met criteria

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:40:08 GMT

Lefteris,

If they are created at design time then that would make it pretty simple.

Widget.html

<div data-dojo-type="jimu/dijit/CheckBox" data-dojo-attach-point="allowCSVExport"
    data-dojo-props="label:'${nls.allowcsvexport}'"/>‍‍

Widget.js

this.allowCSVExport.setValue(false);‍

Re: listen to event based on met criteria

LefterisKoumis — Tue, 07 Mar 2017 16:39:54 GMT

Sorry, I mispoke.

The html file is in the form shown below, and in the js file I declare and create the checkboxes in each layerlist. I place each check box on a row in a table, similar to the AddLayer widget. By the way, how can I post code on the forum with the numbering?

<div data-dojo-type="dijit/layout/TabContainer" style=" height: 700px; " >
<div data-dojo-type="dijit/layout/ContentPane" title="General Environmental" >
<div data-dojo-attach-point="layerListGenEnv"> </div>
</div>
<div data-dojo-type="dijit/layout/TabContainer" title="Biology" nested="true">
<div data-dojo-type="dijit/layout/ContentPane" title="Fish" data-dojo-props="selected:true" style="">
<div data-dojo-attach-point="layerListFish"> </div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Wildlife">
<div data-dojo-attach-point="layerListWildlife"> </div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Vegetation">
<div data-dojo-attach-point="layerListVegetation"> </div>
</div>
</div>
---------
--------

Re: listen to event based on met criteria

RobertScheitlin__GISP — Tue, 07 Mar 2017 17:15:54 GMT

Lefteris,

So what does your Widget.js code look like for adding the checkboxes?

https://community.esri.com/people/curtvprice/blog/2014/09/25/posting-code-blocks-in-the-new-geonet

Re: listen to event based on met criteria

LefterisKoumis — Fri, 10 Mar 2017 22:53:34 GMT

I resolved the situation by using:

registry.byId(mycheckbox).setValue(false);

I don't know why the

registry.byId(mycheckbox).set("checked", false)

does not work.