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