Using Pagination with Query without Map

MeleKoneya · ‎10-27-2016

I have created a simple query task using this sample:

https://developers.arcgis.com/javascript/3/jssamples/query_nomap.html

I would like to be able to use the Pagination in our ArcGIS Server 10.3.1 Map services. I have been able to use pagination with the Search Widget in a map, but would like to use the same type of auto complete without a map and return certain fields.

I have been trying to combine the search widget and a query task without much success.

Does anyone have a sample of doing this?

Thanks,

Mele

RobertScheitlin__GISP · ‎11-03-2016

Mele,

Here it is:

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Query State Info without Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
<style>
    html,
    body,
    #search {
        display: block;
        cursor: pointer;
        margin: 5px;
    }
</style>
<script>
    var fl;
    require([
        "dojo/dom", "dojo/on", "dojo/_base/lang",
        "esri/dijit/Search", "esri/layers/FeatureLayer", "dojo/_base/array", "dojo/domReady!"
    ], function(dom, on, lang, Search, FeatureLayer, array) {

        var URL = "https:myServer//rest/services/MyService/MapServer/25"
        fl = new FeatureLayer(URL);
        var search = new Search({
            sources: [{
                featureLayer: fl,
                searchFields: ["fulladdr"],
                displayField: "fulladdr",
                exactMatch: false,
                outFields: ["fulladdr", "parcel_code", "lot_number", "subdiv_name"],
                name: "Address",
                maxResults: 1,
                maxSuggestions: 20,
                enableSuggestions: true,
                minCharacters: 1
            }],
            allPlaceholder: "Find Address",
            activeSourceIndex: "all"
        }, "search");
        search.startup();
        search.on("select-result", lang.hitch(this, function(evt){
          var resultItems = [];
          var featureAttributes = evt.result.feature.attributes;
          for (var attr in featureAttributes) {
              resultItems.push("<b>" + getFldAlias(attr) + ":</b>  " + featureAttributes[attr] + "<br>");
          }
          dom.byId("info").innerHTML = resultItems.join("");
        }));

        search.on("clear-search", function(){
          dom.byId("info").innerHTML = "";
        });

        function getFldAlias(fieldName) {
            var retVal = "";
            console.info(fl);
            array.some(fl.fields, function(item) {
                if (item.name === fieldName) {
                    retVal = item.alias;
                    return true;
                }
            });
            return retVal;
        }

    });
</script>
</head>
<p style="margin:5px;">Enter your address in the text box to get more details about your property for the form below:</p>
<div id="search"></div>
<div id="info" style="margin: 5px; padding: 5px; background-color: #eeeeee;"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

View solution in original post

RobertScheitlin__GISP · ‎10-27-2016

Mele,

Sure here is that sample modified to do pagination:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var count = 0;
      require([
        "dojo/dom", "dojo/on", "dojo/dom-attr",
        "esri/tasks/query", "esri/tasks/QueryTask", "dojo/domReady!"
      ], function (dom, on, domAttr, Query, QueryTask) {

        var queryTask = new QueryTask("some server url that supports paginiation");

        var query = new Query();
        query.returnGeometry = false;
        query.outFields = ["PPIN", "NAME", "ADDRESS_3","SUBDIVISION"];

        on(dom.byId("execute"), "click", execute);

        function execute () {
          query.where = "1=1";
          query.start = count;
          query.num = 20;
          query.orderByFields = ["PPIN DESC"];
          queryTask.execute(query, showResults);
          count += 20;
          domAttr.set(dom.byId("execute"),"value", "Get Next 20");
          dom.byId("tCount").innerHTML = "Records Displayed: " + count.toString();
        }

        function showResults (results) {
          var resultItems = [];
          var resultCount = results.features.length;
          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("info").innerHTML += resultItems.join("");
        }
      });
    </script>
  </head>

  <body>
    <input id="execute" type="button" value="Get First 20">&nbsp;&nbsp;&nbsp;<span id="tCount">Records Displayed: 0</span>
    <br />
    <br />
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MeleKoneya · ‎11-01-2016

Thanks Robert for the sample. It helps, but what I was trying to do was get the AutoComplete in the Search widget to work without a map and pass the results of the search to a Query Task or use the Out fields from the Search widget. I would appreciate any assistance with this. Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>

    <script src="https://js.arcgis.com/3.18/"></script>
    <style>
    html,
    body,
    
    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
    
  </style>
    <script>
      require([
        "dojo/dom", "dojo/on",
        "esri/tasks/query", "esri/tasks/QueryTask", "esri/dijit/Search","esri/InfoTemplate", "esri/layers/FeatureLayer", "dojo/domReady!"
      ], function (dom, on, Query, QueryTask, Search, InfoTemplate, FeatureLayer) {

        var queryTask = new QueryTask("URL to Feature Server");

        var query = new Query();
        query.returnGeometry = false;
        query.outFields = [
          "fulladdr", "parcel_code", "subdiv_name", "lot_number" 
        ];

        on(dom.byId("execute"), "click", execute);

                    var search = new Search({
        sources: [{
          featureLayer: new FeatureLayer("URL to Feature Server"),
            searchFields: ["fulladdr"],
            displayField: "fulladdr",
            exactMatch: false,
            outFields: ["parcel_code", "fulladdr"],
            name: "Parcels",
            maxResults: 10,
            maxSuggestions: 20,

            //Create an InfoTemplate and include three fields
            //infoTemplate: new InfoTemplate("Parcels", "Address: ${fulladdr}"),
            enableSuggestions: true,
            minCharacters: 0
      }],
       allPlaceholder: "Find Address",
       activeSourceIndex: "all"
      }, "search");

        function execute () {
          query.text = dom.byId("search").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[i].attributes;
            for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
            }
            resultItems.push("<br>");
          }
          dom.byId("info").innerHTML = resultItems.join("");
        }
      });
    </script>
  </head>

  <body>
    <div id="search" ></div>
    <input id="execute" type="button" value="Get Details">
    <br />
    <br />
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-02-2016

Mele,

Hmm... Would the results of the search widget not get your list down to one specific address that you click on from the suggestions that it make? How would the pagination come in?

MeleKoneya · ‎11-02-2016

Robert,

Thanks for your response. I may have not been using pagination correctly. I am looking for the Auto Complete function in the Search Widget. While I did get it to list the suggestions, for some reason I can't select a suggestion, and then use that in a QueryTask. I feel like I am close, but am missing something. I think it might be event when a suggestion is selected.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.18/"></script>
    <style>
         html,
         body,
      #search {
      display: block;
      cursor: pointer;
    }
  </style>
    <script>
      require([
        "dojo/dom", "dojo/on",
        "esri/tasks/query", "esri/tasks/QueryTask","esri/dijit/Search","esri/InfoTemplate", "esri/layers/FeatureLayer", "dojo/_base/array", "dojo/domReady!"
      ], function (dom, on, Query, QueryTask, Search, InfoTemplate, FeatureLayer,array) {
           
           var lyrFields;
           var URL = "https://MyServer/arcgis/rest/services/MyService/MapServer/25"
        var queryTask = new QueryTask(URL);
        var query = new Query();
        query.returnGeometry = false;
        query.outFields = [
          "fulladdr", "parcel_code", "lot_number" 
        ];
        on(dom.byId("execute"), "click", execute);
        var search = new Search({
        sources: [{
             featureLayer: new FeatureLayer(URL),
            searchFields: ["fulladdr"],
            displayField: "fulladdr",
            exactMatch: false,
            outFields: ["parcel_code", "fulladdr", "lot_number", "subdiv_name"],
            name: "Address",
            maxResults: 10,
            maxSuggestions: 20,

            //Create an InfoTemplate and include three fields
            //infoTemplate: new InfoTemplate("Address", "Address: ${fulladdr}"),
            enableSuggestions: true,
            minCharacters: 0
      }],
       allPlaceholder: "Find Address",
       activeSourceIndex: "all"
      }, "search");
      search.startup();
        function execute () {
          query.text = dom.byId("search").value;
          queryTask.execute(query, showResults);
        }

        function showResults (results) {
          var resultItems = [];
          var resultCount = results.features.length;
          lyrFields = results.fields
          if (resultCount != 0) {
          for (var i = 0; i < resultCount; i++) {
            var featureAttributes = results.features[i].attributes;
            for (var attr in featureAttributes) {
              resultItems.push("<b>" + getFldAlias(attr) + ":</b>  " + featureAttributes[attr] + "<br>");
            }
            resultItems.push("<br>");
          }
          dom.byId("info").innerHTML = resultItems.join("");
              }
              else
                 {
                 dom.byId("info").innerHTML = "Address Not Found";
              }
        }
        function getFldAlias(fieldName){
          var retVal = "";
          array.some(lyrFields, function(item){
            if(item.name === fieldName){
              retVal = item.alias;
              return true;
            }
          });
          return retVal;
        }
      });
    </script>
</head>

<p>Enter your address in the text box to get more details about your property for the form below:</p>
<div id="search" ></div>
<input id="execute" style="font-weight: bold;" type="button" value="Click here for details" />
<br />
<br />
<div id="info" style="margin: 5px; padding: 5px; background-color: #eeeeee;">
</div>
<br />‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-02-2016

Mele,

So help me understand why you want to do a query task based on the results of the selection of one of the search widgets suggestions (that would need pagination of the results)? Basically the suggestion from the Search widget is already a query of the data.

If the Search widget returns a list of suggestions and the user clicks on One particular suggestion and you use that text as a query text then would you not just get one or just a few record(s) back from the QueryTask?

MeleKoneya · ‎11-03-2016

Robert,

Thanks for helping me uderstand the search widget a little better. I am able to return the fields I need. I appreciate you getting me on the right track. I am currently hung up on how to get the Field Aliases and use those in the results from the search widget rather than the field names but my code is much cleaner now. If you can assist with the field alias I would appreciate it. I had used your earlier method, but it looks like what is returned in the search widget does not have the alias for the fields.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.18/"></script>
    <style>
    }
  </style>
    <script>
      require([
        "dojo/dom", "dojo/on",
        "esri/dijit/Search", "esri/layers/FeatureLayer", "dojo/_base/array", "dojo/domReady!"
      ], function (dom, on, Search, FeatureLayer, array) {
           
                     
           var lyrFields;
           var URL = "https:myServer//rest/services/MyService/MapServer/25"
        var search = new Search({
        sources: [{
            featureLayer: new FeatureLayer(URL),
            searchFields: ["fulladdr"],
            displayField: "fulladdr",
            exactMatch: false,
            outFields: ["fulladdr", "parcel_code", "lot_number", "subdiv_name"],
            name: "Address",
            maxResults: 1,
            maxSuggestions: 20,
            enableSuggestions: true,
            minCharacters: 1
      }],
       allPlaceholder: "Find Address",
       activeSourceIndex: "all"
      }, "search");
      search.startup();
      var selectionMade = search.on("select-result", selectionHandler);
        function selectionHandler(evt){
                   var resultItems = [];
                  {
                   var featureAttributes = evt.result.feature.attributes;
                       for (var attr in featureAttributes) {     
                            resultItems.push("<b>" + featureAliases[attr] + ":</b>  " + featureAttributes[attr] + "<br>");
                       }
          }
          dom.byId("info").innerHTML = resultItems.join("");
        }
      });
    </script>
</head>
<p>Enter your address in the text box to get more details about your property for the form below:</p>
<div id="search" ></div>
<br />
<br />
<div id="info" style="margin: 5px; padding: 5px; background-color: #eeeeee;">
</div>
<br />‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-03-2016

Mele,

Here it is:

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Query State Info without Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
<style>
    html,
    body,
    #search {
        display: block;
        cursor: pointer;
        margin: 5px;
    }
</style>
<script>
    var fl;
    require([
        "dojo/dom", "dojo/on", "dojo/_base/lang",
        "esri/dijit/Search", "esri/layers/FeatureLayer", "dojo/_base/array", "dojo/domReady!"
    ], function(dom, on, lang, Search, FeatureLayer, array) {

        var URL = "https:myServer//rest/services/MyService/MapServer/25"
        fl = new FeatureLayer(URL);
        var search = new Search({
            sources: [{
                featureLayer: fl,
                searchFields: ["fulladdr"],
                displayField: "fulladdr",
                exactMatch: false,
                outFields: ["fulladdr", "parcel_code", "lot_number", "subdiv_name"],
                name: "Address",
                maxResults: 1,
                maxSuggestions: 20,
                enableSuggestions: true,
                minCharacters: 1
            }],
            allPlaceholder: "Find Address",
            activeSourceIndex: "all"
        }, "search");
        search.startup();
        search.on("select-result", lang.hitch(this, function(evt){
          var resultItems = [];
          var featureAttributes = evt.result.feature.attributes;
          for (var attr in featureAttributes) {
              resultItems.push("<b>" + getFldAlias(attr) + ":</b>  " + featureAttributes[attr] + "<br>");
          }
          dom.byId("info").innerHTML = resultItems.join("");
        }));

        search.on("clear-search", function(){
          dom.byId("info").innerHTML = "";
        });

        function getFldAlias(fieldName) {
            var retVal = "";
            console.info(fl);
            array.some(fl.fields, function(item) {
                if (item.name === fieldName) {
                    retVal = item.alias;
                    return true;
                }
            });
            return retVal;
        }

    });
</script>
</head>
<p style="margin:5px;">Enter your address in the text box to get more details about your property for the form below:</p>
<div id="search"></div>
<div id="info" style="margin: 5px; padding: 5px; background-color: #eeeeee;"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

MeleKoneya · ‎11-03-2016

Perfect! Thank you Robert!