agentleFS
Sign inStart free
GeoDaoyuGeoDaoyu/arcgis-maps-sdk-js-ai-context/skills/arcgis-coding-components/SKILL.md

arcgis-coding-components

Skill0 starsChanged 7 months agoMITView on GitHub

Embed an Arcade expression editor in applications using the Coding Components package. Use for building Arcade authoring, testing, and debugging interfaces.

1 other project uses a version of this.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Use this skill when embedding an Arcade expression editor into a web application.

    line 8
  2. Distinctive:

    Search for Arcade-related samples that demonstrate expression editing workflows.

    line 324

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

ArcGIS Coding Components

Use this skill when embedding an Arcade expression editor into a web application. The @arcgis/coding-components package provides the arcgis-arcade-editor web component - a full-featured code editor for writing, testing, and debugging Arcade expressions. This is a new component package in 5.0 with no 4.x equivalent.

Import Patterns

CDN (No Build Tools)

<!-- Load ArcGIS Maps SDK -->
<script src="https://js.arcgis.com/5.0/"></script>
<!-- Load Coding Components -->
<script
  type="module"
  src="https://js.arcgis.com/5.0/coding-components/"
></script>

Direct ESM Imports (Build Tools)

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

arcgis-arcade-editor Component

A rich code editor for Arcade expressions with syntax highlighting, diagnostics, code suggestions, and a documentation side panel.

Properties

PropertyAttributeTypeDefaultDescription
scriptscriptstring""The Arcade script content (read/write)
profile-IEditorProfileDefinition-Profile metadata defining the editing context (set via JS)
testData-IEditorTestContext-Test data context for expression validation (set via JS)
snippets-ApiSnippet[]-Collection of code snippets to show in the snippets panel (set via JS)
suggestions-IEditorCodeSuggestion[]-Code suggestions shown to the user (set via JS)
editorOptions-IEditorOptions & IGlobalEditorOptions-Monaco-style editor options (set via JS)
hideSideBarhide-side-barbooleanfalseHide the side action bar for a minimal UI
hideDocumentationActions-booleanfalseHide the documentation action in the side panel
openedSidePanelopened-side-panelstring"none"Name of the currently opened side panel
sideActionBarExpandedside-action-bar-expandedbooleanfalseWhether the side action bar is expanded

Methods

MethodReturnsDescription
setFocus()voidSet focus on the editor
componentOnReady()Promise<void>Resolves when the component is fully loaded

Events

EventDetailDescription
arcgisScriptChangestringFired when the script content changes (debounced)
arcgisDiagnosticsChangeDiagnostic[]Fired when diagnostics (errors/warnings) change

Basic Usage

Minimal Editor

<arcgis-arcade-editor
  script="return $feature.Population * 2;"
  style="width: 600px; height: 400px;"
>
</arcgis-arcade-editor>

Listening for Script Changes

<arcgis-arcade-editor id="editor" style="width: 600px; height: 400px;">
</arcgis-arcade-editor>

<script type="module">
  const editor = document.querySelector("#editor");
  editor.script = "return $feature.Name;";

  editor.addEventListener("arcgisScriptChange", (event) => {
    const newScript = event.detail;
    console.log("Script updated:", newScript);
  });

  editor.addEventListener("arcgisDiagnosticsChange", (event) => {
    const diagnostics = event.detail;
    const errors = diagnostics.filter((d) => d.severity === "error");
    if (errors.length > 0) {
      console.warn("Script has errors:", errors);
    }
  });
</script>

Editor with Profile Context

const editor = document.querySelector("arcgis-arcade-editor");

// Define the editing profile - tells the editor what variables are available
editor.profile = {
  id: "popup",
  title: "Popup Expression",
  description: "Expression for popup content",
  variables: [
    {
      name: "$feature",
      type: "Feature",
      description: "The current feature",
    },
    {
      name: "$layer",
      type: "FeatureSet",
      description: "The feature's parent layer",
    },
  ],
};

Editor with Test Data

const editor = document.querySelector("arcgis-arcade-editor");

// Provide test data for expression validation
editor.testData = {
  spatialReference: { wkid: 4326 },
  features: [
    {
      attributes: {
        Name: "Test Feature",
        Population: 50000,
        Area: 125.5,
      },
      geometry: {
        type: "point",
        x: -118.24,
        y: 34.05,
      },
    },
  ],
  fields: [
    { name: "Name", type: "esriFieldTypeString", alias: "Name" },
    { name: "Population", type: "esriFieldTypeInteger", alias: "Population" },
    { name: "Area", type: "esriFieldTypeDouble", alias: "Area" },
  ],
};

Editor with Custom Snippets

const editor = document.querySelector("arcgis-arcade-editor");

editor.snippets = [
  {
    name: "Format Currency",
    description: "Format a number as US currency",
    code: 'Text($feature.Value, "$#,###.00")',
  },
  {
    name: "Concatenate Fields",
    description: "Join two text fields with a separator",
    code: 'Concatenate([$feature.FirstName, $feature.LastName], " ")',
  },
];

Minimal Editor (No Side Bar)

<arcgis-arcade-editor
  hide-side-bar
  script="return Round($feature.Value, 2);"
  style="width: 400px; height: 200px;"
>
</arcgis-arcade-editor>

Full Example with Map Integration

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Arcade Editor</title>
    <script src="https://js.arcgis.com/5.0/"></script>
    <script
      type="module"
      src="https://js.arcgis.com/5.0/coding-components/"
    ></script>
    <script
      type="module"
      src="https://js.arcgis.com/5.0/map-components/"
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
      }
      arcgis-map {
        flex: 1;
      }
      #editor-panel {
        height: 300px;
        border-top: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <arcgis-map id="map" item-id="YOUR_WEBMAP_ID">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>
    <div id="editor-panel">
      <arcgis-arcade-editor id="editor"></arcgis-arcade-editor>
    </div>

    <script type="module">
      const mapElement = document.querySelector("#map");
      const editor = document.querySelector("#editor");

      await mapElement.viewOnReady();
      const view = mapElement.view;
      const layer = view.map.layers.getItemAt(0);
      await layer.load();

      // Set initial script
      editor.script = 'return $feature.Name + " (" + $feature.Type + ")"';

      // Configure profile from layer fields
      editor.profile = {
        id: "popup",
        title: "Popup Expression",
        variables: [
          { name: "$feature", type: "Feature", description: "Current feature" },
        ],
      };

      // Listen for changes and apply to popup
      editor.addEventListener("arcgisScriptChange", (event) => {
        console.log("Expression:", event.detail);
      });
    </script>
  </body>
</html>

Common Pitfalls

  1. Missing coding-components script: The arcgis-arcade-editor element must be loaded separately from the core SDK.

    <!-- Anti-pattern: only loading core SDK -->
<script src="https://js.arcgis.com/5.0/"></script>
<arcgis-arcade-editor></arcgis-arcade-editor>
    <!-- Correct: load coding-components too -->
<script src="https://js.arcgis.com/5.0/"></script>
<script
  type="module"
  src="https://js.arcgis.com/5.0/coding-components/"
></script>
<arcgis-arcade-editor></arcgis-arcade-editor>

    Impact: The element is unrecognized and renders as empty.

  2. No size on the editor: The editor needs explicit width and height to render.

    <!-- Anti-pattern: no size -->
<arcgis-arcade-editor></arcgis-arcade-editor>
    <!-- Correct: explicit size -->
<arcgis-arcade-editor
  style="width: 600px; height: 400px;"
></arcgis-arcade-editor>

    Impact: The editor renders with zero height and is invisible.

  3. Setting profile or testData as HTML attributes: These properties accept complex objects and must be set via JavaScript.

    Impact: Values are silently ignored; the editor lacks context for autocompletion and validation.

  4. Not debouncing arcgisScriptChange: The event fires on every keystroke (debounced internally but can still be frequent). Avoid expensive operations in the handler.

    // Anti-pattern: expensive operation on every change
editor.addEventListener("arcgisScriptChange", async (event) => {
  await compileAndExecuteArcade(event.detail); // too frequent
});
    // Correct: add your own debounce for expensive operations
let timeout;
editor.addEventListener("arcgisScriptChange", (event) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    compileAndExecuteArcade(event.detail);
  }, 500);
});

    Impact: UI freezes or excessive server requests during typing.

Reference Samples

  • Search for Arcade-related samples that demonstrate expression editing workflows.

Related Skills

  • See arcgis-arcade for Arcade expression language syntax and usage patterns.
  • See arcgis-widgets-ui for layout components to host the editor panel.
  • See arcgis-popup-templates for using Arcade expressions in popup content.
  • See arcgis-visualization for Arcade-driven visual variables and renderers.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free