How to get the title of a feature in JSAPI 4.x

HoriaTudosie · ‎01-18-2019

In JsApi 3.x I had this convenient method:

feature.layer.infoTemplate.title(feature);

What is the eqivalent method for JsApi 4.x (I assume infoTemplate from 3 becomes popupTemplate in 4, but title is no more a method: as a property, it returns a pattern with names of involved fields in accolades (as "{Incident_Types} incident on {Reported_Date}"), but is very hard to format field types like dates to the internal (locale) format (long-month-day-year - for example.)

(A related question on getting popup content may come soon, so if having a related solution - please put it here.)

RobertScheitlin__GISP · ‎01-20-2019

Horia,

This is the only way I have found to get the features title based on the PopupTemplate.

<!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.10</title>

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

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

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView"
    ], function(
      Map,
      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
      });

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      var template = { // autocasts as new PopupTemplate()
        title: "Marriage in NY, Zip Code: {ZIP}",
        content: [{
          // It is also possible to set the fieldInfos outside of the content
          // directly in the popupTemplate. If no fieldInfos is specifically set
          // in the content, it defaults to whatever may be set within the popupTemplate.
          type: "fields",
          fieldInfos: [{
            fieldName: "MARRIEDRATE",
            label: "Married %",
            visible: true
          }, {
            fieldName: "MARRIED_CY",
            label: "People Married",
            visible: true,
            format: {
              digitSeparator: true,
              places: 0
            }
          }, {
            fieldName: "NEVMARR_CY",
            label: "People that Never Married",
            visible: true,
            format: {
              digitSeparator: true,
              places: 0
            }
          }, {
            fieldName: "DIVORCD_CY",
            label: "People Divorced",
            visible: true,
            format: {
              digitSeparator: true,
              places: 0
            }
          }]
        }]
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(featureLayer);
      featureLayer.when(function(){
        var query = featureLayer.createQuery();
        query.where = "OBJECTID_1 = 8";
        featureLayer.queryFeatures(query).then(function(results){
          var popupTemplate = results.features[0].getEffectivePopupTemplate();
          results.features[0].popupTemplate = popupTemplate;
          view.popup.features = results.features;
          setTimeout(function(){
            console.info(view.popup.title);
          }, 10);
        });
      });

    });
  </script>
</head>

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

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

HoriaTudosie · ‎01-21-2019

Thanks for the solution. Unfortunately did not work for me.
My goal is to list all visible features on all visible layers in the current extent as depicted in my application using JSAPI 3.x: Accessible Viewer

Both the title and the content are defined with the Map Viewer in the popup options.

The title for the above features is defined as "{Incident_Types} incident on {Reported_Date}" where the Reported_Date has a format in Field Definitions as "long-month-day-year" (which is not quite a standard js format...) - in English! (as the application supports localization, in French it has another value.)

As I said, JsApi 3.8 contains a very covenient method to get the string representation of the title for a certain feature (and as well a way to render the content in a dojo ContentPanel(!)) without populating a virtual popup.

Populating the popup is very slow and (because I've skip the setTimeout) all features in my view result with same title (as well when I popup the info window on any feature on the view!)

RobertScheitlin__GISP · ‎01-21-2019

Horia,

Well as you know that convent function does not exist in 4.x so you have to find workarounds like that one I provided. The setTimeout is essential to make sure the popup has the feature set and the values of the popup parsed. 10 milliseconds is not a long time to wait.

HoriaTudosie · ‎01-21-2019

Thanks,

Well, as my work order is not to reinvent the wheel (from head of TSG department,) unless there is no other option, may I ask you whom to address this request, if not to you:

getTitle and getContent (in whatever form) are very important features. As I've already pointed out, the formats specified in FieldInfo are not JS formats but proprietary for MapViewer and JsApi. There are not only for dates but also for times and numbers. I have already explored the possibility of writing a mixin function that takes in to account the title template, the attributes and the format (when exists) from FieldInfo when I have evaluated the JsApi 3.x. It is work intensive and there is always the possibility to miss some formats. The application cannot know in advance what formats to expect.

These functions already exist in the API (for the popup purpose.)

The question is: "Is it possible for Javascript API Development to expose them in a further version of the API 4? I'm not in a hurry with my solution - I can wait."

RobertScheitlin__GISP · ‎01-21-2019

Horia,

As an esri employee you have channels to request an enhancement to the API. Since it seems you are unfamiliar with these channels I would suggest asking a coworker if they are. US customers can just contact esri tech support and file an enhancement request or submit an Idea online