Draw Widget EB 1.7.0 - 1/28/22

8 Kudos · Draw Widget EB 1.7.0 - 1/28/22

Note: This is an EB 1.7 Widget (not backward compatible).

Details:

The widget allows you to draw in a 2D map view.
You can edit graphics that you have drawn (symbology and geometry).
You can draw points, lines, polygons, text

To install this widget extract the contents of the zip file to your EB\client\your-extensions\widgets. So once you extract the whole path would look like: \client\your-extensions\widgets\draw. Refresh your client and server windows (easiest way is to close both and 'npm start' them like you normally do to start EB). Now the draw widget will appear in your apps widget menu. Add the widget to your app. Now use the widgets settings panel to configure the widget.

This widget requires an edit to the client\types\arcgis-js-api.d.ts file.

You must add:

....
interface SketchViewModel extends Accessor, Evented { 
....
    canUndo(): boolean;
    canRedo(): boolean;
...

So the complete portion of the changed file will look like this:

  interface SketchViewModel extends Accessor, Evented {
    /**
     * The [SimpleFillSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html) displayed when actively creating a new `polygon` graphic using the [`polygon`](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#activeTool) tool.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#activeFillSymbol)
     */
    activeFillSymbol: SimpleFillSymbol;
    /**
     * When creating new graphics (for example after [create()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#create) has been called), this property reflects the create tool being used.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#activeTool)
     */
    readonly activeTool:
      | "point"
      | "multipoint"
      | "polyline"
      | "polygon"
      | "circle"
      | "rectangle"
      | "move"
      | "transform"
      | "reshape";
    /**
     * The graphic that is being created.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#createGraphic)
     */
    readonly createGraphic: Graphic;
    /**
     * Default create options set for the SketchViewModel.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#defaultCreateOptions)
     */
    defaultCreateOptions: SketchViewModelDefaultCreateOptions;
    /**
     * Default update options set for the SketchViewModel.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#defaultUpdateOptions)
     */
    defaultUpdateOptions: SketchViewModelDefaultUpdateOptions;
    /**
     * The [GraphicsLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html) associated with the SketchViewModel.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#layer)
     */
    layer: GraphicsLayer;
    /**
     * A [SimpleMarkerSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html), [PointSymbol3D](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PointSymbol3D.html), [TextSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-TextSymbol.html), [CIMSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-CIMSymbol.html), or [WebStyleSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-WebStyleSymbol.html) used for representing the point geometry that is being drawn.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#pointSymbol)
     */
    pointSymbol: SimpleMarkerSymbol | PointSymbol3D | TextSymbol | CIMSymbol | WebStyleSymbol;
    /**
     * A [SimpleFillSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html), [PolygonSymbol3D](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PolygonSymbol3D.html), or [CIMSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-CIMSymbol.html) used for representing the polygon geometry that is being drawn.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#polygonSymbol)
     */
    polygonSymbol: SimpleFillSymbol | PolygonSymbol3D | CIMSymbol;
    /**
     * A [SimpleLineSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html), [LineSymbol3D](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-LineSymbol3D.html), or [CIMSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-CIMSymbol.html) used for representing the polyline geometry that is being drawn.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#polylineSymbol)
     */
    polylineSymbol: SimpleLineSymbol | LineSymbol3D | CIMSymbol;
    /**
     * The [SnappingOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-interactive-snapping-SnappingOptions.html) for sketching.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#snappingOptions)
     */
    snappingOptions: SnappingOptions;
    /**
     * The sketch view model's state.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#state)
     */
    readonly state: "ready" | "disabled" | "active";
    /**
     * An array of graphics that are being updated by the SketchViewModel.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#updateGraphics)
     */
    readonly updateGraphics: Collection<Graphic>;
    /**
     * Indicates if a graphic can be selected to be updated.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#updateOnGraphicClick)
     */
    updateOnGraphicClick: boolean;
    /**
     * The view in which geometries will be sketched by the user.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#view)
     */
    view: MapView | SceneView;

    /**
     * Cancels the active operation and fires the [create](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#event-create) or [update](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#event-update) event If called in the middle of a create operation, `cancel()` discards the partially created graphic.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#cancel)
     */
    cancel(): void;
    /**
     * Completes the active operation and fires the [create](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#event-create) or [update](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#event-update) event and changes the event's state to `complete`.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#complete)
     */
    complete(): void;
    canUndo(): boolean;
    canRedo(): boolean;
    /**
     * Create a graphic with the geometry specified in the `tool` parameter.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#create)
     */
    create(
      tool: "point" | "multipoint" | "polyline" | "polygon" | "rectangle" | "circle",
      createOptions?: SketchViewModelCreateCreateOptions
    😞 void;
    /**
     * Deletes the selected graphics used in the update workflow.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#delete)
     */
    delete(): void;
    /**
     * Destroys the view model instance.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#destroy)
     */
    destroy(): void;
    /**
     * Incrementally redo actions recorded in the stack.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#redo)
     */
    redo(): void;
    /**
     * Incrementally undo actions recorded in the stack.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#undo)
     */
    undo(): void;
    /**
     * Initializes an update operation for the specified graphic(s) and fires [update](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#event-update) event.
     *
     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#update)
     */
    update(graphics: Graphic | Graphic[], updateOptions?: SketchViewModelUpdateUpdateOptions): Promise<void>;

    on(name: "delete", eventHandler: SketchViewModelDeleteEventHandler): IHandle;

    on(name: "create", eventHandler: SketchViewModelCreateEventHandler): IHandle;

    on(name: "update", eventHandler: SketchViewModelUpdateEventHandler): IHandle;

    on(name: "redo", eventHandler: SketchViewModelRedoEventHandler): IHandle;

    on(name: "undo", eventHandler: SketchViewModelUndoEventHandler): IHandle;
  }

Lines 108 and 109 added.

Enjoy, Robert

JonathanKressin · ‎01-31-2022

This is wonderful! Thank you so much for sharing your hard work!

One quick question; how is the undo/redo button supposed to work? I've added the two new variables to the SketchViewModel interface. However, I can't seem to get the undo/redo to ever activate. Is there some other change we need to make to get that to work?

Thanks again!

Jonathan

RobertScheitlin__GISP · ‎01-31-2022

@JonathanKressin

The undo redo works when you are updating the geometry of a drawn graphic. So you draw a graphic and then un-toggle whichever button you had selected and then click the draw graphic on the map to edit it and then any edits (scale, rotation, position, etc) will be added to undo redo stack.

JonathanKressin · ‎01-31-2022

@RobertScheitlin__GISP

Got it! Thank you for explaining how that functionality works.

JohnSasso · ‎02-07-2022

Hi Robert! I incorporated your Draw widget into my web app and it is working quite well. I love the feature where you can easily modify whatever you drew (lines, polygons, etc).

Question/Request: How much of a haul is it to add a feature to the Draw widget which would allow one to export what was drawn (or selected items drawn) to a KML file? Such a feature would be incredibly helpful. Thanks!

RobertScheitlin__GISP · ‎02-08-2022

@JohnSasso

The ability to export drawings and re-import then to an app is definitely on the todo list. I will have to consider the KML export option.

JohnSasso2 · ‎02-08-2022

Thank you @RobertScheitlin__GISP . IMHO, the ability to import and export KML (and/or MKZ) would be quite useful and very popular, given the extensive support for this file format among many platforms like Google Earth, Maps, Caltopo, and so on.

My "work-around" in the meantime has been two create three geometry feature layers (one for points, one for lines, and one for polygons), add them to my map, then add the "Edit (beta)" widget to my web app and export such to GeoJSON. It is not elegant and, well, finding more issues with it.

RobertScheitlin__GISP · ‎02-08-2022

@JohnSasso2

So the Edit widget gives the ability to export to GeoJSON? If so then I could use code from there to make this happen quicker.

JohnSasso · ‎02-08-2022

@RobertScheitlin__GISP sorry, I misspoke (not enuf coffee this morning). I meant to say that the polygon, line and point features drawn by the Edit(beta) widget, on the three geometry feature layers I mentioned, appeared in the attributes table and I could then export such to a GeoJSON.

As I am becoming more coherent this morning, I am going to do more testing. I will get back to you today via private message on what I found

JohnSasso2 · ‎02-08-2022

@RobertScheitlin__GISP I just sent you a private message thru the Esri Community. FYI

RobertScheitlin__GISP · ‎02-08-2022

@JohnSasso2

Strange you should have been notified that I do not have private messaging enabled.

JohnSasso2 · ‎02-09-2022

@RobertScheitlin__GISP I wrote:

Robert,
As I noted in my post, to facilitate adding and editing points, lines, and polygons to my map, I created three simple feature layers: one for points, one for lines, and one for polygons. I added these layers to my map. In Experience Builder, I added the "Edit(beta)" widget and added the 3 layers as editable layers to it, with all capacilities turned on (Add records, Delete records, Update geometries).

I ran the following tests this morn:

1. In my web app, drew two polygons on the map via the "Edit(beta)" widget
2. In the Table widget in my web app, selected the layer pertaining to my aformentioned polygon layer, and selected the two drawn polygons in the table. (The two polygons highlight on the map)
3. In the Table widget, clicked on the Actions button on the right, and did Export selected->Export to GeoJSON. (the file DataRecords.geojson gets created)
4. In Google Earth, verified I could import DataRecords.geojson and see the two polygons I created
5. In caltopo.com, verified I could import DataRecords.geojson and see the two polygons I created. Also verified I could edit the imported geometries (in caltopo.com) as well as selectively export said geometries (as well as those I drew in caltopo) to a KML file

--john

RobertScheitlin__GISP · ‎02-09-2022

@JohnSasso2

So I think I will go the GeoJSON route then, in my future enhancement to this widget.

JohnSasso2 · ‎02-09-2022

@RobertScheitlin__GISP sounds good. GeoJSON can also be read by Google Earth, caltopo, etc so that's fine

KearaMcKay1 · ‎10-13-2023

Question for the community at large

Has anyone added these custom EXPB widgets to their portals? similar to the way you can add the WAB versions as app builder extensions?

JeffreyThompson2 · ‎10-13-2023

I have not done it. We are still on 10.9.1, but here is the guide.

https://www.esri.com/arcgis-blog/products/arcgis-enterprise/developers/add-experience-builder-custom...

DanielLovett · ‎10-13-2023

Has anyone added these custom EXPB widgets to their portals? similar to the way you can add the WAB versions as app builder extensions?

@KearaMcKay1 I have done this for one client so far who is on Enterprise 11.1. It has worked well so far. I'm excited to try this with more widgets in the future.

KearaMcKay1 · ‎10-13-2023

Thanks for confirming Daniel! did you have to install Experience builder dev edition on the server which hosts the enterprise?

AbiDhakal · ‎10-16-2023

@RobertScheitlin__GISPis this widget only for developers? How can non-developers use this widget?

Thank you,
Abi

JeffreyThompson2 · ‎10-16-2023

@AbiDhakal You will need Developer Edition or Enterprise 11.X with the ability to host the widget on the web.

AbiDhakal · ‎10-16-2023

@JeffreyThompson2thank you!

JeffreyThompson2 · ‎10-20-2023

I just started using this widget a few days ago when I noticed it has text support. The edits to client\types\arcgis-js-api.d.ts do not appear to be necessary or possible in Experience Builder 1.12.

I have noticed an issue where the dropdown menu for selecting types of point drawing displays behind the popup making it inaccessible. I fixed this by adding the following to my css.

.inner-popper {
    z-index: 2002 !important;
}

It's a blunt solution that could cause problems with other widgets, but seems to be fine in my application.

Jonathan_Marin · ‎06-18-2024

Hi @RobertScheitlin__GISP, I just found this thread recently and was wondering if you were able to update this widget to include the export functionality? I saw you were considering adding it.

Thank you for your help!

JeffreyThompson2 · ‎06-18-2024

@Jonathan_Marin, @RobertScheitlin__GISP is no longer an active contributor to this site. He did not get around to making an export function.

This widget has a number of UX and some functional issues. I re-designed @RobertScheitlin__GISP's widget to address these issues. https://community.esri.com/t5/experience-builder-custom-widgets/re-designed-draw-widget/m-p/1352200#...

Jonathan_Marin · ‎06-18-2024

@JeffreyThompson2 I see, good to know. Thank you for letting me know and pointing me towards the new widget!

Draw Widget EB 1.7.0 - 1/28/22

Draw Widget EB 1.7.0 - 1/28/22

custom widgets

Experience Builder