Return all Fields in PopupTemplate

[JoeJeurissen]

Is there a way to return all the attributes for a PopupTemplate without declaring all of them in the fieldInfos object?  For a InfoTemplate all you have to do is this to return every attribute.

var template=new esri.InfoTemplate("My Title","${*}");

I've tried a bunch of different ways and the closest I came up with is:

var template=new esri.dijit.PopupTemplate({
  title: result.layerName,
  fieldInfos: [{ fieldName: "*",visible: true}]
 });

The problem with that is there is only 1 returned key/value pair.  The key is the asterisk and the single value is all of the results grouped together.

[JeffPace]

I know this is old, but did you ever find a solution to this? our function queries a variety of services and it is impossible to predefine a template

thanks

[BenFousek]

Jeff,
I use a function to return a simple table of attribute pairs. This also tests values against a URL regular expression.

//generic table of attribures
attributeTable: function (atts) {
  var table = '<table cellspacing="0" cellpadding="2" style="width:100%;">';
  for (var i in atts) {
    var value = atts;
    var exp = new RegExp(/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/);
    if (exp.test(value)) {
      value = '<a href="' + atts + '" title="' + atts + '" target="_blank">Hyperlink</a>'
    }
    table += '<tr><td><b>' + i + '</b></td><td>' + value + '</td></tr>';
  }
  table += '</table>';
  return table
}

//generic use
app.utility.attributeTable(feat.attributes);

//used for content of infoWindow
it.setContent('<div style="font-size:9px;">' + app.utility.attributeTable(feat.attributes) + '</div>');


//use this one to do the same but also get field aliases for fields of a feature layer
featureAttributeTable: function (atts, feature) {
  var table = '<table cellspacing="0" cellpadding="2" style="width:100%;">';
  for (var i in atts) {
    var alias;
    dojo.forEach(feature.fields, function (field) {
      if (field.name === i) {
        alias = field.alias;
      }
    });
    var value = atts;
    var exp = new RegExp(/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/);
    if (exp.test(value)) {
      value = '<a href="' + atts + '" title="' + atts + '" target="_blank">Hyperlink</a>'
    }
    table += '<tr><td><b>' + alias + '</b></td><td>' + value + '</td></tr>';
  }
  table += '</table>';
  return table
}

[KellyHutchins]

Jeff,

Here's an approach similar to what Ben is doing - basically it gets the field info from the layer and loops through to build the fieldInfos object.

        var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
          
        featureLayer.on("load", function(){
          var fieldInfos = array.map(featureLayer.fields, function(field){
            return {
              "fieldName": field.name,
              "label": field.alias,
              "visible": true
            }
          });

          var template = new PopupTemplate({
            title: "Boston Marathon 2013",
            fieldInfos: fieldInfos
          });
          featureLayer.setInfoTemplate(template);
    
        });
   
        map.addLayer(featureLayer);

[JasonZou]

ESRI should provide an easy way to allow display all the fields in the popup template, like if fieldInfos not provided, all the fields will be displayed. Anyway, before ESRI has a solution, we have to come up with one ourselves. Here is the one I am using. The whole idea is to request the layer info first. Then populate fieldInfos with the layer fields returned. This way, you need to hard code the fields for each layer. Hope it helps.

    var layerUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/0";
    var layerInfoRequest = esri.request({
         url: layerUrl,
         content: { f: "json" },
         handleAs: "json",
         callbackParamName: "callback"
    });
    layerInfoRequest.then(function(response) {
         var fieldInfos = array.map(response.fields, function(aField) {
              return {
                   fieldName: aField.name,
                   label: aField.alias,
                   visible: true
              };
         });
         infoTemplate = new esri.dijit.PopupTemplate({
              title: response.name,
              fieldInfos: fieldInfos
         });
         console.log("Success: ", response.layers);
    }, function(error) {
         console.log("Error: ", error.message);
    });

[KellyHutchins]

If you just want to display all the fields along with the title you can use an InfoTemplate with a popup window. Just define the info template as follows:

var infoTemplate = new esri.InfoTemplate("Title Here", "${*}");

[JasonZou]

Does ${*} apply to PopupTemplate as well?

[TobiasBrühlmeier1]

Same question: Does ${*} apply to PopupTemplate as well?

[RobertScheitlin__GISP]

Tobias,

  Sure here is an example:

var template = new PopupTemplate({
    title: "Boston Marathon 2013",
    description: "{*}"
});

[Fui_FangThong]

I tried with "{*}" and "${*}" but the feature service layer won't load. Not sure what is missing or wrong. Please advise.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to PopupTemplate - 4.8</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
      "esri/Map",
      "esri/PopupTemplate",   
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(
      Map,
      PopupTemplate,
      FeatureLayer,
      MapView
    ) {

      // Create the map
      var map = new Map({
        basemap: "gray"
      });

      // Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.950, 40.702],
        zoom: 11
      });

      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });
      
      featureLayer.on("load", function(){  
          var fieldInfos = array.map(featureLayer.fields, function(field){  
            return {  
              "fieldName": field.name,  
              "label": field.alias,  
              "visible": true  
            }  
          });  
  
        var template = new PopupTemplate({  
          title:"Marriage in NY, Zip Code: {ZIP}", 
          description: "{*}"  
          });  
        featureLayer.setInfoTemplate(template); 
          
        });  
        map.addLayer(featureLayer);  
        
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍