Sketch component events not triggering

RyanDickinson1

I have a simple standalone app to test out the web components. The components in the app are a map and sketch. The map events for arcgisViewReadyChange and arcgisViewClick work as expected. However, I cannot get any events from the sketch component to trigger. See the below snippet:

works

document.querySelector('arcgis-map').addEventListener('arcgisViewClick', (event) => {

console.log("event", event )

});

does nothing

document.querySelector('arcgis-sketch').addEventListener('sketchCreate', (event) => {

console.log("sketch create", event);

});

<arcgis-map item-id="my_map_id">
<arcgis-elevation-profile position="bottom-right">
</arcgis-elevation-profile>
<arcgis-legend position="bottom-left"></arcgis-legend>
<arcgis-sketch position="top-right" creationMode="single">
</arcgis-sketch>
</arcgis-map>

Has anyone been successful in adding events to the sketch component?

ReneRubalcava

Ok, move the script tag with the load code to after the arcgis-map tag and before end of body tag.

<!doctype html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
	<title>Map components AMD template</title>
	<link rel="icon" href="data:;base64,=" />
	<style>
		html,
		body {
			background-color: var(--calcite-ui-foreground-2);
			padding: 0;
			margin: 0;
			width: 100vw;
			height: 100vh;
		}
		.my-button {
			margin: 0;
			position: absolute;
				left: 100px;
			top: 10px;
		}
	</style>
	<script type="module" src="https://js.arcgis.com/calcite-components/2.6.0/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.6.0/calcite.css" />
	<link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/dark/main.css" />
	<script src="https://js.arcgis.com/next/"></script>
	<script type="module" src="https://jsdev.arcgis.com/map-components/next/arcgis-map-components.esm.js"></script>
</head>

<body>
<arcgis-map id="mapElem" item-id="d5dda743788a4b0688fe48f43ae7beb9">
	<arcgis-sketch position="top-right"></arcgis-sketch>
</arcgis-map>
<script>
		async function load() {
			const sketch = document.querySelector("arcgis-sketch");
			sketch.addEventListener("arcgisReady", () => {
				console.log("sketch ready");
			});
			sketch.addEventListener("arcgisCreate", (e) => {
				console.log("sketch create", e);
			});
			sketch.addEventListener("arcgisUpdate", (e) => {
				console.log("sketch update", e);
			});
		}
        load();
	</script>
</body>

</html>

You typically want script tags with JS as the last tag in the body so that it loads after contents of the html body load.

View solution in original post

ReneRubalcava

This works in "next", but we made some changes to the event names.

https://codepen.io/odoe/pen/yLrbBoR?editors=0011

Event names no longer include the name of the component and they are all prefixed with 'arcgis' in the names.

We'll get that added to the breaking changes here.

https://github.com/Esri/feedback-js-api-next/blob/main/CHANGELOG.md#components-breaking-changes

RyanDickinson1

Thank you Rene! I copied your pen and attempted using it in a vanilla single page app. However, the event listeners couldn't register (worked in your pen):

ReneRubalcava

That error looks like you don't have an arcgis-sketch element on the page. If you provide a repro per the doc, could tell better.

https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application

RyanDickinson1

I put the code into a pen and it functioned as expected. I have the standalone app hosted on a webserver and registered with Enterprise 11.1. Here is the link to the standalone in github.

ReneRubalcava

Ok, move the script tag with the load code to after the arcgis-map tag and before end of body tag.

<!doctype html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
	<title>Map components AMD template</title>
	<link rel="icon" href="data:;base64,=" />
	<style>
		html,
		body {
			background-color: var(--calcite-ui-foreground-2);
			padding: 0;
			margin: 0;
			width: 100vw;
			height: 100vh;
		}
		.my-button {
			margin: 0;
			position: absolute;
				left: 100px;
			top: 10px;
		}
	</style>
	<script type="module" src="https://js.arcgis.com/calcite-components/2.6.0/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.6.0/calcite.css" />
	<link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/dark/main.css" />
	<script src="https://js.arcgis.com/next/"></script>
	<script type="module" src="https://jsdev.arcgis.com/map-components/next/arcgis-map-components.esm.js"></script>
</head>

<body>
<arcgis-map id="mapElem" item-id="d5dda743788a4b0688fe48f43ae7beb9">
	<arcgis-sketch position="top-right"></arcgis-sketch>
</arcgis-map>
<script>
		async function load() {
			const sketch = document.querySelector("arcgis-sketch");
			sketch.addEventListener("arcgisReady", () => {
				console.log("sketch ready");
			});
			sketch.addEventListener("arcgisCreate", (e) => {
				console.log("sketch create", e);
			});
			sketch.addEventListener("arcgisUpdate", (e) => {
				console.log("sketch update", e);
			});
		}
        load();
	</script>
</body>

</html>

You typically want script tags with JS as the last tag in the body so that it loads after contents of the html body load.

RyanDickinson1

Thank you very much Rene! That was it!