How to change the format of field's value in a feature layer integrated with ArcGIS Esri map?

Question

I have integrated a Parcel Layer in the ArcGIS Esri map inside Angular application. But now I want to change the format of some values coming up in the popup template when user clicks on certain Parcel.

Now my popup values looks like this.

ASSMT_YEAR - 2,017.00

ATTDATE - 20190130

BATHROOMS - 0.00

Requirement

ASSMT_YEAR and YEAR_BUILT value format should not include commas or decimals.

ATTDATE and REC_DATE value format should be in date format.(01/30/2019)

How can I achieve above requirement?

.ts file

const createEsriPopupTemplate = function(layer) {
    const config = {
        fields: layer.fields.map(field => (
            {
                name: field.name,
                type: field.type,
            }
        )),
        title: formatName(layer.title),
        
    };
    return popupUtils.createPopupTemplate(config);
  }


  for (const layer of esriLayers) {
    view.whenLayerView(layer).then(function (layerView) {
        const popupTemplate = createEsriPopupTemplate(layer)
        if (!popupTemplate) {
            console.log("FeatureLayer has no fields.")
        } else {
            layer.popupTemplate = popupTemplate;
        }
    });
  }

score 2 · Answer 1 · answered Jan 07 '22 at 11:47

To format the fields for the popup, you can use format property of popup fieldInfos.

ArcGIS JS API - Field Info Format

In your case I think this config should work,

fieldInfos: [
    {
        fieldName: "ASSMT_YEAR",
        label: "ASSMT Year",
        format: {
            dateFormat: "short-date"
        }
    },
    {
        fieldName: "ATTDATE",
        label: "Attendance Date",
        format: {
            dateFormat: "short-date"
        }
    },
    {
        fieldName: "BATHROOMS",
        label: "Bathrooms"
        format: {
            digitSeparator: true,
            places: 0
        }
    }
]

Now, you are generating the popup using popupUtils.createPopupTemplate function. So to continue in that path, you will need to change a bit.

First you need to know what fields to change, and in that regard you will have to use something, for example the field type.

Second, the easy change I think it would be instead of popupUtils.createPopupTemplate, use popupUtils.createFieldInfos and follow the doc example.

How to change the format of field's value in a feature layer integrated with ArcGIS Esri map?

1 Answers1