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

[MichaelLev]

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

[MichaelLev]

Dear Robert Scheitlin, GISP‌,

no one has replied yet to this question.

Can you help, please?

Michael

[RobertScheitlin__GISP]

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-popuptem... 

[MichaelLev]

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

[RobertScheitlin__GISP · Accepted solution]

Michael,

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

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

this.view.popup.defaultPopupTemplateEnabled = true;

[MichaelLev]

Dear Robert Scheitlin, GISP‌,

Thank you! it works!

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

1. Apply FeatureTable to one feature?
2. Apply FeatureTable after definitionExpression, but after displaying the table (with one feature), show all features on scene?
3. Is it possible to create featureLayer from query results? How?
4. 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));
    }
};