topic Re: WAB - how to define featureLayer popupTemplate that will work same as the default in Web AppBuilder Custom Widgets Questions

WAB - how to define featureLayer popupTemplate that will work same as the default

MichaelLev — Mon, 07 Sep 2020 15:16:41 GMT

From my (3D) custom widget in WAB Developer Edition 2.17, I need to define featureLayer popupTemplate that will display a table of the field names and field values, very much like the default popup (e.g. when I click on a feature).

The reason is that I need to "immitate" esri default popupTemplate.

I will appreciate help.

I tried:

featureLayer.popupTemplate = {
"title": `${layerTitle}`,
"content": featurePointed => {
const dv = document.createElement("div");
let num = featureLayer.fields.length;
dv.style.height = `${num * 20}px`;
featureLayer.fields.forEach(field => {
let row = document.createElement('li');
row.feature = featurePointed;
row.textContent = `Name: ${field.name} Value: ${featurePointed.graphic.attributes[field.name]}`;
dv.appendChild(row);
});
return dv;
}
};

But the values are all "undefined", I want it to be sorted by name, and this is yet not a table....

I saw in esri Featurelayer doc, that by setting Popup.defaultPopupTemplateEnabled = true I can enable the default popup, but I don't know how to do it.

note: See also my other question

Help will be greatly appreciated.

Michael

Re: WAB - how to define featureLayer popupTemplate that will work same as the default

MichaelLev — Tue, 08 Sep 2020 08:38:06 GMT

Dear Robert Scheitlin, GISP‌,

no one has replied yet to this question.

Can you help, please?

Michael

Re: WAB - how to define featureLayer popupTemplate that will work same as the default

RobertScheitlin__GISP — Tue, 08 Sep 2020 14:20:18 GMT

Michael,

This 4.x sample shows what you need to do to get a table like display in a popup.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-popuptemplate

Re: WAB - how to define featureLayer popupTemplate that will work same as the default

MichaelLev — Tue, 08 Sep 2020 14:49:20 GMT

Dear Robert Scheitlin, GISP‌,

That example "knows" all field names.

I need this popup for my "AddShapefile" custom widget.

I elaborated in my other question that somehow, I don't know why, the shapefile is added to the scene, but the default pop-up is NOT opened (is there a solution?)

So I am forced to CREATE a popupTemplate... As the widget code knows NOTHING about field names, I am forced to create popupTemplate that will act similar to the default popupTemplate without knowing a-priory the field names. So, that example you pointed is not relevant.

I tried to use FeatureTable widget, but it displaye the whole attribute table, whilst I need only for the pointed feature...

I tried to implement definitionExpression, then the FeatureTable displayed only for the pointed feature, but all other features has been eliminated from the scene...

I tried to query the layer in order to get the attributes of the single pointed feature, but then I need to create FeatureLayer from the result in order to activate the FeatureTable on it, but I don't know how to create FeatureLayer from the result...

So my question remains - How to display a table of all field values for a pointed feature (like the default popupTemplate)?

Please help me since I'm stuck...

Michael

Re: WAB - how to define featureLayer popupTemplate that will work same as the default

RobertScheitlin__GISP — Tue, 08 Sep 2020 15:01:39 GMT

Michael,

In that case then use the defaultPopupTemplateEnabled property you mentioned earlier.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#defaultPopupTemplateEnabled

this.view.popup.defaultPopupTemplateEnabled = true;

Re: WAB - how to define featureLayer popupTemplate that will work same as the default

MichaelLev — Tue, 08 Sep 2020 19:11:48 GMT

Dear Robert Scheitlin, GISP‌,

Thank you! it works!

Please, can you help me know if one of the other options could also be implemented:

Apply FeatureTable to one feature?
Apply FeatureTable after definitionExpression, but after displaying the table (with one feature), show all features on scene?
Is it possible to create featureLayer from query results? How?
I tried using next code, to create thepopupTemplate manually, but the div has not been included in thepopuptamplate. How can I correct it so that the popup will contain the div?

featureLayer.popupTemplate = {
"title": `${layerTitle} - ${featureLayer.fields.length} fields`,
  "content": featurePointed => {
      let idName = featureLayer.fields[0].name;
      let idValue = featurePointed.graphic.attributes[idName];
      const query = featureLayer.createQuery();
      query.where = `${idName} = ${idValue}`;
      query.outFields = ['*'];
      query.returnGeometry = false;
      ofekUtils.log(`idName: "${idName}", idValue: "${idValue}"`);
      //featureLayer.definitionExpression = query.where;
      featureLayer.queryFeatures(query)
          .then(result => {
              resultAsText = JSON.stringify(result);
              console.log(resultAsText);
              let p = result.features[0].attributes;
              let dvContainer = document.createElement("div");
              let dvTable = document.createElement("div");
              dvContainer.setAttribute("class", "container");
              dvTable.setAttribute("id", "tableDiv");
              dvTable.style.height = `240px`;
              dvContainer.appendChild(dvTable);
              for (let key in p) {
                  if (p.hasOwnProperty(key)) {
                      let row = document.createElement('li');
                      row.textContent = `${key} -- ${p[key]}`;
                      dvTable.appendChild(row);
                  }
              }
              return dvContainer;
          })
      .catch(er =>
          alert('Error executing query to get types ' + er));
  }
};