import NumberFieldFormat from "@arcgis/core/layers/support/NumberFieldFormat.js";const NumberFieldFormat = await $arcgis.import("@arcgis/core/layers/support/NumberFieldFormat.js");- Inheritance:
- NumberFieldFormat→
FieldFormat→ Accessor
- Since
- ArcGIS Maps SDK for JavaScript 4.34
The NumberFieldFormat class defines the formatting options for numeric field types. It is used in the FieldConfiguration class to define the display format of fields in a FeatureLayer. It is also used in the FieldInfo class to define the display format of fields content in a PopupTemplate.content.
It applies to both the map's popup and any components/widgets that display the field.
Breaking change
Numeric fields with decimal values are now automatically formatted with a limit on decimal places. For example, a value such as 1.234566788 would display with all available decimal places in the FeatureTable. Now, if no field configurations are defined, components automatically limit the display to two decimal places (1.23). To customize this behavior, define field configurations on your layer.
Numeric Format Mappings
The following tables show equivalencies between the legacy FieldInfoFormat.places and FieldInfoFormat.digitSeparator values and NumberFieldFormat properties. The examples shown are for the en-US locale. Note that the actual display will vary based on the locale of the user.
Integer Field Types
| Legacy | NumberFieldFormat equivalency | Example (en-US) |
|---|---|---|
digitSeparator = true | useGrouping = "always" | 1,234,567 |
digitSeparator = false | useGrouping = "never" | 1234567 |
Floating-point field types
| Legacy | NumberFieldFormat equivalency | Example: (en-US) Input | NumberFieldFormat output |
|---|---|---|---|
digitSeparator = true, places = 4 | useGrouping = "always", minimumFractionDigits = 4, maximumFractionDigits = 4 | 1,234.5678 | 1,234.5678 |
digitSeparator = false, places = 4 | useGrouping = "never", minimumFractionDigits = 4, maximumFractionDigits = 4 | 1234.5678 | 1234.5678 |
digitSeparator = false, places = 3 | useGrouping = "never", minimumFractionDigits = 2, maximumFractionDigits = 3 | 1234.323443 | 1234.323 |
digitSeparator = true, places = 2 | useGrouping = "auto", minimumFractionDigits = 3, maximumFractionDigits = 3 | 1,234.323443 | 1,234.323 |
Example
// Create a number field formatconst numberFieldFormat = new NumberFieldFormat ({ minimumFractionDigits: 1, maximumFractionDigits: 3, useGrouping: "never"});
// Create a field configuration object containing the number formatconst numberFieldConfiguration = new FieldConfiguration ({ name: "voterCount", // name of the field in the service fieldFormat: numberFieldFormat, alias: "Voter Count"});
// Create a feature layer and pass in the field configurationsconst featureLayer = new FeatureLayer ({ url: "url to feature layer", outFields: ["*"], fieldConfigurations: [numberFieldConfiguration] // add as many field configurations as needed});Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
declaredClass readonly inherited | ||
| | ||
| | ||
style readonly | | |
type readonly | "number" | |
| |
maximumFractionDigits
- Type
- number
The maximum number of decimal places to display. If the number has more decimal places, it will be rounded to the nearest value with the specified number of decimal places. For example, if maximumFractionDigits is set to 2, the number 3.456 will be displayed as 3.46.
- See also
minimumFractionDigits
- Type
- number
The minimum number of decimal places to display.
If the number has fewer decimal places, it will be padded with trailing zeros.
If the number has more decimal places, it will be rounded to the nearest value
with the specified number of decimal places.
For example, if minimumFractionDigits is set to 2, the number 3.1 will be displayed as 3.10 and the number 3.456 will be displayed as 3.46.
- See also
style
- Type
- Style
The formatting style to use. Support is currently limited to decimal style.
- See also
- Default value
- decimal
useGrouping
- Type
- Grouping
Indicates whether to use grouping separators, such as thousands separators. For example, if useGrouping is set to always, the number 1234567 will be displayed as 1,234,567. If set to never, the number will be displayed as 1234567. auto is the default value and uses grouping separators based on the locale and the number of digits.
- See also
- Default value
- auto
Methods
fromJSON
- Signature
-
fromJSON (json: any): any
Creates a new instance of this class and initializes it with values from a JSON object
generated from an ArcGIS product. The object passed into the input json
parameter often comes from a response to a query operation in the REST API or a
toJSON()
method from another ArcGIS product. See the Using fromJSON()
topic in the Guide for details and examples of when and how to use this function.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| json | A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects. | |
- Returns
- any
Returns a new instance of this class.
clone
- Signature
-
clone (): this
Creates a deep clone of this object. Any properties that store values by reference will be assigned copies of the referenced values on the cloned instance.
- Returns
- this
A deep clone of the class instance that invoked this method.
toJSON
- Signature
-
toJSON (): any
Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.
- Returns
- any
The ArcGIS portal JSON representation of an instance of this class.