arcgis-arcade-editor | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/coding-components/components/arcgis-arcade-editor";

Inheritance:: ArcgisArcadeEditor→PublicLitElement

Arcade is a portable, and lightweight expression language used to create custom content throughout the ArcGIS system. Like other expression languages, it can perform mathematical calculations, format text, and evaluate logical statements. It also supports multi-statement expressions, variables, and flow control statements. Arcade is unique when compared to other expression and scripting languages due to its inclusion of feature and geometry data types.

Map Viewer (MV) was the first ArcGIS Online product to incorporate the new Arcade editor after the editor's introduction in the November 2022 ArcGIS Online release. This was possible thanks to the Arcade editor component, which enabled MV to implement its own Arcade expression builder. You can now also find the editor in ArcGIS Dashboards, ArcGIS Field Maps, and ArcGIS Velocity.

You can easily get your own dedicated Arcade expression builder with the Arcade editor component, which includes:

An easy to use layout
An optional minimal layout if you, for example, decide to manually exclude things such as test data, padding, line numbers, and the sidebar
A way to execute Arcade expressions in a configurable code editor
Suggestions and code completion
WCAG 2.0 compliant code colorization / syntax highlighting
Built-in keyboard shortcuts
In-editor help for finding information about profile variables relevant to your profile, documentation for constants and functions, a link to the official Arcade documentation, and, in some case, suggestions.
Support for many languages and directionality

Demo

Properties

Property	Attribute	Type
`editorOptions`		`Editor.IEditorOptions & Editor.IGlobalEditorOptions \| undefined`
`hideDocumentationActions`	`hide-documentation-actions`	`boolean`
`hideSideBar`	`hide-side-bar`	`boolean`
`openedSidePanel` reflected	`opened-side-panel`	`string`
`profile`		`IEditorProfileDefinition \| IPredefinedProfile \| undefined`
`script`	`script`	`string`
`sideActionBarExpanded` reflected	`side-action-bar-expanded`	`boolean`
`snippets`		`ApiSnippet[] \| undefined`
`suggestions`		`IEditorCodeSuggestion[] \| IEditorCodeSuggestionGroup[] \| undefined`
`testData`		`IEditorTestContext \| undefined`

editorOptions

Property

Type: Editor.IEditorOptions & Editor.IGlobalEditorOptions | undefined

Options to update on the editor. For example:

{
  "fontSize": 18
}

To get the full list of available options, see the Monaco Editor options documentation for more details.

hideDocumentationActions

Property

Type: boolean

If true, it will hide the documentation action in the side panel

Attribute: hide-documentation-actions
Default value: false

hideSideBar

Property

Type: boolean

If true, it will hide the side actions bar. The editor will be in a minimalistic UX.

Attribute: hide-side-bar
Default value: false

openedSidePanel

reflected Property

Type: string

The name of the opened side panel. 'none' means 'no panel opened'.

Attribute: opened-side-panel
Default value: "none"

profile

Property

Type: IEditorProfileDefinition | IPredefinedProfile | undefined

The profile contains metadata used by the editor for editing context and help. Example:

 {
   bundles: ["core", "dataAccess", "geometry", "portal-access"],
   variables: [
     {
       name: "$feature",
       description: "The feature passed to the script during execution.",
       definition: aFeatureLayerInstance
     }
   ]
 }

script

Property

Type: string

The arcade script. Use this property to define or update the script.

Attribute: script
Default value: ""

sideActionBarExpanded

reflected Property

Type: boolean

If true, the side action bar will be expanded

Attribute: side-action-bar-expanded
Default value: false

snippets

Property

Type: ApiSnippet[] | undefined

Collection of snippets

suggestions

Property

Type: IEditorCodeSuggestion[] | IEditorCodeSuggestionGroup[] | undefined

Collection of suggestions

testData

Property

Type: IEditorTestContext | undefined

Test data used to execute the script in the editor. If undefined the execute script UX will be hidden.

Methods

Method	Signature
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`setFocus`	`setFocus(): Promise<void>`

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisArcadeEditor = document.querySelector("arcgis-arcade-editor");
document.body.append(arcgisArcadeEditor);
await arcgisArcadeEditor.componentOnReady();
console.log("arcgis-arcade-editor is ready to go!");

setFocus

Method

Signature: setFocus (): Promise<void>

Set the focus on the element.

Returns: Promise<void>

Events

Name	Type
`arcgisDiagnosticsChange`	CustomEvent<Diagnostic[]>
`arcgisScriptChange`	CustomEvent<string>

arcgisDiagnosticsChange

Event

arcgisDiagnosticsChange: CustomEvent<Diagnostic[]>

Emitted when the diagnostics collection has changed.

arcgisScriptChange

Event

arcgisScriptChange: CustomEvent<string>

Emitted when the script string has changed.