Generate html from popupInfo

640
4
Jump to solution
08-02-2018 08:41 PM
GavinHarriss
New Contributor

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?

0 Kudos
1 Solution

Accepted Solutions
JohnGrayson
Esri Regular Contributor
4 Replies
JohnGrayson
Esri Regular Contributor
GavinHarriss
New Contributor

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:

"<b>Title No:</b> {TitleNo}<br /><b>Owner names:</b> {Owners}<b><br />Type:</b> {Type}<br /><b>Land District:</b> {LandDistrict}<br /><b>Issue Date:</b> {IssueDate}<br /><b>Guarantee Status:</b> {GuaranteeStatus}<br /><b>Estate Description:</b> {EstateDescription}<br /><b>Area:</b> {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?

0 Kudos
GavinHarriss
New Contributor

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.

0 Kudos
GavinHarriss
New Contributor

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

0 Kudos