topic Re: Using "Query result in table" sample code - change text input field to combobox in ArcGIS API for Flex Questions

Using "Query result in table" sample code - change text input field to combobox

AlisonPage — Sat, 11 Dec 2021 09:19:27 GMT

Hi,

I'm not great with the query language and I'm trying to take the "Query result in table" sample code (http://help.arcgis.com/en/webapi/flex/samples/index.html#/Query_result_in_table/01nq0000005t000000/) and customize it for my data. I simply want to change the text input field to a dropdown box (combobox I think in mxml language). What I don't know how to change is the parameter in the Query tag to use my combobox instead of text input.

This is what is there now (in the sample code):

<esri:Query id="query"
                    outFields="[STATE_NAME,STATE_FIPS,SUB_REGION,STATE_ABBR,POP2000,POP2007]"
                    returnGeometry="false"
                    text="{stateName.text}"/>
    </fx:Declarations>

    <s:Panel title="Using Query tasks without maps">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:HGroup verticalAlign="middle">
            <s:Label text="US state name: "/>
            <s:TextInput id="stateName" text="Carolina"/>
            <s:Button click="queryTask.execute(query);" label="Get Details"/>

This is what I have but I don't know what to put instead of "text="{stateName.text}" so it associates with my combobox:

<esri:Query id="query"
     outFields="[PROJECT_NAME, PROJECT_DESCRIPTION, ACRES, HABITAT_DESCRIPTION, GPRA_CATEGORY, RESTORATION_TECHNIQUE, LEAD_PARTNER]"
     returnGeometry="false"
     objectids="*"/>
  <s:RadioButtonGroup id="optiongroup"/>
 </fx:Declarations>
 
 <s:Panel title="NEP Project Information">
  <s:layout>
   <s:VerticalLayout/>
  </s:layout>
  <s:HGroup verticalAlign="middle">
   <mx:FormItem label="Search for NEP Information">
    <s:ComboBox id="nepName" dataProvider="{NEP_NAME}" prompt="Select NEP" enabled="true"/>
   </mx:FormItem>

Thanks,
Alison

Re: Using "Query result in table" sample code - change text input field to combobox

KevinDeege — Tue, 04 Oct 2011 17:05:44 GMT

Hi Alison: You use the Id of your control with the property SelectedItem:

text="{nephName.SelectedItem}"

Re: Using "Query result in table" sample code - change text input field to combobox

AlisonPage — Sat, 11 Dec 2021 09:19:30 GMT

Hi Kevin,

I ended up with the same error during the build process.. maybe I'm not doing something right?

Errors:
Encountered errors or warnings while building project NEPTableQuery.mxml.
NEPTableQuery.mxml: Could not resolve <esri:QueryTask> to a component implementation.
NEPTableQuery.mxml: Could not resolve <esri:Query> to a component implementation.

Entire MXML Code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      pageTitle="NEP Project Information">
 <!--
 This sample shows how to query the server and displaying
 the result in a datagrid.
 The query is sent using the execute() method on a QueryTask.
 
 This sample sets up a QueryTask (what layer on what server to query).
 When the user clicks the "Get Details" button, a Query is sent with
 the user-provided text to search for.
 Meanwhile a DataGrid has been created which listens for the results
 (using executeLastResult) from the querytask.
 -->
 
 <s:layout>
  <s:VerticalLayout horizontalAlign="center" paddingTop="25"/>
 </s:layout>
 <fx:Script>
  <![CDATA[
   
 public function get where():String
 public function set where(value:String):void 
 public function set csvName(value:String):void
 {
 _csvName = value;
 }
 
 public function set csvSeperator(value:String):void
 {
 _csvSep = value;
 }
 
 public function set csvExportOptionLbl(value:String):void
 {
 _exp2csvBtnLbl = value;
 }
 
 public function set txtExportOptionLbl(value:String):void
 {
 _exp2txtBtnLbl = value;
 }
 
 public function set ExportButtonLbl(value:String):void
 {
 _exportButtonLbl = value;
 }
 
 private function exportTo(event:Event):void
 {
 try
 {
 var data:String;
 var defaultFileName:String;
 if(optiongroup.selectedValue == _exp2csvBtnLbl){
 data = exportCSV(resultsGrid,_csvSep);
 defaultFileName = _csvName + ".csv";
 }else{
 data = exportTXT(resultsGrid);
 defaultFileName = _csvName + ".txt";
 }
 
 var fileReference:FileReference = new FileReference();
 fileReference.save(data,defaultFileName);
 }
 catch(error:Error)
 {
 Alert.show(error.message);
 }
 }
 
 private function exportCSV(dataGrid:DataGrid, csvSeparator:String=",", lineSeparator:String="\n"):String
 {
 try
 {
 var data:String = "";
 var columnArray:Array = dataGrid.columns;
 var columnCount:int = columnArray.length;
 var dataGridColumn:DataGridColumn;
 var header:String = "";
 var headerGenerated:Boolean = false;
 var dataProvider:Object = ObjectUtil.copy(dataGrid.dataProvider);
 
 //trace(ObjectUtil.toString(dataProvider));
 var rowCount:int = dataProvider.length;
 var dp:Object = null;
 var cursor:IViewCursor = dataProvider.createCursor();
 var j:int = 0;
 
 //loop through rows
 while (!cursor.afterLast)
 {
 var object:Object = null;
 object = cursor.current;
 //loop through all columns for the row
 for(var i:int = 0; i < columnCount; i++)
 {
 dataGridColumn = columnArray;
 //Exclude column data which is invisible (hidden)
 if(!dataGridColumn.visible)
 {
 continue;
 }
 if(dataGridColumn.itemRenderer)
 {
 data += "\""+ object[dataGridColumn.dataField] + "\"";
 }else{
 data += "\""+ dataGridColumn.itemToLabel(object)+ "\"";
 }
 if(i < (columnCount -1))
 {
 data += csvSeparator;
 }
 //generate header of CSV, only if it's not genereted yet
 if (!headerGenerated)
 {
 header += "\"" + dataGridColumn.headerText + "\"";
 if (i < columnCount - 1)
 {
 header += csvSeparator;
 }
 }
 }
 headerGenerated = true;
 if (j < (rowCount - 1))
 {
 data += lineSeparator;
 }
 j++;
 cursor.moveNext ();
 }
 //set references to null:
 dataProvider = null;
 columnArray = null;
 dataGridColumn = null;  
 }
 catch(error:Error)
 {
 return null;
 Alert.show(error.message);
 }
 return (header + lineSeparator + data);
 }
 
 private function exportTXT(dataGrid:DataGrid, lineSeparator:String="\n"):String
 {
 try
 {
 var data:String = "";
 var columnArray:Array = dataGrid.columns;
 var columnCount:int = columnArray.length;
 var dataGridColumn:DataGridColumn;
 var header:String = "";
 var headerGenerated:Boolean = false;
 var dataProvider:Object = ObjectUtil.copy(dataGrid.dataProvider);
 
 var rowCount:int = dataProvider.length;
 var dp:Object = null;
 var cursor:IViewCursor = dataProvider.createCursor();
 var j:int = 0;
 
 //loop through rows
 while (!cursor.afterLast)
 {
 var object:Object = null;
 object = cursor.current;
 //loop through all columns for the row
 for(var i:int = 0; i < columnCount; i++)
 {
 dataGridColumn = columnArray;
 //Exclude column data which is invisible (hidden)
 if(!dataGridColumn.visible)
 {
 continue;
 }
 if(dataGridColumn.itemRenderer)
 {
 data += "\""+ object[dataGridColumn.dataField] + "\"";
 }else{
 data += "\""+ dataGridColumn.itemToLabel(object)+ "\"";
 }
 if(i < (columnCount -1))
 {
 data += "\t";
 }
 //generate header of CSV, only if it's not genereted yet
 if (!headerGenerated)
 {
 header += "\"" + dataGridColumn.headerText + "\"";
 if (i < columnCount - 1)
 {
 header += "\t";
 }
 }
 }
 headerGenerated = true;
 if (j < (rowCount - 1))
 {
 data += lineSeparator;
 }
 j++;
 cursor.moveNext ();
 }
 //set references to null:
 dataProvider = null;
 columnArray = null;
 dataGridColumn = null;  
 }
 
 catch(error:Error)
 {
 return null;
 Alert.show(error.message);
 }
 return (header + lineSeparator + data);
 }
 
 
 ]]>
 </fx:Script>
 <fx:Declarations>
  <esri:QueryTask id="queryTask"
      url="http://134.67.224.174/ArcGIS/rest/services/NEPmap/nepmap1/MapServer/1"
      useAMF="false"/>
  <esri:Query id="query"
     outFields="[PROJECT_NAME, PROJECT_DESCRIPTION, ACRES, HABITAT_DESCRIPTION, GPRA_CATEGORY, RESTORATION_TECHNIQUE, LEAD_PARTNER]"
     returnGeometry="false"
     text="{nepName.SelectedItem}"/> 
  <s:RadioButtonGroup id="optiongroup"/>
 </fx:Declarations>
 
 <s:Panel title="NEP Project Information">
  <s:layout>
   <s:VerticalLayout/>
  </s:layout>
  <s:HGroup verticalAlign="middle">
   <mx:FormItem label="Search for NEP Information">
    <s:ComboBox id="nepName" dataProvider="{NEP_NAME}" prompt="Select NEP" enabled="true"/>
   </mx:FormItem>
  </s:HGroup>
  <mx:DataGrid id="resultsGrid"
      dataProvider="{queryTask.executeLastResult.attributes}"
      visible="{queryTask.executeLastResult != null}">
   <mx:columns>
    <mx:DataGridColumn dataField="PROJECT_NAME" headerText="Project Name"/>
    <mx:DataGridColumn dataField="PROJECT_DESCRIPTION" headerText="Project Description"/>
    <mx:DataGridColumn dataField="ACRES" headerText="Number of Acres"/>
    <mx:DataGridColumn dataField="GPRA_CATEGORY" headerText="Habitat Type"/>
    <mx:DataGridColumn dataField="HABITAT_DESCRIPTION" headerText="Habitat Description"/>
    <mx:DataGridColumn dataField="RESTORATION_TECHNIQUE" headerText="Restoration Technique"/>
    <mx:DataGridColumn dataField="LEAD_PARTNER" headerText="Lead Partner"/>
   </mx:columns>
  </mx:DataGrid>
  <s:controlBarContent>
   <s:HGroup verticalAlign="middle">
    <s:RadioButton label="{_exp2csvBtnLbl}" groupName="optiongroup" selected="true"/>
    <s:RadioButton label="{_exp2txtBtnLbl}" groupName="optiongroup"/>
    <s:Button label="{_exportButtonLbl}" id="Export" click="exportTo(event)" skinClass="ExportButtonSkin"/>
   </s:HGroup>
  </s:controlBarContent>
  <s:controlBarLayout>
   <s:HorizontalLayout horizontalAlign="right" paddingTop="3" paddingBottom="2" paddingRight="5" />
  </s:controlBarLayout>
 </s:Panel>
</s:Application>

Thanks for your help,
Alison

Re: Using "Query result in table" sample code - change text input field to combobox

KevinDeege — Sat, 11 Dec 2021 09:19:33 GMT

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      pageTitle="NEP Project Information">
 <!--
 This sample shows how to query the server and displaying
 the result in a datagrid.
 The query is sent using the execute() method on a QueryTask.
 
 This sample sets up a QueryTask (what layer on what server to query).
 When the user clicks the "Get Details" button, a Query is sent with
 the user-provided text to search for.
 Meanwhile a DataGrid has been created which listens for the results
 (using executeLastResult) from the querytask.
 -->
 
 <s:layout>
  <s:VerticalLayout horizontalAlign="center" paddingTop="25"/>
 </s:layout>
 <fx:Script>
  <![CDATA[
   
 public function get where():String
 public function set where(value:String):void 
 public function set csvName(value:String):void
 {
 _csvName = value;
 }
 
 public function set csvSeperator(value:String):void
 {
 _csvSep = value;
 }
 
 public function set csvExportOptionLbl(value:String):void
 {
 _exp2csvBtnLbl = value;
 }
 
 public function set txtExportOptionLbl(value:String):void
 {
 _exp2txtBtnLbl = value;
 }
 
 public function set ExportButtonLbl(value:String):void
 {
 _exportButtonLbl = value;
 }
 
 private function exportTo(event:Event):void
 {
 try
 {
 var data:String;
 var defaultFileName:String;
 if(optiongroup.selectedValue == _exp2csvBtnLbl){
 data = exportCSV(resultsGrid,_csvSep);
 defaultFileName = _csvName + ".csv";
 }else{
 data = exportTXT(resultsGrid);
 defaultFileName = _csvName + ".txt";
 }
 
 var fileReference:FileReference = new FileReference();
 fileReference.save(data,defaultFileName);
 }
 catch(error:Error)
 {
 Alert.show(error.message);
 }
 }
 
 private function exportCSV(dataGrid:DataGrid, csvSeparator:String=",", lineSeparator:String="\n"):String
 {
 try
 {
 var data:String = "";
 var columnArray:Array = dataGrid.columns;
 var columnCount:int = columnArray.length;
 var dataGridColumn:DataGridColumn;
 var header:String = "";
 var headerGenerated:Boolean = false;
 var dataProvider:Object = ObjectUtil.copy(dataGrid.dataProvider);
 
 //trace(ObjectUtil.toString(dataProvider));
 var rowCount:int = dataProvider.length;
 var dp:Object = null;
 var cursor:IViewCursor = dataProvider.createCursor();
 var j:int = 0;
 
 //loop through rows
 while (!cursor.afterLast)
 {
 var object:Object = null;
 object = cursor.current;
 //loop through all columns for the row
 for(var i:int = 0; i < columnCount; i++)
 {
 dataGridColumn = columnArray;
 //Exclude column data which is invisible (hidden)
 if(!dataGridColumn.visible)
 {
 continue;
 }
 if(dataGridColumn.itemRenderer)
 {
 data += "\""+ object[dataGridColumn.dataField] + "\"";
 }else{
 data += "\""+ dataGridColumn.itemToLabel(object)+ "\"";
 }
 if(i < (columnCount -1))
 {
 data += csvSeparator;
 }
 //generate header of CSV, only if it's not genereted yet
 if (!headerGenerated)
 {
 header += "\"" + dataGridColumn.headerText + "\"";
 if (i < columnCount - 1)
 {
 header += csvSeparator;
 }
 }
 }
 headerGenerated = true;
 if (j < (rowCount - 1))
 {
 data += lineSeparator;
 }
 j++;
 cursor.moveNext ();
 }
 //set references to null:
 dataProvider = null;
 columnArray = null;
 dataGridColumn = null;  
 }
 catch(error:Error)
 {
 return null;
 Alert.show(error.message);
 }
 return (header + lineSeparator + data);
 }
 
 private function exportTXT(dataGrid:DataGrid, lineSeparator:String="\n"):String
 {
 try
 {
 var data:String = "";
 var columnArray:Array = dataGrid.columns;
 var columnCount:int = columnArray.length;
 var dataGridColumn:DataGridColumn;
 var header:String = "";
 var headerGenerated:Boolean = false;
 var dataProvider:Object = ObjectUtil.copy(dataGrid.dataProvider);
 
 var rowCount:int = dataProvider.length;
 var dp:Object = null;
 var cursor:IViewCursor = dataProvider.createCursor();
 var j:int = 0;
 
 //loop through rows
 while (!cursor.afterLast)
 {
 var object:Object = null;
 object = cursor.current;
 //loop through all columns for the row
 for(var i:int = 0; i < columnCount; i++)
 {
 dataGridColumn = columnArray;
 //Exclude column data which is invisible (hidden)
 if(!dataGridColumn.visible)
 {
 continue;
 }
 if(dataGridColumn.itemRenderer)
 {
 data += "\""+ object[dataGridColumn.dataField] + "\"";
 }else{
 data += "\""+ dataGridColumn.itemToLabel(object)+ "\"";
 }
 if(i < (columnCount -1))
 {
 data += "\t";
 }
 //generate header of CSV, only if it's not genereted yet
 if (!headerGenerated)
 {
 header += "\"" + dataGridColumn.headerText + "\"";
 if (i < columnCount - 1)
 {
 header += "\t";
 }
 }
 }
 headerGenerated = true;
 if (j < (rowCount - 1))
 {
 data += lineSeparator;
 }
 j++;
 cursor.moveNext ();
 }
 //set references to null:
 dataProvider = null;
 columnArray = null;
 dataGridColumn = null;  
 }
 
 catch(error:Error)
 {
 return null;
 Alert.show(error.message);
 }
 return (header + lineSeparator + data);
 }
 
 
 ]]>
 </fx:Script>
 <fx:Declarations>
  <esri:QueryTask id="queryTask"
      url="http://134.67.224.174/ArcGIS/rest/services/NEPmap/nepmap1/MapServer/1"
      useAMF="false"/>
  <esri:Query id="query"
     outFields="[PROJECT_NAME, PROJECT_DESCRIPTION, ACRES, HABITAT_DESCRIPTION, GPRA_CATEGORY, RESTORATION_TECHNIQUE, LEAD_PARTNER]"
     returnGeometry="false"
     text="{nepName.SelectedItem}"/> 
  <s:RadioButtonGroup id="optiongroup"/>
 </fx:Declarations>
 
 <s:Panel title="NEP Project Information">
  <s:layout>
   <s:VerticalLayout/>
  </s:layout>
  <s:HGroup verticalAlign="middle">
   <mx:FormItem label="Search for NEP Information">
    <s:ComboBox id="nepName" dataProvider="{NEP_NAME}" prompt="Select NEP" enabled="true"/>
   </mx:FormItem>
  </s:HGroup>
  <mx:DataGrid id="resultsGrid"
      dataProvider="{queryTask.executeLastResult.attributes}"
      visible="{queryTask.executeLastResult != null}">
   <mx:columns>
    <mx:DataGridColumn dataField="PROJECT_NAME" headerText="Project Name"/>
    <mx:DataGridColumn dataField="PROJECT_DESCRIPTION" headerText="Project Description"/>
    <mx:DataGridColumn dataField="ACRES" headerText="Number of Acres"/>
    <mx:DataGridColumn dataField="GPRA_CATEGORY" headerText="Habitat Type"/>
    <mx:DataGridColumn dataField="HABITAT_DESCRIPTION" headerText="Habitat Description"/>
    <mx:DataGridColumn dataField="RESTORATION_TECHNIQUE" headerText="Restoration Technique"/>
    <mx:DataGridColumn dataField="LEAD_PARTNER" headerText="Lead Partner"/>
   </mx:columns>
  </mx:DataGrid>
  <s:controlBarContent>
   <s:HGroup verticalAlign="middle">
    <s:RadioButton label="{_exp2csvBtnLbl}" groupName="optiongroup" selected="true"/>
    <s:RadioButton label="{_exp2txtBtnLbl}" groupName="optiongroup"/>
    <s:Button label="{_exportButtonLbl}" id="Export" click="exportTo(event)" skinClass="ExportButtonSkin"/>
   </s:HGroup>
  </s:controlBarContent>
  <s:controlBarLayout>
   <s:HorizontalLayout horizontalAlign="right" paddingTop="3" paddingBottom="2" paddingRight="5" />
  </s:controlBarLayout>
 </s:Panel>
</s:Application>

Thanks for your help,
Alison

It looks like it cannot resolve the <esri:> xml namespace, just confirm that you have referenced the the API correctly. Do you have the ags .SWC in the build path or in the libs folder within Flash Builder?

==Kevin

topic Re: Using "Query result in table" sample code - change text input field to combobox in ArcGIS API for Flex Questions

Using &quot;Query result in table&quot; sample code - change text input field to combobox

Re: Using "Query result in table" sample code - change text input field to combobox

Re: Using "Query result in table" sample code - change text input field to combobox

Re: Using "Query result in table" sample code - change text input field to combobox

Using "Query result in table" sample code - change text input field to combobox