topic Re: JavaScript Sample to widget in Web AppBuilder Custom Widgets Questions

JavaScript Sample to widget

DaveOrlando — Wed, 28 Oct 2015 22:58:31 GMT

Hello,

I'm trying to build my first widget (while teaching myself JavaScript at the same time) and I'm using this JavaScript sample to perform a simple query Query data without a map | ArcGIS API for JavaScript

I've got the query working alright, I put the code in the startup function. I can see the data is being returned by using alert(resultItems) but I can't wrap my head around how to get the results into a list in the side-panel. right now the panel only contains the mapIdNode example and I've hardcoded query.where so I'm just hoping to the results to display as a list or list box, combo box, anything

Of course the sample is using one file and the widgets use multiple and this is where I don't know how to connect the two.

one successful example will get me off to the races, I've self taught myself every other language ESRI has thrown at us (aml, avenue, python, xaml.....)

Thanks,

GISr turned developer

Re: JavaScript Sample to widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:58:41 GMT

Dave,

The path to understanding widget development in WAB is to understand dojo templated widgets. The widgets template has HTML or dojo dijits/widgets in it that have a data-dojo-attach-point this is what you use in the Widget.js to get access to the HTML object.

Example:

Widget.html

<div>
  <div data-dojo-attach-point="selectedBasemapGalleryDiv" style="width:100%;height:100px;">
  </div>
</div>

Widget.js

myFunction: function() {
  domConstruct.create('div', {
    'class': 'bm-addbtn',
    'id': 'someid',
    'title': 'hello world'
  }, this.selectedBasemapGalleryDiv);
}

So you can see in this example you get access to templated objects using "this" keyword dot the data-dojo-attach-point.

You also see the use of dojos domConstruct class to create basic html element in code.

Let me know if you need more.

Re: JavaScript Sample to widget

DanielStoelb — Thu, 29 Oct 2015 18:03:00 GMT

If you have the data in a deferred list and want to display it as items within the widget itself, I'd suggest creating a dom ID element in the widget.html file as Robert indicated above. Then you could have the inidvidual items from the list within the widget.js file like the example I have below (from a tool I'm building), where I'm assigning a string value to a variable that then calls and sets the dom element:

idstring = "Results: <br/>" +

"<br />Number of Hospitals: " + Hosp.length +

"<br />Number of Medical Providers: " + Med.length +

"<br />Number of Schools: " + schools.length;

dom.byId("results").innerHTML = idstring;

Basically, the widget.html file indicates what is shown on the screen and the widget.js is the underlying code for tasks that are performed by the widget. Items within the html file are referred to as dom elements and can be referenced as shown in Robert's and my examples.

I'd suggest looking up this for more details: Dojo Toolkit Reference Guide — The Dojo Toolkit - Reference Guide

Re: JavaScript Sample to widget

DaveOrlando — Sun, 12 Dec 2021 08:58:43 GMT

Thanks Robert, I got it working with the domConstruct as you suggested, but I had to hardcode some items to display.

var items = ['one', 'two', 'three', 'four'];
var listBox = domConstruct.create("select", null, this.queryList);
array.forEach(items, function (data) {
domConstruct.create("option", { innerHTML: data }, listBox);
});

It took a while to realize that showResults can't see this.anything Very confusing Can you explain why and what to do with the results? I've seen a few of your responses with that lang.hitch..... is this an example where I should use this?

Thanks again,

Re: JavaScript Sample to widget

RobertScheitlin__GISP — Fri, 30 Oct 2015 18:44:27 GMT

Dave,

Absolutely, using lang.hitch is the way to preserve the scope of the "this" object.