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:
- 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 |
|---|---|---|
| (IEditorOptions & IGlobalEditorOptions) | |
hide-documentation-actions | boolean | |
hide-side-bar | boolean | |
| T extends {
customPanels: Array<ICustomSidePanel>;
} ? "none" | "variables" | "suggestions" | "api" : string | |
| IEditorProfileDefinition | IPredefinedProfile | |
script | string | |
side-action-bar-expanded | boolean | |
| Array<ApiSnippet> | |
| Array<IEditorCodeSuggestion> | Array<IEditorCodeSuggestionGroup> | |
| IEditorTestContext |
editorOptions
editorOptions: (IEditorOptions & IGlobalEditorOptions)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
hideDocumentationActions: booleanIf true, it will hide the documentation action in the side panel
- Attribute
- hide-documentation-actions
- Default value
- false
hideSideBar
hideSideBar: booleanIf true, it will hide the side actions bar. The editor will be in a minimalistic UX.
- Attribute
- hide-side-bar
- Default value
- false
openedSidePanel
openedSidePanel: T extends {
customPanels: Array<ICustomSidePanel>;
} ? "none" | "variables" | "suggestions" | "api" : stringThe name of the opened side panel. 'none' means 'no panel opened'.
- Default value
- "none"
profile
profile: IEditorProfileDefinition | IPredefinedProfileThe profile contains metadata used by the editor for editing context and help. Example:
{
bundles: ["core", "dataAccess", "geometry", "portal"],
variables: [
{
name: "$feature",
description: "The feature passed to the script during execution.",
definition: aFeatureLayerInstance
}
]
}script
script: stringThe arcade script. Use this property to define or update the script.
- Attribute
- script
- Default value
- ""
sideActionBarExpanded
sideActionBarExpanded: booleanIf true, the side action bar will be expanded
- Attribute
- side-action-bar-expanded
- Default value
- false
suggestions
suggestions: Array<IEditorCodeSuggestion> | Array<IEditorCodeSuggestionGroup>Collection of suggestions
testData
testData: IEditorTestContextTest data used to execute the script in the editor. If undefined the execute script UX will be hidden.
Slots
Events
| Event | Type |
|---|---|
Array<Diagnostic> | |
CustomEvent<string> |
arcgisDiagnosticsChange
arcgisDiagnosticsChange: Array<Diagnostic>Emitted when the diagnostics collection has changed.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisScriptChange
arcgisScriptChange: CustomEvent<string>Emitted when the script string has changed.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
Methods
| Method | Signature |
|---|---|
componentOnReady(): Promise<void> | |
getScriptdeprecated | getScript(): Promise<string | undefined> |
getTestResult(): Promise<ArcadeResult> | |
setFocus(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisArcadeEditor = document.querySelector("arcgis-arcade-editor");
document.body.append(arcgisArcadeEditor);
await arcgisArcadeEditor.componentOnReady();
console.log("arcgis-arcade-editor is ready to go!");- Returns
- Promise<void>
getScript
getScript(): Promise<string | undefined>Use script property instead.
- Returns
- Promise<string | undefined>
getTestResult
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>