FieldInfoFormat | References | ArcGIS Maps SDK for JavaScript

import FieldInfoFormat from "@arcgis/core/popup/support/FieldInfoFormat.js";

Inheritance:: FieldInfoFormat→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.11

The FieldInfoFormat class is used with numerical or date fields to provide more detail about how the value should be displayed in a popup. Use this class in place of the legacy formatting functions: DateString, DateFormat, and/or NumberFormat.

When formatting Number fields, you must set both the digitSeparator and places properties for the formatting to take effect.

See also

Example

let fieldInfo = new FieldInfo({
  fieldName: "PROMINENCE_ft",
  label: "Prominence (feet)",
  //autocasts to FieldInfo.Format
  format: {
    places: 0,
    digitSeparator: true
  }
};

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`FieldInfoFormatProperties`

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`dateFormat`	`DateFormat \| null \| undefined`
`declaredClass` readonly inherited	`string`	Accessor
`digitSeparator`	`boolean`
`places`	`number \| null \| undefined`

dateFormat

Property

Type: DateFormat | null | undefined

Used only with Date fields. Specifies how the date should appear in a popup.

Possible Values

Format	Date Formatting
short-date	12/31/1969
short-date-short-time	12/31/1969, 7 PM
short-date-short-time-24	12/31/1969, 19
short-date-long-time	12/31/1969, 7:00 PM
short-date-long-time-24	12/31/1969, 19:00
long-month-day-year	December 31, 1969
long-month-day-year-short-time	December 31, 1969, 7 PM
long-month-day-year-short-time-24	December 31, 1969, 19
long-month-day-year-long-time	December 31, 1969, 7:00 PM
long-month-day-year-long-time-24	December 31, 1969, 19:00
day-short-month-year	Dec 31, 1969
day-short-month-year-short-time	Dec 31, 1969, 7 PM
day-short-month-year-short-time-24	Dec 31, 1969, 19
day-short-month-year-long-time	Dec 31, 1969, 7:00 PM
day-short-month-year-long-time-24	Dec 31, 1969, 19:00
long-date	Wednesday, December 31, 1969
long-date-short-time	Wednesday, December 31, 1969, 7 PM
long-date-short-time-24	Wednesday, December 31, 1969, 19
long-date-long-time	Wednesday, December 31, 1969, 7:00 PM
long-date-long-time-24	Wednesday, December 31, 1969, 19:00
long-month-year	December 1969
short-month-year	Dec 1969
year	1969

The time-only date fields will only honor the time component (i.e. ShortTime, ShortTime24, LongTime or LongTime24) in a dateFormat. Date formats without a time component are not supported by time-only fields. Starting with version 4.28, date fields are formatted using the short-date-short-time format rather than long-month-day-year in popup templates created with the createPopupTemplate() method. This is also the case for default popup templates created by setting the defaultPopupTemplateEnabled property to true on the Popup.defaultPopupTemplateEnabled, Features, or Feature.defaultPopupTemplateEnabled widgets. For example, previously a date that may have appeared as "December 30, 1997" will now appear as "12/30/1997 6:00 PM". fields that need to have number formatting for chart/text elements. If displaying a timestamp-offset or date Field.type field in a Popup, Features, or Feature widget and the MapView has a MapView.timeZone set other than unknown, the abbreviated time zone suffix will be omitted from the attribute value. For example, the attribute value will display as 9/28/2014, 7:58 PM. To display an abbreviated time zone suffix, see the Read more section.

If the user wants date fields to show a time zone suffix (e.g. 9/28/2014, 7:58 PM PST), then the Arcade Text function can be used to format the field value. This can be done either with ExpressionContent or attribute expressions.
```
// Attribute expression using expressionInfos to append the time zone suffix to a date field.
// Date field types will show in the MapView's current time zone.
layer.popupTemplate = {
  title: "Display time zones",
  fieldInfos: [{
    fieldName: "expression/date-with-time-zone-suffix",
  }],
  expressionInfos: [{
    expression: `Text($feature.date_Field, "M/D/Y, h:mm A ZZZZ")`,
    name: "date-with-time-zone-suffix",
  }],
  content: [{
    type: "fields"
  }]
};
```
```
// ExpressionContent to append the time zone suffix to a date field.
// Date field types will show in the MapView's current time zone by default.
layer.popupTemplate = {
  title: "Display time zones",
  content: [{
    type: "expression",
    expressionInfo: {
      expression: `return {
        type : 'text',
        text : Text($feature.date_Field, "M/D/Y, h:mm A ZZZZ")
      }`
    }
  }]
 };
```

If the user wants timestamp-offset fields to display in the time zone from the server with an abbreviated time zone suffix, then the Arcade Text function can be used to format the field value. This can be done either with ExpressionContent or attribute expressions.

// Attribute expression using expressionInfos to append the time zone suffix to a timestamp-offset field.
layer.popupTemplate = {
  title: "Display time zones",
  fieldInfos: [{
    fieldName: "expression/TSO-from-server",
  }],
  expressionInfos: [{
    expression: `Text($feature.TimestampOffset_Field, "M/D/Y, h:mm A ZZZZ")`,
    name: "TSO-from-server",
  }],
  content: [{
    type: "fields"
  }]
};

// ExpressionContent to append the time zone suffix to a timestamp-offset field.
layer.popupTemplate = {
  title: "Display time zones",
  content: [{
    type: "expression",
    expressionInfo: {
      expression: `return {
        type : 'text',
        text : Text($feature.TimestampOffset_Field, "M/D/Y, h:mm A ZZZZ")
      }`
    }
  }]
 };

If the user wants timestamp-offset fields to display in the MapView's time zone with an abbreviated time zone suffix, then the ChangeTimeZone Arcade function can be used to format the value.

// Attribute expression using expressionInfos to append the MapView's current time zone suffix to a timestamp-offset field
layer.popupTemplate = {
  title: "Display time zones",
  fieldInfos: [{
    fieldName: "expression/TSO-matching-view-tz",
  }],
  expressionInfos: [{
    expression: `Text(ChangeTimeZone($feature.TimestampOffset_Field, GetEnvironment().timeZone), "M/D/Y, h:mm A ZZZZ")`,
    name: "TSO-matching-view-tz",
  }],
  content: [{
    type: "fields"
  }]
};

// ExpressionContent to append the MapView's current time zone suffix to a timestamp-offset field
layer.popupTemplate = {
  title: "Display time zones",
  content: [{
    type: "expression",
    expressionInfo: {
      expression: `return {
        type: "text",
        text: Text(ChangeTimeZone($feature.TimestampOffset_Field, GetEnvironment().timeZone), "M/D/Y, h:mm A ZZZZ")
      }`
    }
  }]
};

See also

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

digitSeparator

Property

Type: boolean

Used only with Number fields. A value of true indicates the number should have a digit (or thousands) separator when the value appears in popups. A value of false means that no separator will be used.

Default value: false

places

Property

Type: number | null | undefined

Used only with Number fields to specify the number of supported decimal places that should appear in popups. Any places beyond this value are rounded.

Methods

Method	Signature	Class
`fromJSON` inherited static	`fromJSON(json: any): any`	JSONSupportMixin
`clone` inherited	`clone(): this`	ClonableMixin
`toJSON` inherited	`toJSON(): any`	JSONSupportMixin

fromJSON

inheritedstatic Method

Signature: fromJSON (json: any): any

Inherited from: JSONSupportMixin

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	`any`	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

inherited Method

Signature: clone (): this

Inherited from: ClonableMixin

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

inherited Method

Signature: toJSON (): any

Inherited from: JSONSupportMixin

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.