AnsweredAssumed Answered

Issues in generating a ComboBox within WAB Widget

Question asked by typ_tracker on Oct 7, 2015
Latest reply on Dec 3, 2015 by natasha85

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

Outcomes