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 |
---|---|---|
| (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
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
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: boolean
If true, it will hide the documentation action in the side panel
- Attribute
- hide-documentation-actions
- Default value
- false
hideSideBar
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
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
profile: IEditorProfileDefinition | IPredefinedProfile
The 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: string
The arcade script. Use this property to define or update the script.
- Attribute
- script
- Default value
- ""
sideActionBarExpanded
sideActionBarExpanded: boolean
If true, the side action bar will be exapnded
- Attribute
- side-action-bar-expanded
- Default value
- false
suggestions
suggestions: Array<IEditorCodeSuggestion> | Array<IEditorCodeSuggestionGroup>
Collection of suggestions
testData
testData: IEditorTestContext
Test data used to execute the script in the editor. If undefined the execute script UX will be hidden.
Methods
Method | Signature |
---|---|
componentOnReady(): Promise<void> | |
getScript deprecated | getScript(): Promise<string | undefined> |
getTestResult(): Promise<ArcadeResult> | |
setFocus(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
- 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>
Events
Event | Type |
---|---|
Array<Diagnostic> | |
string |