popupUtils | References | ArcGIS Maps SDK for JavaScript

import { createPopupTemplate, createPopupTemplateForFeatureReduction, createFieldsContent, createFieldInfos } from "@arcgis/core/support/popupUtils.js";

const { createPopupTemplate, createPopupTemplateForFeatureReduction, createFieldsContent, createFieldInfos } = await $arcgis.import("@arcgis/core/support/popupUtils.js");

Since: ArcGIS Maps SDK for JavaScript 4.16

Various utils for working with Popup widget functionality.

Functions

createPopupTemplate

Function

Creates a popup template given the specified Config information.

Signature: createPopupTemplate (config: Config, options?: Partial<CreatePopupTemplateOptions>): PopupTemplate | null | undefined

Parameters

Parameter	Type	Description	Required
config	Config	A configuration object containing properties for creating a PopupTemplate.
options	Partial<CreatePopupTemplateOptions>	Options for creating the PopupTemplate.

Returns: PopupTemplate | null | undefined
The popup template, or null if no fields are set.

Example

// Sets the configuration for the popup template.
// Each object in this array is autocast as an instance of esri/layers/support/Field
const fields = [{
  name: "NAME",
  alias: "Name",
  type: "string"
}, {
  name: "County",
  alias: "County",
  type: "string"
}, {
  name: "ALAND",
  alias: "Land",
  type: "double"
}];

const config = {
  displayField: "County",
  fields: fields,
  title: "County land"
};

// This sets the options to ignore all fields of "date" type and sets two visible fields
const templateOptions = {
  ignoreFieldTypes: ["date"],
  visibleFieldNames: new Set(["NAME", "ALAND"])
};

const template = popupUtils.createPopupTemplate(config, templateOptions);
featureLayer.popupTemplate = template;

createPopupTemplateForFeatureReduction

Function

Since: ArcGIS Maps SDK for JavaScript 4.25

Creates a default popup template to use for FeatureReductionBinning or FeatureReductionCluster visualizations. The template will consist of a list of all the aggregate fields defined in the featureReduction property of the layer.

Signature: createPopupTemplateForFeatureReduction (params: CreatePopupTemplateForFeatureReductionParameters): PopupTemplate | null | undefined

Parameters

Parameter	Type	Description	Required
params	CreatePopupTemplateForFeatureReductionParameters	Parameters for creating a feature reduction popup template.

Returns: PopupTemplate | null | undefined
The popup template, or null if no AggregateFields are set on the feature reduction object.

Example

const popupTemplate = popupUtils.createPopupTemplateForFeatureReduction(layer);
layer.featureReduction.popupTemplate = popupTemplate;

createFieldsContent

Function

Creates fields content used for populating a PopupTemplate.

Signature: createFieldsContent (config: FieldInfosConfig, options?: Partial<CreatePopupTemplateOptions>): FieldsContent

Parameters

Parameter	Type	Description	Required
config	FieldInfosConfig	A configuration object containing properties for creating FieldsContent.
options	Partial<CreatePopupTemplateOptions>	Options for creating the PopupTemplate.

Returns: FieldsContent
Thefields content used to populate the PopupTemplate. This content contains an array of FieldInfo.

Example

// Sets the configuration for the popup template.
// Each object in this array is autocast as an instance of esri/layers/support/Field
const fields = [{
  name: "NAME",
  alias: "Name",
  type: "string"
}, {
  name: "County",
  alias: "County",
  type: "string"
}, {
  name: "ALAND",
  alias: "Land",
  type: "double"
}];

// This sets the options to ignore all fields of "date" type and sets two visible fields
const templateOptions = {
  ignoreFieldTypes: ["date"],
  visibleFieldNames: new Set(["NAME", "ALAND"])
};

// Set the FieldInfo
const fieldsConfig = {fields: fields};

// Create the Fields Content
const fieldsContent = popupUtils.createFieldsContent(fieldsConfig, templateOptions);

// Create the template and pass in the fields content
const template = {
  title: "County Land",
  outFields: ["*"],
  content: [fieldsContent]
  };

// Set the feature layer's popup template
featureLayer.popupTemplate = template;

createFieldInfos

Function

Creates an array of FieldInfo used for populating FieldsContent.

Signature: createFieldInfos (config: FieldInfosConfig, options?: Partial<CreatePopupTemplateOptions>): FieldInfo[]

Parameters

Parameter	Type	Description	Required
config	FieldInfosConfig	A configuration object containing properties for creating FieldInfo.
options	Partial<CreatePopupTemplateOptions>	Options for creating the PopupTemplate.

Returns: FieldInfo[]
An array of FieldInfo content used to populate the FieldsContent, which in turn is used to populate the PopupTemplate. By default, system fields, e.g. Shape__Area and Shape__Length, OID, etc, do not display.

Example

// Sets the configuration for the popup template.
// Each object in this array is autocast as an instance of esri/layers/support/Field
const fields = [{
  name: "NAME",
  alias: "Name",
  type: "string"
}, {
  name: "County",
  alias: "County",
  type: "string"
}, {
  name: "ALAND",
  alias: "Land",
  type: "double"
}];

// This sets the options to ignore all fields of "date" type and sets two visible fields
const templateOptions = {
  ignoreFieldTypes: ["date"],
  visibleFieldNames: new Set(["NAME", "ALAND"])
};

// Set the FieldInfo
const fieldsConfig = {fields: fields};

// Create the FieldInfos
const fieldInfos = popupUtils.createFieldInfos(fieldsConfig, templateOptions);

// Sets the FieldsContent
const fieldsContent = new FieldsContent({
  fieldInfos: fieldInfos
});

// Create the template and pass in the fields content
const template = {
  title: "County Land",
  outFields: ["*"],
  content: [fieldsContent]
  };

// Set the feature layer's popup template
featureLayer.popupTemplate = template;

Type definitions

FieldInfosConfig

Type definition

A configuration object containing field properties for creating FieldsContent for a PopupTemplate.

editFieldsInfo

Property

Type: EditFieldsInfo | null | undefined

The fields that record who adds or edits data in the feature service and when the edit is made.

fields

Property

Type: Field[] | null | undefined

The fields displayed within the PopupTemplate.

objectIdField

Property

Type: string | null | undefined

The object id field.

Example

// Sets the configuration for the popup template.
// Each object in this array is autocast as an instance of esri/layers/support/Field
const fieldsConfig = [{
  name: "NAME",
  alias: "Name",
  type: "string"
}, {
  name: "County",
  alias: "County",
  type: "string"
}, {
  name: "ALAND",
  alias: "Land",
  type: "double"
}];

Config

Type definition

A configuration object containing properties for creating a PopupTemplate.

Supertypes: FieldInfosConfig

displayField

Property

Type: string | null | undefined

The display field.

title

Property

Type: string | null | undefined

The title for the PopupTemplate.

Example

// Sets the configuration for the popup template.
// Each object in this array is autocast as an instance of esri/layers/support/Field
const fields = [{
  name: "NAME",
  alias: "Name",
  type: "string"
}, {
  name: "County",
  alias: "County",
  type: "string"
}, {
  name: "ALAND",
  alias: "Land",
  type: "double"
}];

const config = {
  displayField: "County",
  fields: fields,
  title: "County land"
};

CreatePopupTemplateForFeatureReductionParameters

Type definition

featureReduction

Property

Type: FeatureReductionBinning | FeatureReductionCluster

The FeatureReduction object for which to create a default popup template.

fields

Property

Type: Field[] | null | undefined

The fields of the layer aggregated during the feature reduction process. These should correspond to any fields used in the definition of the aggregate fields of the feature reduction instance provided to this function.

title

Property

Type: string | undefined

The title to display in the popup template.

CreatePopupTemplateOptions

Type definition

Options for creating the PopupTemplate.

ignoreFieldTypes

Property

Type: Field["type"][] | null | undefined

An array of field types to ignore when creating the popup. System fields such as Shape_Area and Shape_length, in addition to geometry, blob, raster, guid and xml field types are automatically ignored.

visibleFieldNames

Property

Type: Set<string> | null | undefined

An array of field names set to be visible within the PopupTemplate.

Example

// This sets the options to ignore all fields of "date" type and sets two visible fields
const templateOptions = {
  ignoreFieldTypes: ["date"],
  visibleFieldNames: new Set(["NAME", "ALAND"])
};