topic Re: Generate html from popupInfo in ArcGIS JavaScript Maps SDK Questions

Generate html from popupInfo

GavinHarriss — Fri, 03 Aug 2018 03:41:55 GMT

In 4.8 is it possible to use a PopupTemplate, PopupViewModel or similar and manually add the popupInfo from a layer, along with a desired feature and generate the raw html for use outside of the map?

We have a application where were using the layer.popupInfo.description and manually populating the attributes to generate our html, but we'd like to go one step further and also apply the rich formatting that is available under layer.popupInfo.fieldInfos[].format.

Or perhaps there is an exposed method somewhere in the JS API that will allow us to apply the fieldInfos to an attribute value one at a time manually?

Re: Generate html from popupInfo

JohnGrayson — Fri, 03 Aug 2018 15:19:47 GMT

Maybe this will help: Feature | API Reference | ArcGIS API for JavaScript 4.8

Re: Generate html from popupInfo

GavinHarriss — Thu, 09 Aug 2018 00:02:06 GMT

Thanks for steering me in the right direction John, it's very much appreciated!

It's mostly working for me now, but dates are being a problem as the popupInfo.fieldInfos "dateFormat" defined is not being applied. Dates are always being formated as an America date & time rather than the "dayShortMonthYear" defined for the field. All other formats seem to get applied without issue though e.g. number of decimal places for numeric values.

Here's the relevant code being used under the AngularJS framework:

function onLayerChanged(layer, esri) {
_graphic = new esri.Graphic({ // esri/Graphic
popupTemplate: {
          content: layer.popupInfo ? layer.popupInfo.description : '',
          fieldInfos: layer.popupInfo ? layer.popupInfo.fieldInfos : null
      }
  });
}

function onFeaturesChanged(features, esri) {
_this.parsedFeatures.length = 0;

  _this.parsedFeatures = _.map(features,
      function (feature) {
          var div = document.createElement('div');

          _graphic.attributes = feature.attributes;

          var featureWidget = new esri.Feature({ // esri/widgets/Feature
              graphic: _graphic,
              container: div
          });
          featureWidget.renderNow();

      return {
          id: feature.uid,
          html: div.outerHTML
      };
  });
}

This is the popupInfo.description being used from the layer:

"Title No: {TitleNo} Owner names: {Owners} Type: {Type} Land District: {LandDistrict} Issue Date: {IssueDate} Guarantee Status: {GuaranteeStatus} Estate Description: {EstateDescription} Area: {AREA_HA} ha"

Here are the relevant popupInfo.fieldInfos from the layer:

Original output html when we were taking the popupInfo.description and populating the attributes manually, without any formatting (html template does not include blue title area):

And more advanced html output using esri/widgets/Feature and code above (html template does not include blue title area):

As you can see, the Area numeric value is being formatted as defined in popupInfo.fieldInfos, but the Issue Date is not respecting the "dayShortMonthYear" format defined. Any ideas what I might be doing wrong? Perhaps none of the defined formats are being applied and it's all default formatting?

Re: Generate html from popupInfo

GavinHarriss — Thu, 09 Aug 2018 01:10:24 GMT

I've just noticed that the possible values defined for dateFormat in PopupTemplate | API Reference | ArcGIS API for JavaScript 4.8 is different to the dataFormat detail provided in the layer.popupInfo.fieldInfos returned by ArGIS fr the layer. So I guess this will be the reason for non-applied formatting.

Is there a helper method anywhere to convert between the two formats "dayShortMonthYear" > "day-short-month-year". I guess I could write some code to manually swap uppercase chars with a - and lowercase equivalent.

Re: Generate html from popupInfo

GavinHarriss — Thu, 09 Aug 2018 01:28:36 GMT

My updated code to transform old dateFormat into newer equivalent that works:

function onLayerChanged(layer, esri) {
var fieldInfos;
  if (layer.popupInfo) {
      fieldInfos = _.map(layer.popupInfo.fieldInfos,
          function (fieldInfo) {
              if (fieldInfo.format && fieldInfo.format.dateFormat) {
                  // Transform old dateFormat values to new equivalent e.g. "dayShortMonthYear" becomes "day-short-month-year"
                fieldInfo.format.dateFormat = getDateFormat(fieldInfo.format.dateFormat);
              }

              return fieldInfo;
            });
  }

  _graphic = new esri.Graphic({
      popupTemplate: {
          content: layer.popupInfo ? layer.popupInfo.description : '',
          fieldInfos: fieldInfos
      }
  });
}

function getDateFormat(dateFormat) {
  // Swap any older style dateFormats for newer version
  switch (dateFormat) {
      case 'shortDate':
          return 'short-date';
          break;
      case 'shortDateLE':
          return 'short-date-le';
          break;
      case 'longMonthDayYear':
          return 'long-month-day-year';
          break;
      case 'dayShortMonthYear':
          return 'day-short-month-year';
          break;
      case 'longDate':
          return 'long-date';
          break;
      case 'shortDateLongTime':
          return 'short-date-long-time';
          break;
      case 'shortDateLELongTime':
          return 'short-date-le-long-time';
          break;
      case 'shortDateShortTime':
          return 'short-date-short-time';
          break;
      case 'shortDateLEShortTime':
          return 'short-date-le-short-time';
          break;
      case 'shortDateShortTime24':
          return 'short-date-short-time-24';
          break;
      case 'shortDateLEShortTime24':
          return 'short-date-le-short-time-24';
          break;
      case 'shortDateShortTime24':
          return 'short-date-short-time-24';
          break;
      case 'shortDateLEShortTime24':
          return 'short-date-le-short-time-24';
          break;
      case 'longMonthYear':
          return 'long-month-year';
          break;
      case 'shortMonthYear':
          return 'short-month-year';
          break;
      case 'year':
          return 'year';
          break;
      default:
          return dateFormat;
  }
}