I am trying to add an combobox to the title of an infoWindow. The combobox is intended to be populated with the list of identified results. I'm trying two different ways:
1. Adding the combobox declaratively using html:
var template = new esri.InfoTemplate(layerName + "<br/><select id="id_select" data-dojo-type="dijit/form/Select"</select>,"<br/> FID : ${FID}");
The combobox is there, but I don't know how to access the combobox to add the options dynamically (via addOptions). I would normally do dijit.byId("id_select"), but considering it doesn't exist until it's created...I'm not sure how to go about this way.
2. Programmatically
With the code below, the title displays information regarding the dijit/form/select widget (It displays: [object HTML TableElement]), but not the widget itself. I tried using domConstruct like this example.
var identifyTask, identifyParams, idPoint; var identifyResults; require([ "esri/dijit/Popup", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "dijit/form/Select", "dojo/dom-construct", "dojo/promise/all", "dojo/domReady!" ], function ( Popup, IdentifyTask, IdentifyParameters, Select, domConstruct, All ) { var identifySelect; //dojo.connect(window.myMap, "onLoad", mapReady); mapReady(window.myMap); function mapReady(map) { dojo.connect(window.myMap, "onClick", runIdentifies); } function runIdentifies(evt) { identifyResults = []; idPoint = evt.mapPoint; var layers = dojo.map(window.myMap.layerIds, function (layerId) { return window.myMap.getLayer(layerId); }); layers = dojo.filter(layers, function (layer) { if (layer.visibleLayers[0] !== -1) { return layer.getImageUrl && layer.visible } }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers var tasks = dojo.map(layers, function (layer) { return new IdentifyTask(layer.url); }); //map each visible dynamic layer to a new identify task, using the layer url var defTasks = dojo.map(tasks, function (task) { return new dojo.Deferred(); }); //map each identify task to a new dojo.Deferred var params = createIdentifyParams(layers, evt); var promises = []; for (i = 0; i < tasks.length; i++) { promises.push(tasks.execute(params)); //Execute each task } var allPromises = new All(promises); allPromises.then(function (r) { showIdentifyResults(r, tasks); }); } function showIdentifyResults(r, tasks) { var results = []; var taskUrls = []; var resultNames = []; r = dojo.filter(r, function (result) { return r[0]; }); for (i = 0; i < r.length; i++) { results = results.concat(r); for (j = 0; j < r.length; j++) { taskUrls = taskUrls.concat(tasks.url); } } results = dojo.map(results, function (result, index) { var feature = result.feature; var layerName = result.layerName; var serviceUrl = taskUrls[index]; resultNames.push({ value: result.layerName, label: result.layerName }); feature.attributes.layerName = result.layerName; var identifiedList = getIdentifiedList(resultNames); console.log(identifiedList); var template = new esri.InfoTemplate(); template.setTitle(identifiedList); feature.setInfoTemplate(template); var resultGeometry = feature.geometry; var resultType = resultGeometry.type; return feature; }); if (results.length === 0) { window.myMap.infoWindow.clearFeatures(); } else { window.myMap.infoWindow.setFeatures(results); } window.myMap.infoWindow.show(idPoint); identifySelect.on('change', function(evt) { var identIndex = identifySelect.get("value"); console.log(identIndex); window.myMap.infoWindow.select(identIndex); }); return results; } function getIdentifiedList(options) { identifySelect = new Select({ name: "identifySelect", id: "id_select", options: options }, domConstruct.create("select")); return identifySelect.domNode; } function createIdentifyParams(layers, evt) { var identifyParamsList = []; identifyParamsList.length = 0; dojo.forEach(layers, function (layer) { var idParams = new esri.tasks.IdentifyParameters(); idParams.width = window.myMap.width; idParams.height = window.myMap.height; idParams.geometry = evt.mapPoint; idParams.mapExtent = window.myMap.extent; idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE; var visLayers = layer.visibleLayers; if (visLayers !== -1) { var subLayers = []; for (var i = 0; i < layer.layerInfos.length; i++) { if (layer.layerInfos.subLayerIds == null) subLayers.push(layer.layerInfos.id); } idParams.layerIds = subLayers; } else { idParams.layerIds = []; } idParams.tolerance = 5; idParams.returnGeometry = true; identifyParamsList.push(idParams); }); return identifyParamsList; } });
Nhu,
I have never attempted what you are trying but you should try and use
InfoWindowBase | API Reference | ArcGIS API for JavaScript 3.19 | startupDijits
Thanks for the tip.
After adding the InfoWindowBase requirement, I tried the following:
template.startupDijits(identifySelect)
and
template.startupDijits()
Gives me:
template.startupDijits is not a function
Going to keep searching, but just wanted to keep you posted and see if you had feedback.
Mahalo
What is the template objects class type?