I'm using the popupTemplate's title property to show a parcel number, but it automatically formats it as a parsed local number (1,234,567) instead of leaving it as the number from the field (1234567).
I want the number to be displayed without the commas, but can't figure out how to get it to stop formatting it under the hood.
Here's a sample of my code:
this.parcelTemplate = {
title: title(),
content: [{
type: "fields",
fieldInfos: [
{
fieldName: "OwnerName",
label: "Owner"
}
]
}],
expressionInfos: [
{
name: "parcelNumber",
title: "Parcel Number",
expression: `
if ($feature.RP_ACCT_ID != 0) {
return $feature.RP_ACCT_ID
}
if ($feature.PIN != 0) {
return $feature.PIN
}
if ($feature.PNUM != null) {
return $feature.PNUM
} else {
return $feature.PIN_STRING
}`
}
]
};
function title() {
return "Parcel Number: {expression/parcelNumber}"
}
The resulting popup shows:
I think I need to use the Acade Number() function but can't figure out how to get it working since the parcelNumber expression is already returning the number in the format I want, and the title string doesn't seem to accept Arcade expressions.
Any help is much appreciated, thanks.
Solved! Go to Solution.
Simply wrap it in the Text function
return Text($feature.PNUM)
Here's a quick example combining your code with the Intro PopupTemplate sample
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Intro to PopupTemplate - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Legend"
], function(Map, FeatureLayer, MapView, Legend) {
// Create the map
var map = new Map({
basemap: "gray"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-73.95, 40.702],
zoom: 11
});
view.ui.add(new Legend({ view: view }), "bottom-left");
/*************************************************************
* The PopupTemplate content is the text that appears inside the
* popup. {fieldName} can be used to reference the value of an
* attribute of the selected feature. HTML elements can be used
* to provide structure and styles within the content. The
* fieldInfos property is an array of objects (each object representing
* a field) that is use to format number fields and customize field
* aliases in the popup and legend.
**************************************************************/
var template = {
// autocasts as new PopupTemplate()
title: title(),
content: [
{
// It is also possible to set the fieldInfos outside of the content
// directly in the popupTemplate. If no fieldInfos is specifically set
// in the content, it defaults to whatever may be set within the popupTemplate.
type: "fields",
fieldInfos: [
{
fieldName: "B12001_calc_pctMarriedE",
label: "Married %"
},
{
fieldName: "B12001_calc_numMarriedE",
label: "People Married",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "B12001_calc_numNeverE",
label: "People that Never Married",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "B12001_calc_numDivorcedE",
label: "People Divorced",
format: {
digitSeparator: true,
places: 0
}
}
]
}
],
expressionInfos: [
{
name: "parcelNumber",
title: "Parcel Number",
expression: `
return Text($feature.B12001_calc_numMarriedE);
`
}
]
};
// Reference the popupTemplate instance in the
// popupTemplate property of FeatureLayer
var featureLayer = new FeatureLayer({
url:
"https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
popupTemplate: template
});
map.add(featureLayer);
function title() {
return "Parcel Number: {expression/parcelNumber}"
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Simply wrap it in the Text function
return Text($feature.PNUM)
Here's a quick example combining your code with the Intro PopupTemplate sample
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Intro to PopupTemplate - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Legend"
], function(Map, FeatureLayer, MapView, Legend) {
// Create the map
var map = new Map({
basemap: "gray"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-73.95, 40.702],
zoom: 11
});
view.ui.add(new Legend({ view: view }), "bottom-left");
/*************************************************************
* The PopupTemplate content is the text that appears inside the
* popup. {fieldName} can be used to reference the value of an
* attribute of the selected feature. HTML elements can be used
* to provide structure and styles within the content. The
* fieldInfos property is an array of objects (each object representing
* a field) that is use to format number fields and customize field
* aliases in the popup and legend.
**************************************************************/
var template = {
// autocasts as new PopupTemplate()
title: title(),
content: [
{
// It is also possible to set the fieldInfos outside of the content
// directly in the popupTemplate. If no fieldInfos is specifically set
// in the content, it defaults to whatever may be set within the popupTemplate.
type: "fields",
fieldInfos: [
{
fieldName: "B12001_calc_pctMarriedE",
label: "Married %"
},
{
fieldName: "B12001_calc_numMarriedE",
label: "People Married",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "B12001_calc_numNeverE",
label: "People that Never Married",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "B12001_calc_numDivorcedE",
label: "People Divorced",
format: {
digitSeparator: true,
places: 0
}
}
]
}
],
expressionInfos: [
{
name: "parcelNumber",
title: "Parcel Number",
expression: `
return Text($feature.B12001_calc_numMarriedE);
`
}
]
};
// Reference the popupTemplate instance in the
// popupTemplate property of FeatureLayer
var featureLayer = new FeatureLayer({
url:
"https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
popupTemplate: template
});
map.add(featureLayer);
function title() {
return "Parcel Number: {expression/parcelNumber}"
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>