Hi everyone,
I am pretty new to WAB and Javacript development with Dojo. My plan is to generate a dynamic Combobox out of feature-layer attributes. On click the widget should add that specific feature-layer with the chosen layerexpression. e.g. Country selection ComboBox: "USA" -> Zoom on USA.
I got this to work in a standalone Javascript api, but now i'd like to include this into my WAB1.2 functionality set as a widget and I ran into several Dojo issues which I am not familiar with.
Basically I started a new widget from scratch:
Widget.js
define([
'dojo/_base/declare',
'jimu/BaseWidget',
'jimu/ConfigManager',
"jimu/WidgetManager",
'esri/layers/FeatureLayer',
"dijit/form/Select",
"dojo/query",
"dojo/ready",
"dijit/form/ComboBox",
"dojo/data/ItemFileReadStore",
"dojo/_base/array",
"dojo/on"
],
function(
declare,
BaseWidget,
ConfigManager,
WidgetManager,
FeatureLayer,
Select,
query,
ready,
ComboBox,
ItemFileReadStore,
array,
on
) {
return declare([BaseWidget], {
baseClass: 'definition_query',
onOpen: function () {
function init() {
queryTask = new esri.tasks.QueryTask
("https://.../MapServer/0");
query = new esri.tasks.Query();
query.returnGeometry = false;
query.outFields = ["NAME"];
query.where = "NAME<> ''";
queryTask.execute(query,populateList);
}
function populateList(results) {
//Populate the ComboBox with unique values
var zone;
var values = [];
var testVals={};
//Add option to display all zoning types to the ComboBox
values.push({name:"ALL"})
//Loop through the QueryTask results and populate an array
//with the unique values
var features = results.features;
dojo.forEach (features, function(feature) {
zone = feature.attributes.NAME;
if (!testVals[zone]) {
testVals[zone] = true;
values.push({name:zone});
}
});
//Create a ItemFileReadStore and use it for the
//ComboBox's data source
var dataItems = {
identifier: 'name',
label: 'name',
items: values
};
var store = new dojo.store.Memory({data:dataItems});//tried to work with ItemFileReadStore before, but couldn't get it to work either
console.log(dataItems);
console.log(store);
dijit.byId("mySelect").set('store', store);
}
dojo.addOnLoad(init);
},
});
});
TypeError: dijit.byId(...) is undefined
dijit.byId("mySelect").set('store', store);
My Issue is dijit.byId won't be interpreted. What kind of modules am I missing? I am unsure how to figure out which of the modules are necessary for this job.
As mentioned, pretty much the same code works on plain javascript api. There are several working examples on JS but I couldn't manage to convert them into WAB. Maybe there is already a widget that has similar functionality?
HTML:
<select id="mySelect" dojoType="dijit.form.ComboBox" style="width:300px;font-size:18px;" value="Select Zoning Type"></select>
Thanks for advice