Arcade Editor

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

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:

Demo

Properties

PropertyAttributeType
(Array<{ id: string; name: string; icon: string; description?: string | undefined; useFlows?: boolean | undefined; renderer: ({ closePanel, insertText, }: { closePanel: (e: Event) => void; insertText: (text: string) => void; }) => JsxNode; }>)
(IEditorOptions & IGlobalEditorOptions)
hide-documentation-actions
boolean
hide-side-bar
boolean
T extends { customPanels: Array<ICustomPanel>; } ? "none" | "variables" | "suggestions" | "api" : string
IEditorProfileDefinition | IPredefinedProfile
script
string
side-action-bar-expanded
boolean
Array<ApiSnippet>
Array<IEditorCodeSuggestion> | Array<IEditorCodeSuggestionGroup>
IEditorTestContext

customPanels

Property
customPanels: (Array<{ id: string; name: string; icon: string; description?: string | undefined; useFlows?: boolean | undefined; renderer: ({ closePanel, insertText, }: { closePanel: (e: Event) => void; insertText: (text: string) => void; }) => JsxNode; }>)

Custom panels to be displayed in the side panel. Will be placed below the default panels but above the help panel.

editorOptions

Property
editorOptions: (IEditorOptions & IGlobalEditorOptions)

Options to update on the editor. For example:

1
2
3
{
  "fontSize": 18
}

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

hideDocumentationActions

Property
hideDocumentationActions: boolean

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

Attribute
hide-documentation-actions
Default value
false

hideSideBar

Property
hideSideBar: 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

Property
openedSidePanel: T extends { customPanels: Array<ICustomPanel>; } ? "none" | "variables" | "suggestions" | "api" : string

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

Default value
"none"

profile

Property
profile: IEditorProfileDefinition | IPredefinedProfile

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

1
2
3
4
5
6
7
8
9
10
 {
   bundles: ["core", "dataAccess", "geometry", "portal"],
   variables: [
     {
       name: "$feature",
       description: "The feature passed to the script during execution.",
       definition: aFeatureLayerInstance
     }
   ]
 }

script

Property
script: string

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

Attribute
script
Default value
""

sideActionBarExpanded

Property
sideActionBarExpanded: boolean

If true, the side action bar will be exapnded

Attribute
side-action-bar-expanded
Default value
false

snippets

Property
snippets: Array<ApiSnippet>

Collection of snippets

suggestions

Property
suggestions: Array<IEditorCodeSuggestion> | Array<IEditorCodeSuggestionGroup>

Collection of suggestions

testData

Property
testData: IEditorTestContext

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

Methods

MethodSignature
componentOnReady(): Promise<void>
getScript
deprecated
getScript(): Promise<string | undefined>
getTestResult(): Promise<ArcadeResult>
setFocus(): Promise<void>

componentOnReady

Method
componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Returns
Promise<void>

getScript

deprecatedMethod
getScript(): Promise<string | undefined>

Use script property instead.

Returns
Promise<string | undefined>

getTestResult

Method
getTestResult(): Promise<ArcadeResult>

Returns the Arcade result for the script for the provided test data.

Returns
Promise<IArcadeResultUnknown | IArcadeResultNull | IArcadeResultError | IArcadeResultArray | IArcadeResultDate | IArcadeResultDateOnly | IArcadeResultTimeOnly | IArcadeResultString | IArcadeResultNumber | IArcadeResultBoolean | IArcadeResultDictionary | IArcadeResultGeometry | IArcadeResultKnowledgeGraph | IArcadeResultFeature | IArcadeResultFeatureSet | IArcadeResultPortal | IArcadeResultAttachment>

setFocus

Method
setFocus(): Promise<void>

Set the focus on the element.

Returns
Promise<void>

Events

EventType
Array<Diagnostic>
string

arcgisDiagnosticsChange

Event
arcgisDiagnosticsChange: Array<Diagnostic>

Emitted when the diagnostics collection has changed.

arcgisScriptChange

Event
arcgisScriptChange: string

Emitted when the script string has changed.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close