Question of Creating a Simple Widget

2119
2
Jump to solution
04-19-2016 01:24 PM
JakeCliffton
New Contributor III

I am creating a simple widget with the same function as the following link:

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=query_nomap

I just want to open this widget, click one button to do the query,  and display the query results inside the widget pane (I will use a different url later). Here are my codes for widget.js and widget.html. I am confused why my codes are not working. My question is how to make the results display in the widget.html or widget pane? Why the JS API codes are not working in the return declare () method?  Any hints are very helpful. BTW, I don't have setting files or manifest json files. Thanks!

widget.js as the following:

define(['dojo/_base/declare', 'dojo/_base/array', 'jimu/BaseWidget','dojo/dom', 'dojo/on',
        'esri/tasks/query', 'esri/tasks/QueryTask', 'dojo/domReady!'],
function(declare, array, BaseWidget,dom, on, Query, QueryTask) {
  return declare([BaseWidget], {
    baseClass: 'jimu-widget-widgetb',
       var queryTask = new       QueryTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
        var query = new Query();
        query.returnGeometry = false;
        query.outFields = [
          "SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
          "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
          "MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
          "HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
          "AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
        ];
        on(dom.byId("execute"), "click", execute);
        function execute () {
          query.text = dom.byId("stateName").value;
          queryTask.execute(query, showResults);
        }
        function showResults (results) {
          var resultItems = [];
          var resultCount = results.features.length;
          for (var i = 0; i < resultCount; i++) {
            var featureAttributes = results.features.attributes;
            for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
            }
            resultItems.push("<br>");
          }
          dom.byId("info").innerHTML = resultItems.join("");
      });
});

widget.html

<div>

<input type="text" id="stateName" value="California">

    <input id="execute" type="button" value="Get Details">

    <br />

    <div id="info" style="padding:5px; margin:5px; background-color:#eee;">

    </div>

</div>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Jake,

  Your main issue is that your code was not in a main widgets function like postcreate or startup. I also updated your code to use the stand methods for access template elements and global vars.

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Jake,

  Your main issue is that your code was not in a main widgets function like postcreate or startup. I also updated your code to use the stand methods for access template elements and global vars.

JakeCliffton
New Contributor III

Thank you so much!

0 Kudos