Generate html for ArcGIS popupInfo using JavaScript without the map

Question

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

We have an application where we're 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.

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 to achieve the result?

I've trawled the ArcGIS API for JavaScript docs but haven't found anything obvious that I could use to accomplish this.

Gavin Gavin · Accepted Answer · 2018-08-09T00:08:03

It turns out that the esri/widgets/Feature class is what I needed.

And here's some example code using it in an AngularJS context:

function onLayerChanged(layer, esri) {
    var fieldInfos;
    if (layer.popupInfo) {
        fieldInfos = _.map(layer.popupInfo.fieldInfos,
            function (fieldInfo) {
                if (fieldInfo.format && fieldInfo.format.dateFormat) {
                    // Transform any 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({ // esri/Graphic
        popupTemplate: {
            content: layer.popupInfo ? layer.popupInfo.description : '',
            fieldInfos: fieldInfos
        }
    });
}

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
            };
        });
}

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;
    }
}

In the code sample, I'm generating the html for each feature and storing it in _this.parsedFeatures.

Generate html for ArcGIS popupInfo using JavaScript without the map

1 Answers