topic Re: Popup after Query similar to MouseClick Popup ¿impossible? in ArcGIS JavaScript Maps SDK Questions

Popup after Query similar to MouseClick Popup ¿impossible?

ManuelGonzález_Álvarez-Palenci — Mon, 12 Mar 2018 15:15:29 GMT

Hello,

I am using 4.6 version of ESRI Javascript. I have tried to do a query and get a Popup of the resulting features, which looks similar to the Popup you would get when making click on a feature. But with no success.

I have a FeatureLayer with a JSON array as source, with a popUpTemplate applied that looks as expected. I have tried to apply this popUpTemplate to the query result, but the Popup I get after the query does not properly apply the given popUpTemplate. Fields are not matched, they look literally like in the popupTemplate.

ie: showing "ID={ID}" instead of its numeric value "ID=54"

I also thought to simulate programatically a user click, using varios techniques, but none worked. I read that emit method could be a possibility in older versions, but in 4.6 does not seem to work.

This is my code:

view.whenLayerView(foundLayer_CM).then(function(lyrView) {

// query all the features available for drawing.

lyrView.queryFeatures().then(function(results) {

results.forEach(function(element) {

var idElemento = element.attributes["IDALFA"];

if (idElemento==value_IDALFA){

var screenPoint;
var screenPoint2 = view.toScreen(element.geometry, screenPoint);
var screenX = screenPoint2.x;
var screenY = screenPoint2.y;

view.popup.features = [element];

view.popup.popupTemplate = pTemplate_CM;
view.popup.title = pTemplate_CM.title;
view.popup.location = element.geometry;

view.popup.open();

}

});

Re: Popup after Query similar to MouseClick Popup ¿impossible?

KellyHutchins — Mon, 12 Mar 2018 22:21:24 GMT

What does your popup template code look like?

Re: Popup after Query similar to MouseClick Popup ¿impossible?

ManuelGonzález_Álvarez-Palenci — Tue, 13 Mar 2018 22:27:02 GMT

Hello Kelly, thanks for your help.

This is the code:

// Set up popup template for the layer
pTemplate_CM = {

title: "CM {IDCM}",
content: [{

type: "fields",
fieldInfos: [

{
fieldName: "IDCM",
label: "IDCM",
visible: true
}, {
fieldName: "ROT_CM",
label: "ROT_CM",
visible: true
}, {
fieldName: "IDALFA",
label: "IDALFA",
visible: true

}]

};

Re: Popup after Query similar to MouseClick Popup ¿impossible?

KellyHutchins — Sat, 11 Dec 2021 07:25:54 GMT

Is the layer you are querying the same one you are getting the popup template from? If so you can just provide the feature to view.popup.open using something like this:

          view.popup.open({
                features: [feature],
                location: feature.geometry.centroid
            });‍‍‍‍‍‍‍‍

Here's a jsbin showing the above approach in action:

JS Bin - Collaborative JavaScript Debugging

Re: Popup after Query similar to MouseClick Popup ¿impossible?

ManuelGonzález_Álvarez-Palenci — Tue, 13 Mar 2018 23:38:06 GMT

I will try to condensate several things in this email. I don't know if I am expecting a behavior that is not implemented that way, or if it is something I am not doing as I should:

-----------------------------------------

Unless I am wrong, it's the same layer for the query and in the mouse click event.

This is how I get the results of the query:

var foundLayer_CM;

[...]

map.layers.add(lyr);
foundLayer_CM = lyr;

[...]

view.whenLayerView(foundLayer_CM).then(function(lyrView) {
// query all the features available for drawing.

lyrView.queryFeatures().then(function(results) {

results.forEach(function(element) {

...

}

But the popUp that is displayed by view.popup.open is empty. PopupTemplate does not seem to be applied automatically.

------------------------------------------------------

The layer popUp I can see after click on a feature on this layer is completely different. Popuptemplate is applied:

------------------------------------------------------

I also tried to make a custom popup for this query, but fields were not replaced by their corresponding value:

view.popup.title = "CM {IDCM}";

------------------------------------------------------

I tried a different method, but it is not as cute as the popup you get after mouse click. It will not display rows in table format with alternating background color:

view.popup.title = "<div>CM " + element.attributes["IDCM"] + "</div>";

   view.popup.content = "";
   view.popup.content += "<div>NUMOBRA: " + element.attributes["NUM_OBRA"] + "</div>";
   view.popup.content += "<div>IDCM: " + element.attributes["IDCM"] + "</div>";
   view.popup.content += "<div>IDALFA: " + element.attributes["IDALFA"] + "</div>";
   view.popup.content += "<div>Para más detalles, haga click sobre el elemento</div>";

------------------------------------------------------

To summarize up:

* I don't know why syntax {fieldName} is not replacing properly by values, in view.popup.open

* I don't know why popupTemplate is not applied the same way in view.popup.open that it would be after mouse click (got empty popup in view.popup.open)

* I don't understand why view.popup.open is not showing fields in a table style; the layer popup that I see after a mouse click has this ability (show fields in table style) "out-of-the-box" (I even tried <table>...</table> with no success)

* Finally... ¿Is it possible to simulate programatically a mouse click to get a popUp? I tried it using Javascript, Dojo, emit, ... but I did not get it to work.

Thanks.

Manuel

Re: Popup after Query similar to MouseClick Popup ¿impossible?

KellyHutchins — Wed, 14 Mar 2018 00:08:06 GMT

Did you try passing the feature into view.popup.open like in the example I added above?

Re: Popup after Query similar to MouseClick Popup ¿impossible?

ManuelGonzález_Álvarez-Palenci — Wed, 14 Mar 2018 00:31:07 GMT

Yes, I tried it. I got an empty popup:

view.popup.open({
features: [element],
location: element.geometry
});

This "element" is a feature obtained from a query of my layer:

view.whenLayerView(foundLayer_CM).then(function(lyrView) {
// query all the features available for drawing.

lyrView.queryFeatures().then(function(results) {

results.forEach(function(element) {

[...]

Manuel

Re: Popup after Query similar to MouseClick Popup ¿impossible?

KellyHutchins — Wed, 14 Mar 2018 16:17:27 GMT

Try updating the sample I posted above to use your layer and see if the same issue happens there.

Re: Popup after Query similar to MouseClick Popup ¿impossible?

ManuelGonzález_Álvarez-Palenci — Wed, 14 Mar 2018 16:34:42 GMT

Hey!!! It worked!!!

   view.popup.open({
      features: [element],
      location: element.geometry
   });

-----------------------------------------------------------------

I really don't understand why the behaviour is so different with this code sample. Any explanation?

   view.popup.features = [element];
   view.popup.location = element.geometry;
   view.popup.open();

--> EMPTY POPUP

Re: Popup after Query similar to MouseClick Popup ¿impossible?

KellyHutchins — Wed, 14 Mar 2018 16:41:55 GMT

Looks like it is because you aren't specifying features and location when you call popup.open in your code but in the sample we do. So you are just telling the popup to open but not providing it with content.

Re: Popup after Query similar to MouseClick Popup ¿impossible?

ManuelGonzález_Álvarez-Palenci — Wed, 14 Mar 2018 16:51:14 GMT

Yes, it seems to be the cause of this behavior. I thought it was also acceptable to assign properties and then call "Open" with no arguments, but I guess it's not designed to work in the same way.

Thank you so much for your help, Kelly!!! I had spent a lot of time with this issue.

Regards,

Manuel

Re: Popup after Query similar to MouseClick Popup ¿impossible?

StevePeralta — Sat, 11 Dec 2021 07:25:57 GMT

Hi Kelly:

Do you know how I can query on a locator source and bring up data from two FeatureLayer sources instead of the locator source?

Here's what I have so far:

// Search widget
 var searchWidget = new Search({ 
 view: view,
 sources: [{
 locator: new Locator({ url: locatorServiceUrl }),
 singleLineFieldName: "SingleLine",
 name: "Place",
 localSearchOptions: {
 minScale: 300000,
 distance: 50000
 },
 placeholder: "Search Places",
 maxResults: 3,
 maxSuggestions: 6,
 suggestionsEnabled: true,
 popupEnabled: false,
 minSuggestCharacters: 0
 },
 {
 featureLayer: houseLyr,
 searchFields: ["LAST_NAME", "DISTRICT"],
 displayField: "LAST_NAME",
 exactMatch: false,
 outFields: ["*"],
 name: "House Members",
 maxResults: 10,
 maxSuggestions: 10,
 suggestionsEnabled: true,
 minSuggestCharacters: 0,
 placeholder: "District No. or Last Name"
 },
 {
 featureLayer: senateLyr,
 searchFields: ["LAST_NAME", "DISTRICT"],
 displayField: "LAST_NAME",
 exactMatch: false,
 outFields: ["*"],
 name: "Senate Members",
 placeholder: "District No. or Last Name",
 maxResults: 6,
 maxSuggestions: 6,
 suggestionsEnabled: true,
 minSuggestCharacters: 0
 }]
 
 });
 
 searchWidget.on("select-result", function(event){
 //DEBUG
 console.log(JSON.stringify(event));
 if(!event.result.feature.geometry.rings)
 {
 view.popup.open({
 title: "Feature Layer data!",
 content: "Want that data here.",
 location: event.result.feature.geometry
 });
 }
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any help appreciated!!