Search code examples
javascriptangulararcgisarcgis-js-apiarcgis-server

Return all the attributes(fields) in a feature layer for a PopupTemplate - ArcGis Javascript

Is there a way to return all the attributes(fields) in a feature layer for a PopupTemplate, without declaring all of them in the fieldInfos object in Angular?

.ts

const template = {
        title: "{NAME} in {COUNTY}",
        content: ,
        fieldInfos : fieldInfos
      };
      
              
     const layer = new FeatureLayer({
      url: this.featureLayerUrl,
      visible: true,
      popupTemplate : template
      });
      
      var fieldInfos = layer.map(layer.fields, function(field){
         return {
                "fieldName": field.name,
                "label": field.alias,
                "visible": true

    webmap.add(layer);

.html

    <!-- Map Div -->

I’m using arcgis-js-api version 4.2.1.
But when I use this example it is working. (But I want to set these fields dynamically.)

const fields = [{
  name: "NAME",
  alias: "Name",
  type: "string"
    }, {
  name: "County",
  alias: "County",
  type: "string"
}, {
  
const config = {
  fields: fields,
  title: "County land"
};
Solution

  • If you just want to create the default popup template (the table with all the fields), then you just need to use FeatureLayer function createPopupTemplate, it will do everything for you (ArcGIS JS API - FeatureLayer createPopupTemplate).

    Now if you want to do some extra configuration, you can use the same method or popupUtils method, wich has an extra parameter.

    Here is an example I made for you to show a possible use, in there all I do is to change alias values to make it look nicer.

    <!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>FeatureLayer field and popup example - 4.21</title>

    <link rel='stylesheet' href='https://js.arcgis.com/4.21/esri/themes/light/main.css' />
    <script src='https://js.arcgis.com/4.21/'></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require([
            'esri/views/MapView',
            'esri/Map',
            'esri/layers/FeatureLayer',
            'esri/support/popupUtils'
        ], function (MapView, Map, FeatureLayer, popupUtils) {
            const layer1 = new FeatureLayer({
                url: 'https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1'
            });
            const layer2 = new FeatureLayer({
                portalItem: {
                    id: "f9e348953b3848ec8b69964d5bceae02"
                }
            });
            const layersToCreateMyPopupTemplate = [layer2, layer1];
            const map = new Map({
                basemap: 'gray-vector',
                layers: layersToCreateMyPopupTemplate
            });

            const view = new MapView({
                map: map,
                container: 'viewDiv',
                center: [-98, 40],
                zoom: 4
            });
            const toNiceName = function(text) {
                if (!text) {
                    return null;
                }
                return text
                    .toLowerCase()
                    .split(/_|__|\s/)
                    .join(' ');
            };
            const createMyPopupTemplate = function(layer) {
                console.log(layer.fields); // layer fields
                const config = {
                    fields: layer.fields.map(field => (
                        {
                            name: field.name,
                            type: field.type,
                            alias: toNiceName(field.alias)
                        }
                    )),
                    title: toNiceName(layer.title)
                };
                console.log(config); // config parameter
                return popupUtils.createPopupTemplate(config);
            }
            for (const layer of layersToCreateMyPopupTemplate) {
                view.whenLayerView(layer).then(function (layerView) {
                    const popupTemplate = createMyPopupTemplate(layer)
                    console.log(popupTemplate); // popup template
                    if (!popupTemplate) {
                        console.log("FeatureLayer has no fields.")
                    } else {
                        layer.popupTemplate = popupTemplate;
                    }
                });
            }
        });
    </script>
</head>

<body>
    <div id='viewDiv'></div>
</body>

</html>

    The fields property of config variable in the example autocast as an instance of esri/layers/support/Field, wich is different that the fieldInfos property of PopupTemplate that is of type FieldInfo.