Using JavaScript to Render QueryTask Results

ESRI's ArcGIS API for JavaScript includes easy to use class libraries that can be loaded into any page by reference and used by your own JavaScript code to interact with on-line content, such as ArcGIS OnLine or ArcGIS for Server map services.

One of the available classes is called a QueryTask and one of the ways to use this task is to make a query to a layer in a map service or feature layer in AGOL to get back a set of features. What you do with that set is up to you, but one of the options is to iterate through the feature set and render the attributes, using HTML code, in whatever way you want.

At the City of Ventura, Don Taylor has been using the QueryTask to make it easier to search and explore on-line data hosted on the VENTURAmaps website. Many of these simple, small, pointed applications are desgned to help staff find links to content that is only available on the City's intranet. While those applications can be partially demonstrated on this public-facing website, many of those staff links will not work as the internal content will not be accessible from here.

Typical Workflows Involving the QueryTask

Search Tool Workflow:   1. Preset GUI is presented to user   2. User sets search parameters   3. User initiates search   4. Code translates search parameters into query expression   5. Code runs the QueryTask using this expression   6. Code iterates through search results to render on page Examples: Business License Search Tool and Tree Inventory Search Tool

Explorer Workflow 1:   1. Preset query expression is hard coded into page, usually for ALL records   2. Code runs QueryTask using this expression   3. Code parses through search results, preparing lists to be used later   4. Code renders summary results as the GUI   5. User interacts with summary results to request more details or to visit a subset   6. Code responds to user interaction to gather requested details, drawing from stored results lists   7. Code renders these additional details   8. User may continue to interact with search results without ever repeating the QueryTask Examples: Capital Improvement Plan and Record Drawing Management

Explorer Workflow 2:   1. Preset GUI is presented to user, prompting them to choose a YEAR   2. User chooses a YEAR, which initiates the search   3. Code constructs query expression for the chosen YEAR   4. Code runs the QueryTask using this expression   5. Code parses through search results, preparing lists to be used later   6. Code renders summary results as the new GUI   7. User interacts with summary results to request more details or to visit a subset   8. Code responds to user interaction to gather requested details   9. Code renders these additional details   10. User may continue to interact with search results without ever repeating the QueryTask Examples: Fire Apparatus Commitments, Legacy Graffiti Explorer and Permits Explorer

Here are links to some sample pages that use the QueryTask, with code samples available for each:

BL: Business License Search Tool   [sample code]

CIP: Capital Improvement Plan Explorer   [sample code]

FIRE: Apparatus Commitments   [sample code 1] [code 2]

GRAF: Legacy Graffiti Explorer   [sample code 1] [code 2]

PERMITS: Permits Explorer   [sample code 1] [code 2]

RDM: Record Drawings Explorer   [sample code]

TREES: Tree Inventory Search Tool   [sample code]

HELPFUL TIP: Sometimes it is practical to pass parameters to a web page via the URL. Many of the above applications use this trick - see any of the [code 2] samples for a demo.