Adding a Custom Button in Sketch Widget Toolbar

PaulAnderson2k — Tue, 11 Oct 2022 11:05:39 GMT

I want to add my own button into the sketch widget toolbar.

This forum post will create the button in a new div outside of the Sketch Widget.

With the code:

view.when(() => { const sketch = new Sketch({ layer: graphicsLayer, view: view, // graphic will be selected as soon as it is created creationMode: "update" }); view.ui.add(sketch, "top-right"); var element = document.createElement('div'); element.className = "esri-icon-collection esri-widget--button esri-widget esri-interactive"; element.addEventListener('click', function (evt) { console.log("clicked"); }) view.ui.add(element, "top-right"); });

I'd really want to include that button alongside all of the other buttons - and still control what tools are available.

Is there a recommended ways to do this? Are there any articles?

Re: Adding a Custom Button in Sketch Widget Toolbar

ReneRubalcava — Tue, 11 Oct 2022 14:31:19 GMT

The widget isn't extensible, so you can't add more buttons. You can use the SketchViewModel and build a custom component around that.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html

Depending what you want it to do though, you could have a container that wraps the Sketch widget and your custom button along side each other, so it looks like a new button, but when you click it, you can call methods on the Sketch widget or the layer, not sure what your button would do.

topic Adding a Custom Button in Sketch Widget Toolbar in ArcGIS JavaScript Maps SDK Questions

Adding a Custom Button in Sketch Widget Toolbar

Re: Adding a Custom Button in Sketch Widget Toolbar