import type Collection from "./core/Collection.js"; import type ExpressionInfo from "./popup/ExpressionInfo.js"; import type FieldInfo from "./popup/FieldInfo.js"; import type LayerOptions from "./popup/LayerOptions.js"; import type { ClonableMixin } from "./core/Clonable.js"; import type { JSONSupport } from "./core/JSONSupport.js"; import type { PopupTemplateContent, PopupTemplateContentCreated, PopupTemplateCreatorEvent, PopupTemplateTitle } from "./popup/types.js"; import type { ContentProperties } from "./popup/content/Content.js"; import type { PopupAction } from "./widgets/Popup/types.js"; import type { ActionToggleProperties } from "./support/actions/ActionToggle.js"; import type { ActionButtonProperties } from "./support/actions/ActionButton.js"; import type { ReadonlyArrayOrCollection } from "./core/Collection.js"; import type { ExpressionInfoProperties } from "./popup/ExpressionInfo.js"; import type { FieldInfoProperties } from "./popup/FieldInfo.js"; import type { LayerOptionsProperties } from "./popup/LayerOptions.js"; export interface PopupTemplateProperties extends Partial> { /** * A [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/) of [action](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionButton/) or [action toggle](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionToggle/) objects. * Each object represents an action or function that may be executed by clicking the icon * or image symbolizing them in the [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/). By default, every * [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) has a `zoom-to` action styled with a magnifying glass icon * ![popupTemplate-zoom-action](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popuptemplate-zoom-action.png). * When this icon is clicked, the view zooms in four LODs and centers on the selected feature. * * PopupTemplates do not have default actions. To override actions on the * [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) using PopupTemplate see [overwriteActions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#overwriteActions). * Actions defined in a PopupTemplate will only appear in the [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) for * features or layers that apply that particular PopupTemplate. * * The order of each action in the popup is the same order in which they appear in * the actions [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/). * * The [Popup.@trigger-action](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/#event-trigger-action) event in * [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) fires each time an action in the popup is clicked. * This event should be used to execute custom code for each action clicked. For example, if you would * like to add a `zoom-out` action to the PopupTemplate that zooms the view out several LODs, you would * define the zoom-out code in a separate function. Then you would call the custom `zoom-out` function * in the [Popup.@trigger-action](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/#event-trigger-action) event handler. See the sample code * snippet below for more details on how this works. * * Actions are defined with the properties listed in the [ActionButton](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionButton/) or [ActionToggle](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionToggle/) class. * * @see [Sample - Popup actions](https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/) * @see [Sample - Custom popup actions per feature](https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/) * @see [Sample - Popup with edit action](https://developers.arcgis.com/javascript/latest/sample-code/popup-editaction/) * @example * // Defines an action to zoom out from the selected feature * let zoomOutAction = { * // This text is displayed as a tooltip * title: "Zoom out", * // The ID by which to reference the action in the event handler * id: "zoom-out", * // Sets the icon font used to style the action button * className: "esri-icon-zoom-out-magnifying-glass" * }; * // Adds the custom action to the PopupTemplate. * popupTemplate.actions.push(zoomOutAction); * // Apply this PopupTemplate to a layer (or graphic) * layer.popupTemplate = popupTemplate; * // This action will only appear in the popup for features in that layer * * // The function to execute when the zoom-out action is clicked * function zoomOut() { * // In this case the view zooms out two LODs on each click * view.goTo({ * center: view.center, * zoom: view.zoom - 2 * }); * } * * // This event fires for each click on any action * // Notice this event is handled on the default popup of the View * // NOT on an instance of PopupTemplate * view.popup.on("trigger-action", function(event){ * // If the zoom-out action is clicked, fire the zoomOut() function * if(event.action.id === "zoom-out"){ * zoomOut(); * } * }); */ actions?: ReadonlyArrayOrCollection<((ActionButtonProperties & { type: "button" }) | (ActionToggleProperties & { type: "toggle" }))> | null; /** * The template for defining and formatting a popup's content. * * * **String** - A popup's content can be a simple text or string value referencing field * values or [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) expressions. Expressions must be defined in * the [expressionInfos](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#expressionInfos) property. * * **Popup elements** - You can also display content as popup elements. There are various types of * elements which can be used individually or combined. The order in which they are set determines * how they display within the popup. See the items below describing each element. * - **text** - A [text content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/TextContent/) * that provides descriptive text as content. * - **media** - A [media content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/MediaContent/) * that is used to display media such as charts/images. * - **fields** - A [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/). * that contains the fields to display within the content. If this is not set * directly within the `content` property, the popup will display whatever is set in the * [fieldInfos](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#fieldInfos) property. * - **attachments** - An [attachments content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/AttachmentsContent/) * that contains attachments associated with the feature. * - **expression** - An [expression content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/ExpressionContent/) that contains an [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) * expression evaluating to a dictionary representing a [TextContent](https://developers.arcgis.com/javascript/latest/references/core/popup/content/TextContent/), * [FieldsContent](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/), or a [MediaContent](https://developers.arcgis.com/javascript/latest/references/core/popup/content/MediaContent/) popup element as * defined in the [Popup Element web map specification](https://developers.arcgis.com/web-map-specification/objects/popupElement/). * - **relationship** - A [relationship content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/RelationshipContent/) associated with a feature. * - **custom** - A [custom content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/CustomContent/) * that contains custom content. * * **promise** - The PopupTemplate's content may also be defined with a promise that resolves to any of the * above-mentioned elements. This is useful for cases when you call a method or execute a query and want * to display the results in the popup. Simply pass the promise to the popupTemplate's content and ensure * that it resolves to a string or other popup element. * * **function** - Content may be defined with a JavaScript function that returns any of the above-mentioned * elements. This is useful when your popup requires additional processing or functionality than what is * provided with the content types listed above. For example, assume that you would like to * display charts using third-party JavaScript libraries or categorize information into separate tabs. * In these cases, you can use a function that returns either a string, a reference to an * HTML element, a popup element, or a promise. * When the feature is clicked, the feature is passed as an argument to the function and provides * access to the feature's graphic and attributes. Set the [outFields](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#outFields) property to * specify any fields needed for rendering the popup and set the [returnGeometry](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#returnGeometry) property * to `true` if needing access to the associated feature's geometry. * The function then executes and returns a value to display in the popup template. * * > [!CAUTION] * > * > **Note:** Autocasting does not apply when creating content via a function or promise. * * @see [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) * @see [FieldInfoFormat](https://developers.arcgis.com/javascript/latest/references/core/popup/support/FieldInfoFormat/) * @see [ExpressionInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/ExpressionInfo/) * @see [Sample - Multiple popup elements](https://developers.arcgis.com/javascript/latest/sample-code/popup-multipleelements/) * @see [Sample - PopupTemplate function](https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-function/) * @see [Sample - PopupTemplate with promise](https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-promise/) * @see [Sample - Browse related records in a popup](https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-browse-related-records/) * @see [Sample - Custom popup content](https://developers.arcgis.com/javascript/latest/sample-code/popup-customcontent/) * @example * // Set a simple string to a popupTemplate's content * // The string references a value from the POP_2015 attribute field * layer.popupTemplate = { * content: "{POP_2015} people live in this census tract" * }; * @example * // Set a simple string to a popupTemplate's content * // referencing the value returned from an Arcade expression * layer.popupTemplate = { * content: "{expression/per-total}% of people in this boundary have a college education.", * expressionInfos: [{ * name: "per-total", * expression: "Round((($feature.bachelor + $feature.master + $feature.doctorate) / $feature.TOT_POP) * 100, 2)" * }] * }; * @example * // Display a table in the popup's content referencing two values * // one from a field, and another returned from an Arcade expression * layer.popupTemplate = { * title: "College Education in {NAME}", * content: [ * { * type: "fields", // Autocasts as new FieldsContent() * // Autocasts as new FieldInfo[] * fieldInfos: [ * { * fieldName: "TOT_POP", * label: "Total population (2023)", * format: { * digitSeparator: true * } * }, * { * fieldName: "expression/college" * }] * }], * // autocasts to ExpressionInfo class * expressionInfos: [{ * name: "college", * title: "Completed a college degree", * expression: "$feature.bachelor + $feature.master + $feature.doctorate" * }] * }; * @example * // The following snippet shows how to set various popup element types within the template's * // content. This snippet also works with related tables. * layer.popupTemplate.content = [{ * type: "fields", // Autocast as new FieldsContent() * // Autocast as new FieldInfo[] * fieldInfos: [{ * fieldName: "Point_Count", * visible: false, * label: "Count of Points", * // Autocast as new FieldInfoFormat() * format: { * places: 0, * digitSeparator: true * } * }, { * fieldName: "relationships/0/Point_Count_COMMON", * visible: true, * label: "Sum of species tree count", * format: { * places: 0, * digitSeparator: true * }, * statisticType: "sum" * }] * }, { * // Autocasts as new TextContent() * type: "text", * text: "There are {Point_Count} trees within census block {BLOCKCE10}" * }, { * * // Autocasts as new MediaContent() * type: "media", * mediaInfos: [{ * title: "Count by type", * type: "pie-chart", // Autocasts as new PieChartMediaInfo() * caption: "", * // Autocasts as new ChartMediaInfoValue() * value: { * fields: [ "relationships/0/Point_Count_COMMON" ], * normalizeField: null, * tooltipField: "relationships/0/COMMON" * } * }, { * title: "Mexican Fan Palm", * type: "image", // Autocasts as new ImageMediaInfo() * caption: "tree species", * // Autocasts as new ImageMediaInfoValue() * value: { * sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg" * } * }] * }, { * // if attachments are associated with feature, display it. * // Autocasts as new AttachmentsContent() * type: "attachments" * }]; * @example * // The following snippet shows how to set a popupTemplate * // on the returned results (features) from identify * * idResult.feature.popupTemplate = { * title: "{NAME}", * content: [{ * // Pass in the fields to display * type: "fields", * fieldInfos: [{ * fieldName: "NAME", * label: "Name" * }, { * fieldName: "REGION", * label: "Region" * }] * }] * }; */ content?: PopupTemplateContentCreated | ContentProperties[] | Promise | ((event: PopupTemplateCreatorEvent) => PopupTemplateContentCreated | ContentProperties[] | Promise) | null; /** * An array of objects or [ExpressionInfo[]](https://developers.arcgis.com/javascript/latest/references/core/popup/ExpressionInfo/) that reference * [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) expressions following * the specification defined by the [Arcade Popup Profile](https://developers.arcgis.com/javascript/latest/arcade/#popup). * * @since 4.4 * @see [Arcade Popup Profile](https://developers.arcgis.com/javascript/latest/arcade/#popup) * @see [Arcade Feature Reduction Popup Profile](https://developers.arcgis.com/javascript/latest/arcade/#feature-reduction-popup) * @example * // Displays two values returned from Arcade expressions * // in a table within the popup when a feature is clicked * layer.popupTemplate = { * content: [{ * type: "fields", // Autocasts as new FieldsContent() * // Autocasts as new FieldInfo[] * fieldInfos: [{ * fieldName: "expression/college" * }, { * fieldName: "expression/nocollege" * }] * }], * // autocasts to ExpressionInfo class * expressionInfos: [{ * name: "college", * title: "Completed a college degree", * expression: "$feature.bachelor + $feature.master + $feature.doctorate" * }, { * name: "nocollege", * title: "Did not complete a college degree", * expression: "$feature.elementary + $feature.middle + $feature.highschool + $feature.somecollege" * }] * }; * @example * // Displays a value returned from an Arcade expression within * // a simple string defined in the popupTemplate's content * layer.popupTemplate = { * content: "{expression/per-total}% of people in this boundary have a college education.", * expressionInfos: [{ * name: "per-total", * expression: "Round((($feature.bachelor + $feature.master + $feature.doctorate) / $feature.TOT_POP) * 100, 2)" * }] * }; */ expressionInfos?: ExpressionInfoProperties[] | null; /** * An array of [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) that defines how fields in the dataset * or values from [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) expressions participate * in a popup. If no [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) are specified, nothing will display since * the popup will only display the fields that are defined by this array. * Each [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) contains properties for a single field * or expression. This property can be set directly within the PopupTemplate or * within the [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/). * If this is not set within the [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/), * it will default to whatever is specified directly within the `PopupTemplate.fieldInfos`. * * > [!WARNING] * > * > Use this `fieldInfos` property to display fields from related tables in chart or text elements. * > `FieldInfos` set within the template's [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/) take precedence over the `PopupTemplate.fieldInfos`. * * The image on the left is a result of using the first example snippet below, whereas the image on the right is a result of the second snippet. * * | **Content set using 'fields' type** | **Content referenced from fields set within fieldInfo** | * | -------------------------- | --------------------------- | * | ![popuptemplate-fields](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popuptemplate-fields.png) | ![popuptemplate-fieldinfocontent](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popuptemplate-fieldinfocontent.png) | * * @example * // This snippet demonstrates how to show only a subset of fields. * // By setting the 'type: "fields"', and providing the fieldInfos, * // only field data will display within this feature layer's popuptemplate. * // If no fieldInfos is specified directly in the content, the popup defaults * // to whatever is set in the popupTemplate.fieldInfos. * let popupTemplate = new PopupTemplate({ * // autocasts as new PopupTemplate() * title: "{NAME} in {COUNTY}", * outFields: ["*"], * 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 * } * }] * }] * }); * @example * // This snippet demonstrates setting the popup's content by referencing * // specific fields defined within the popupTemplate's fieldInfos. * let popupTemplate = new PopupTemplate({ * title: "{NAME} in {COUNTY}", * outFields: ["*"], * content: "Census data indicates that {B12001_calc_numMarriedE} people were married in {NAME}, {COUNTY}. The overall percentage of married people is {B12001_calc_pctMarriedE}%.", * fieldInfos: [{ * fieldName: "B12001_calc_pctMarriedE", * },{ * fieldName: 'B12001_calc_numMarriedE', * format: { * places: 0, * digitSeparator: true * } * }] * }); */ fieldInfos?: FieldInfoProperties[] | null; /** * Additional options that can be defined for the popup layer. * * @since 4.5 */ layerOptions?: LayerOptionsProperties | null; } /** * A PopupTemplate formats and defines the content of a [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) for * a specific [Layer](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/) or [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/). The user can also use * the PopupTemplate to access values from feature attributes and values returned * from [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) expressions when a feature in the * view is selected. * * The PopupTemplate contains [title](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#title) and [content](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#content) properties * that act as a template used to transform a feature's * [Graphic.attributes](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#attributes) into an HTML representation. * The syntax `{fieldName}` or `{expression/expressionName}` performs parameter * substitution. The default behavior on a [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/) is to show the * view's Popup after a * click on the [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/). A PopupTemplate is required for this * default behavior. * * PopupTemplate also allows you to format the `Number` and `Date` field values and * override field aliases with * the [fieldInfos](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#fieldInfos) property. [actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions) may also be added * to the template to give users * the ability to perform actions related to the feature, such as zooming to it or performing a Query based on * the feature's location or attributes. * * [![popupTemplate-example](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popup-basic.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=intro-popuptemplate) * * In the image above, the initial text **Marriage in Nassau County Census Tract 5177.01** is set in the [title](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#title) * property of the PopupTemplate where `CENSUS_TRACT` is the name of the field containing census tract numbers. * * ``` * popupTemplate.title = "Marriage in {COUNTY} County {CENSUS_TRACT}", * ``` * * The rest of the content is defined in the [content](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#content) property where * `MARRIEDRATE`, `NEVMARR_CY`, `MARRIED_CY`, and `DIVORCD_CY` are all field names that contain * values to be used in the popup. * * ``` * popupTemplate.content = "

From 2017 to 2021, {MARRIEDRATE}% of the" + * " population in {CENSUS_TRACT} were married.

" + * "
  • {MARRIED_CY} people were married.
  • " + * "
  • {NEVMARR_CY} people had never married.
  • " + * "
  • {DIVORCD_CY} people were divorced.
    • "; * ``` * The above example demonstrates how to format the content directly with a custom * text string. This is one way to format the template, it is also possible to * add additional elements in the content such as `fields`, `media`, and `attachments`. * These elements can be added individually or combined. More information on working * with these various elements can be found in [content](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#content). * * PopupTemplates may also contain custom [actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions). When clicked, these actions execute custom code * defined by the developer. See the [actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions) property for more details. * * @since 4.0 * @see [Popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) * @see [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) * @see [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) * @see [Map component popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popup) * @see [Scene component popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popup) * @see [Link Chart component popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popup) * @see [MapView.popup](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#popup) * @see [SceneView.popup](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#popup) * @see [PopupTemplate samples](https://developers.arcgis.com/javascript/latest/sample-code/?tagged=PopupTemplate) * @see [Popup samples](https://developers.arcgis.com/javascript/latest/sample-code/?tagged=popup) */ export default class PopupTemplate extends PopupTemplateSuperclass { constructor(properties?: PopupTemplateProperties); /** * A [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/) of [action](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionButton/) or [action toggle](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionToggle/) objects. * Each object represents an action or function that may be executed by clicking the icon * or image symbolizing them in the [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/). By default, every * [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) has a `zoom-to` action styled with a magnifying glass icon * ![popupTemplate-zoom-action](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popuptemplate-zoom-action.png). * When this icon is clicked, the view zooms in four LODs and centers on the selected feature. * * PopupTemplates do not have default actions. To override actions on the * [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) using PopupTemplate see [overwriteActions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#overwriteActions). * Actions defined in a PopupTemplate will only appear in the [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) for * features or layers that apply that particular PopupTemplate. * * The order of each action in the popup is the same order in which they appear in * the actions [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/). * * The [Popup.@trigger-action](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/#event-trigger-action) event in * [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) fires each time an action in the popup is clicked. * This event should be used to execute custom code for each action clicked. For example, if you would * like to add a `zoom-out` action to the PopupTemplate that zooms the view out several LODs, you would * define the zoom-out code in a separate function. Then you would call the custom `zoom-out` function * in the [Popup.@trigger-action](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/#event-trigger-action) event handler. See the sample code * snippet below for more details on how this works. * * Actions are defined with the properties listed in the [ActionButton](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionButton/) or [ActionToggle](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionToggle/) class. * * @see [Sample - Popup actions](https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/) * @see [Sample - Custom popup actions per feature](https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/) * @see [Sample - Popup with edit action](https://developers.arcgis.com/javascript/latest/sample-code/popup-editaction/) * @example * // Defines an action to zoom out from the selected feature * let zoomOutAction = { * // This text is displayed as a tooltip * title: "Zoom out", * // The ID by which to reference the action in the event handler * id: "zoom-out", * // Sets the icon font used to style the action button * className: "esri-icon-zoom-out-magnifying-glass" * }; * // Adds the custom action to the PopupTemplate. * popupTemplate.actions.push(zoomOutAction); * // Apply this PopupTemplate to a layer (or graphic) * layer.popupTemplate = popupTemplate; * // This action will only appear in the popup for features in that layer * * // The function to execute when the zoom-out action is clicked * function zoomOut() { * // In this case the view zooms out two LODs on each click * view.goTo({ * center: view.center, * zoom: view.zoom - 2 * }); * } * * // This event fires for each click on any action * // Notice this event is handled on the default popup of the View * // NOT on an instance of PopupTemplate * view.popup.on("trigger-action", function(event){ * // If the zoom-out action is clicked, fire the zoomOut() function * if(event.action.id === "zoom-out"){ * zoomOut(); * } * }); */ get actions(): Collection | null | undefined; set actions(value: ReadonlyArrayOrCollection<((ActionButtonProperties & { type: "button" }) | (ActionToggleProperties & { type: "toggle" }))> | null | undefined); /** * The template for defining and formatting a popup's content. * * * **String** - A popup's content can be a simple text or string value referencing field * values or [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) expressions. Expressions must be defined in * the [expressionInfos](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#expressionInfos) property. * * **Popup elements** - You can also display content as popup elements. There are various types of * elements which can be used individually or combined. The order in which they are set determines * how they display within the popup. See the items below describing each element. * - **text** - A [text content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/TextContent/) * that provides descriptive text as content. * - **media** - A [media content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/MediaContent/) * that is used to display media such as charts/images. * - **fields** - A [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/). * that contains the fields to display within the content. If this is not set * directly within the `content` property, the popup will display whatever is set in the * [fieldInfos](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#fieldInfos) property. * - **attachments** - An [attachments content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/AttachmentsContent/) * that contains attachments associated with the feature. * - **expression** - An [expression content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/ExpressionContent/) that contains an [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) * expression evaluating to a dictionary representing a [TextContent](https://developers.arcgis.com/javascript/latest/references/core/popup/content/TextContent/), * [FieldsContent](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/), or a [MediaContent](https://developers.arcgis.com/javascript/latest/references/core/popup/content/MediaContent/) popup element as * defined in the [Popup Element web map specification](https://developers.arcgis.com/web-map-specification/objects/popupElement/). * - **relationship** - A [relationship content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/RelationshipContent/) associated with a feature. * - **custom** - A [custom content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/CustomContent/) * that contains custom content. * * **promise** - The PopupTemplate's content may also be defined with a promise that resolves to any of the * above-mentioned elements. This is useful for cases when you call a method or execute a query and want * to display the results in the popup. Simply pass the promise to the popupTemplate's content and ensure * that it resolves to a string or other popup element. * * **function** - Content may be defined with a JavaScript function that returns any of the above-mentioned * elements. This is useful when your popup requires additional processing or functionality than what is * provided with the content types listed above. For example, assume that you would like to * display charts using third-party JavaScript libraries or categorize information into separate tabs. * In these cases, you can use a function that returns either a string, a reference to an * HTML element, a popup element, or a promise. * When the feature is clicked, the feature is passed as an argument to the function and provides * access to the feature's graphic and attributes. Set the [outFields](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#outFields) property to * specify any fields needed for rendering the popup and set the [returnGeometry](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#returnGeometry) property * to `true` if needing access to the associated feature's geometry. * The function then executes and returns a value to display in the popup template. * * > [!CAUTION] * > * > **Note:** Autocasting does not apply when creating content via a function or promise. * * @see [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) * @see [FieldInfoFormat](https://developers.arcgis.com/javascript/latest/references/core/popup/support/FieldInfoFormat/) * @see [ExpressionInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/ExpressionInfo/) * @see [Sample - Multiple popup elements](https://developers.arcgis.com/javascript/latest/sample-code/popup-multipleelements/) * @see [Sample - PopupTemplate function](https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-function/) * @see [Sample - PopupTemplate with promise](https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-promise/) * @see [Sample - Browse related records in a popup](https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-browse-related-records/) * @see [Sample - Custom popup content](https://developers.arcgis.com/javascript/latest/sample-code/popup-customcontent/) * @example * // Set a simple string to a popupTemplate's content * // The string references a value from the POP_2015 attribute field * layer.popupTemplate = { * content: "{POP_2015} people live in this census tract" * }; * @example * // Set a simple string to a popupTemplate's content * // referencing the value returned from an Arcade expression * layer.popupTemplate = { * content: "{expression/per-total}% of people in this boundary have a college education.", * expressionInfos: [{ * name: "per-total", * expression: "Round((($feature.bachelor + $feature.master + $feature.doctorate) / $feature.TOT_POP) * 100, 2)" * }] * }; * @example * // Display a table in the popup's content referencing two values * // one from a field, and another returned from an Arcade expression * layer.popupTemplate = { * title: "College Education in {NAME}", * content: [ * { * type: "fields", // Autocasts as new FieldsContent() * // Autocasts as new FieldInfo[] * fieldInfos: [ * { * fieldName: "TOT_POP", * label: "Total population (2023)", * format: { * digitSeparator: true * } * }, * { * fieldName: "expression/college" * }] * }], * // autocasts to ExpressionInfo class * expressionInfos: [{ * name: "college", * title: "Completed a college degree", * expression: "$feature.bachelor + $feature.master + $feature.doctorate" * }] * }; * @example * // The following snippet shows how to set various popup element types within the template's * // content. This snippet also works with related tables. * layer.popupTemplate.content = [{ * type: "fields", // Autocast as new FieldsContent() * // Autocast as new FieldInfo[] * fieldInfos: [{ * fieldName: "Point_Count", * visible: false, * label: "Count of Points", * // Autocast as new FieldInfoFormat() * format: { * places: 0, * digitSeparator: true * } * }, { * fieldName: "relationships/0/Point_Count_COMMON", * visible: true, * label: "Sum of species tree count", * format: { * places: 0, * digitSeparator: true * }, * statisticType: "sum" * }] * }, { * // Autocasts as new TextContent() * type: "text", * text: "There are {Point_Count} trees within census block {BLOCKCE10}" * }, { * * // Autocasts as new MediaContent() * type: "media", * mediaInfos: [{ * title: "Count by type", * type: "pie-chart", // Autocasts as new PieChartMediaInfo() * caption: "", * // Autocasts as new ChartMediaInfoValue() * value: { * fields: [ "relationships/0/Point_Count_COMMON" ], * normalizeField: null, * tooltipField: "relationships/0/COMMON" * } * }, { * title: "Mexican Fan Palm", * type: "image", // Autocasts as new ImageMediaInfo() * caption: "tree species", * // Autocasts as new ImageMediaInfoValue() * value: { * sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg" * } * }] * }, { * // if attachments are associated with feature, display it. * // Autocasts as new AttachmentsContent() * type: "attachments" * }]; * @example * // The following snippet shows how to set a popupTemplate * // on the returned results (features) from identify * * idResult.feature.popupTemplate = { * title: "{NAME}", * content: [{ * // Pass in the fields to display * type: "fields", * fieldInfos: [{ * fieldName: "NAME", * label: "Name" * }, { * fieldName: "REGION", * label: "Region" * }] * }] * }; */ get content(): PopupTemplateContent | null | undefined; set content(value: PopupTemplateContentCreated | ContentProperties[] | Promise | ((event: PopupTemplateCreatorEvent) => PopupTemplateContentCreated | ContentProperties[] | Promise) | null | undefined); /** * An array of objects or [ExpressionInfo[]](https://developers.arcgis.com/javascript/latest/references/core/popup/ExpressionInfo/) that reference * [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) expressions following * the specification defined by the [Arcade Popup Profile](https://developers.arcgis.com/javascript/latest/arcade/#popup). * * @since 4.4 * @see [Arcade Popup Profile](https://developers.arcgis.com/javascript/latest/arcade/#popup) * @see [Arcade Feature Reduction Popup Profile](https://developers.arcgis.com/javascript/latest/arcade/#feature-reduction-popup) * @example * // Displays two values returned from Arcade expressions * // in a table within the popup when a feature is clicked * layer.popupTemplate = { * content: [{ * type: "fields", // Autocasts as new FieldsContent() * // Autocasts as new FieldInfo[] * fieldInfos: [{ * fieldName: "expression/college" * }, { * fieldName: "expression/nocollege" * }] * }], * // autocasts to ExpressionInfo class * expressionInfos: [{ * name: "college", * title: "Completed a college degree", * expression: "$feature.bachelor + $feature.master + $feature.doctorate" * }, { * name: "nocollege", * title: "Did not complete a college degree", * expression: "$feature.elementary + $feature.middle + $feature.highschool + $feature.somecollege" * }] * }; * @example * // Displays a value returned from an Arcade expression within * // a simple string defined in the popupTemplate's content * layer.popupTemplate = { * content: "{expression/per-total}% of people in this boundary have a college education.", * expressionInfos: [{ * name: "per-total", * expression: "Round((($feature.bachelor + $feature.master + $feature.doctorate) / $feature.TOT_POP) * 100, 2)" * }] * }; */ get expressionInfos(): ExpressionInfo[] | null | undefined; set expressionInfos(value: ExpressionInfoProperties[] | null | undefined); /** * An array of [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) that defines how fields in the dataset * or values from [Arcade](https://developers.arcgis.com/javascript/latest/arcade/) expressions participate * in a popup. If no [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) are specified, nothing will display since * the popup will only display the fields that are defined by this array. * Each [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/) contains properties for a single field * or expression. This property can be set directly within the PopupTemplate or * within the [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/). * If this is not set within the [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/), * it will default to whatever is specified directly within the `PopupTemplate.fieldInfos`. * * > [!WARNING] * > * > Use this `fieldInfos` property to display fields from related tables in chart or text elements. * > `FieldInfos` set within the template's [fields content element](https://developers.arcgis.com/javascript/latest/references/core/popup/content/FieldsContent/) take precedence over the `PopupTemplate.fieldInfos`. * * The image on the left is a result of using the first example snippet below, whereas the image on the right is a result of the second snippet. * * | **Content set using 'fields' type** | **Content referenced from fields set within fieldInfo** | * | -------------------------- | --------------------------- | * | ![popuptemplate-fields](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popuptemplate-fields.png) | ![popuptemplate-fieldinfocontent](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popuptemplate-fieldinfocontent.png) | * * @example * // This snippet demonstrates how to show only a subset of fields. * // By setting the 'type: "fields"', and providing the fieldInfos, * // only field data will display within this feature layer's popuptemplate. * // If no fieldInfos is specified directly in the content, the popup defaults * // to whatever is set in the popupTemplate.fieldInfos. * let popupTemplate = new PopupTemplate({ * // autocasts as new PopupTemplate() * title: "{NAME} in {COUNTY}", * outFields: ["*"], * 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 * } * }] * }] * }); * @example * // This snippet demonstrates setting the popup's content by referencing * // specific fields defined within the popupTemplate's fieldInfos. * let popupTemplate = new PopupTemplate({ * title: "{NAME} in {COUNTY}", * outFields: ["*"], * content: "Census data indicates that {B12001_calc_numMarriedE} people were married in {NAME}, {COUNTY}. The overall percentage of married people is {B12001_calc_pctMarriedE}%.", * fieldInfos: [{ * fieldName: "B12001_calc_pctMarriedE", * },{ * fieldName: 'B12001_calc_numMarriedE', * format: { * places: 0, * digitSeparator: true * } * }] * }); */ get fieldInfos(): FieldInfo[] | null | undefined; set fieldInfos(value: FieldInfoProperties[] | null | undefined); /** * Indicates whether or not editor tracking should display. * * ![popupTemplate-showLastEditInfo](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/showlasteditinfo.png) * * @default true * @since 4.10 */ accessor lastEditInfoEnabled: boolean; /** * Additional options that can be defined for the popup layer. * * @since 4.5 */ get layerOptions(): LayerOptions | null | undefined; set layerOptions(value: LayerOptionsProperties | null | undefined); /** * An array of field names used in the PopupTemplate. * Use this property to indicate what fields are required * to fully render the PopupTemplate. This is important if setting * [content](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#content) via a function since any fields needed for successful * rendering should be specified here. * * Generally speaking, it is good practice to always set this property * when instantiating a new popup template. * * To fetch the values from all fields, use `["*"]`. * * > [!WARNING] * > * > This will not fetch fields from related tables. If related features * > are needed, set this using [FieldInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/FieldInfo/). * * @since 4.9 * @see [FeatureLayer.outFields](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#outFields) * @example * // Set the MapImageLayer with specified popupTemplate * USALayer = new MapImageLayer({ * url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", * id: "USA", * sublayers: [{ * id: 2, * visible: true, * popupTemplate: { * title: "{state_name} Population", * content: getInfo, * outFields: ["*"] * } * }] * }) * * // The function used for the PopupTemplate * function getInfo(feature) { * let graphic, attributes, content; * graphic = feature.graphic; * attributes = graphic.attributes; * content = "In year 2000:- " + attributes.pop2000 ; * return content; * } */ accessor outFields: string[] | null | undefined; /** * Indicates whether actions should replace existing [popup actions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/#actions). * * @default false * @example * // The actions defined in the Popup will not display when the * // PopupTemplate is used. The actions defined in the PopupTemplate will be used instead. * popupTemplate.overwriteActions = true; */ accessor overwriteActions: boolean; /** * Indicates whether to include the feature's geometry for use by the template. This * property should be set to `true` if needing to access the popup's selected feature's geometry. * Access the geometry via the returned graphic from the popup's * [Popup.selectedFeatureWidget](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/#selectedFeatureWidget). * This is needed since the geometry is not automatically queried and returned in the popup's selected feature. * * If the feature layer does not specify its * [FeatureLayer.outFields](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#outFields) and the * template's [outFields](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#outFields) isn't set, the returned popup's geometry is only returned if * `returnGeometry` is set to `true`. * This also applies when working with [WebMaps](https://developers.arcgis.com/javascript/latest/references/core/WebMap/). * * @default false * @since 4.18 * @example * // Grab the layer and check if 'returnGeometry' is false, * // if so, set to 'true' to access selected feature's geometry * * view.when(function() { * webmap.when(function(response) { * returnedLayer = response.layers.find(function(layer) { * return layer.id === ""; * }); * * if (returnedLayer.popupTemplate.returnGeometry === false) { * returnedLayer.popupTemplate.returnGeometry = true; * reactiveUtils.watch(() => popup?.viewModel?.active, function() { * console.log(view.popup.selectedFeatureWidget.graphic); * }); * } * }); * }); */ accessor returnGeometry: boolean; /** * The template for defining how to format the title used in a popup. * You can format the title by specifying either a string value or a JavaScript function * that returns a simple string or a promise (since 4.15) that resolves to a string. * * If using a function, the defined content returns a string value. When the feature is clicked, * the feature is passed as an argument to the function and provides * access to the feature's graphic and attributes. The function then executes and returns * a value to display in the popup template's title. * * @default "" * @see [content](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#content) * @see [Sample - Create a FeatureLayer with client-side graphics (popupTemplate.title returns a promise)](https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/) * @example * // Within the popup template, placeholders are denoted by `{}`. * // It specifies attributes to display. * // In a service where a field named NAME contains the name of a county, the title * // of the popup when the user clicks a feature representing Los Angeles County will say: * // "Population in Los Angeles County" * popupTemplate.title = "Population in {NAME} County"; * @example * // In this example, the popup template's title is set via a function. The function name is * // passed in for its property. Notice that the clicked feature is then passed in to the function. * * let popupTemplate = { * // autocasts as new PopupTemplate() * title: countyName, * outFields: ["*"] // Make sure to specify the outFields so that these are available in the function * }; * * function countyName(feature) { * // Return the layer title and individual county name * return feature.graphic.layer.title + " : {NAME}"; * } * @example * // Executes a reverse geocode in the popupTemplate title * // and returns the result as a promise. This will display the * // address for the location of the point in the title * * const locatorUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"; * * const params = {location: event.mapPoint}; * * layer.popupTemplate = { * outFields: ["*"], * title: function(event) { * return locator * .locationToAddress(locatorUrl, params) * .then(function(response) { * // This value must be a string * return response.address; * }); * } * }; */ accessor title: PopupTemplateTitle; } declare const PopupTemplateSuperclass: typeof JSONSupport & typeof ClonableMixin