Set infoWindow title with html element

NhuMai — Sun, 12 Dec 2021 16:34:12 GMT

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;
 }

});

Re: Set infoWindow title with html element

RobertScheitlin__GISP — Wed, 21 Dec 2016 22:02:33 GMT

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

Re: Set infoWindow title with html element

NhuMai — Thu, 22 Dec 2016 01:50:13 GMT

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

Re: Set infoWindow title with html element

RobertScheitlin__GISP — Thu, 22 Dec 2016 14:38:14 GMT

What is the template objects class type?

topic Re: Set infoWindow title with html element in ArcGIS JavaScript Maps SDK Questions

Set infoWindow title with html element

Re: Set infoWindow title with html element

Re: Set infoWindow title with html element

Re: Set infoWindow title with html element