AnsweredAssumed Answered

Return Results Options

Question asked by jay.kapalczynski on Mar 30, 2017
Latest reply on Mar 30, 2017 by jay.kapalczynski

I have an app that has a few different queries that query the same data...it then places this data in DIV

<div id="inforesults">Results:</div>

 

Everything seems to be working fine I just desire more functionality.  What I would like to do is:

  • Move the data into a table format that has sorting
  • Allow the user to select a record and highlight the map and visa versa.

 

Just not sure where to go from here.  What are my options for a results container that would achieve this.  Maybe something that I can easily stylize with CSS

 

   // QUERY FOR County and Squad 
   var queryTask = new QueryTask("https://xxxx/arcgis/rest/services/Projects/xxxx/FeatureServer/5");
   var query = new Query();
   query.outSpatialReference = {wkid:4326}; //4326 //102100 //3857
   query.returnGeometry = true;
   query.outFields = ["*"];

    on(dom.byId("executeCountySquad"), "click", executeCountySquad);
    function executeCountySquad () {
        query.where = "County_Nam = '"+ (dom.byId("CountyName").value) +"' AND Squad = '"+ (dom.byId("Squad").value) +"' ";
     queryTask.execute(query, showResultsCountySquad);
    }
    function showResultsCountySquad (results) {
     var resultItems = [];
        var resultCount = results.features.length;
         alert(resultCount)
         for (var i = 0; i < resultCount; i++) {
            var featureAttributes = results.features[i].attributes;
            for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
            }
            resultItems.push("<br>");
        }
        dom.byId("inforesults").innerHTML = resultItems.join(""); 
    }


//======================================================

<input id="executeCountySquad" type="button" value="Get Details County Squad">                          
<div id="inforesultsCountySquad" style="padding:5px; font-size:8px; height:Auto; margin:5px; background-color:#eee;">Results:</div>          
                    

Outcomes