topic Re: Re-designed Draw widget in Experience Builder Custom Widgets

Re-designed Draw widget

JeffreyThompson2 — Wed, 22 Nov 2023 16:32:34 GMT

This is a re-designed version the draw widget by @RobertScheitlin__GISP. His draw widget has a number of advantages over the OOTB draw widget including the ability to use text, editing a drawing and more drawing tools. However, the user interface needs some improvement.

This widget has modified his code to improve the overall user experience.

Changes:

Many of the internal menus were displaying behind other menus making them difficult or impossible to access. These issues should all be fixed.
Text added to clarify if the widget is in draw or edit mode and how to access the other mode.
The draw tools have been placed in a flexbox div to make the layout better organized.
The options button has been widened and labeled to make it clear that is different than the draw tool buttons.
The Undo/Redo buttons will only display if it is possible to undo or redo something.
Text in the delete button will clarify if deleting a single or all graphics.
Text options menu has been re-ordered and re-designed with additional text to clarify options.
Entering text does not require deleting default text.
Preview will accurately reflect the map symbol regardless of theme font.

Edited: Undo and Redo buttons should perform correct action.

Re: Re-designed Draw widget

ElisabethFenn — Wed, 22 Nov 2023 14:29:01 GMT

Awesome! This is going to solve a number of issues we were having with the basic draw widget. Thanks for sharing.

Playing around with the new widget I noticed that the labels on the undo and redo buttons were switched. I made a small change to the widget.tsx to fix.

Went from this:

<div className="drawToolbarBottomDiv"> {canUndo || canRedo ? <div> <Button size='sm' type='secondary' active={undoBtnActive} onClick={this.drawUndoBtnClick} title={this.nls('drawUndo')} disabled={!canUndo}> <ArrowRedoOutlined></ArrowRedoOutlined> Redo</Button> <Button size='sm' type='secondary' active={redoBtnActive} onClick={this.drawRedoBtnClick} title={this.nls('drawRedo')} disabled={!canRedo}> <ArrowUndoOutlined></ArrowUndoOutlined> Undo</Button>

to this:

<div className="drawToolbarBottomDiv"> {canUndo || canRedo ? <div> <Button size='sm' type='secondary' active={undoBtnActive} onClick={this.drawUndoBtnClick} title={this.nls('drawUndo')} disabled={!canUndo}> <ArrowUndoOutlined></ArrowUndoOutlined> Undo</Button> <Button size='sm' type='secondary' active={redoBtnActive} onClick={this.drawRedoBtnClick} title={this.nls('drawRedo')} disabled={!canRedo}> <ArrowRedoOutlined></ArrowRedoOutlined> Redo</Button>

Re: Re-designed Draw widget

JeffreyThompson2 — Wed, 22 Nov 2023 16:33:10 GMT

Thanks for finding this. It has been fixed.

Re: Re-designed Draw widget

JohnnySun — Thu, 30 Nov 2023 19:21:21 GMT

Hello Jeffrey! I've successfully integrated your Draw widget into my web application and it's functioning smoothly.

However, I have a query/request: Is there a way to enhance the Draw widget by adding an option to export KML files? This would enable users to save their drawings in KML format, which would be incredibly beneficial.

I've attempted to display the drawLayer, and while it appears in the layer list widget, I'm still unable to export it. Here's the code snippet:

componentDidMount() {
this.setState({widgetInit: true});
this.drawLayer = new GraphicsLayer({id:"DrawGL", listMode: 'show'});
}

Could you provide any suggestions on how to implement this feature? Thanks for your help!

Re: Re-designed Draw widget

JeffreyThompson2 — Thu, 30 Nov 2023 20:54:14 GMT

To clarify, I did not build this widget. It was made by @RobertScheitlin__GISP. I just gave it a facelift.

He was at one point planning to create some sort of download feature, but he no longer appears active on this site.

I suggest asking/searching the Javascript API boards for coding examples for downloading a layer. I don't think I have ever seen one.

Re: Re-designed Draw widget

MichaelLev — Mon, 18 Dec 2023 11:03:13 GMT

This widget is still class and it is bewildering me...

I will greatly appreciate it if there was a Function version for this widget.

Re: Re-designed Draw widget

MatDvorachekNV5 — Thu, 02 Jan 2025 20:06:49 GMT

@JeffreyThompson2 , We are using Developer Edition v1.15, and this widget does not work at v1.15. Are there any plans to upgrade this to work with v1.15? Thank you!

Re: Re-designed Draw widget

JeffreyThompson2 — Thu, 02 Jan 2025 20:48:35 GMT

@MatDvorachekNV5 I have not used 1.15 and don't plan to build anything in that version. I did just open this widget in 1.16 and found it to work well except for a minor issue with the color of the buttons. What kind of problems are you seeing?

To fix the button issue, add a color property to each of the Buttons in the drawToolbarDiv. Replace the drawToolbarDiv (lines 877-894) with the following code block.

<div className="drawToolbarDiv d-flex flex-wrap"> <Button size='sm' type='default' color={pointBtnActive ? 'primary' : 'default'} active={pointBtnActive} onClick={()=>{this.setDrawToolBtnState('point')}} title={this.nls('drawPoint')}> <Icon icon={pinIcon} /></Button> <Button size='sm' type='default' color={lineBtnActive ? 'primary' : 'default'} active={lineBtnActive} onClick={()=>{this.setDrawToolBtnState('polyline')}} title={this.nls('drawLine')}> <Icon icon={lineIcon} /></Button> <Button size='sm' type='default' color={flineBtnActive ? 'primary' : 'default'} active={flineBtnActive} onClick={()=>{this.setDrawToolBtnState('freepolyline')}} title={this.nls('drawFreeLine')}> <Icon icon={curveIcon} /></Button> <Button size='sm' type='default' color={rectBtnActive ? 'primary' : 'default'} active={rectBtnActive} onClick={()=>{this.setDrawToolBtnState('extent')}} title={this.nls('drawRectangle')}> <Icon icon={rectIcon} /></Button> <Button size='sm' type='default' color={polygonBtnActive ? 'primary' : 'default'} active={polygonBtnActive} onClick={()=>{this.setDrawToolBtnState('polygon')}} title={this.nls('drawPolygon')}> <Icon icon={polyIcon} /></Button> <Button size='sm' type='default' color={fpolygonBtnActive ? 'primary' : 'default'} active={fpolygonBtnActive} onClick={()=>{this.setDrawToolBtnState('freepolygon')}} title={this.nls('drawFreePolygon')}> <Icon icon={freePolyIcon} /></Button> <Button size='sm' type='default' color={circleBtnActive ? 'primary' : 'default'} active={circleBtnActive} onClick={()=>{this.setDrawToolBtnState('circle')}} title={this.nls('drawCircle')}> <Icon icon={circleIcon} /></Button> <Button size='sm' type='default' color={textBtnActive ? 'primary' : 'default'} active={textBtnActive} onClick={()=>{this.setDrawToolBtnState('text')}} title={this.nls('drawText')}> <Icon icon={textIcon} /></Button> </div>

Re: Re-designed Draw widget

MarcoMattioli — Thu, 13 Feb 2025 12:43:14 GMT

Hi, and thank you for the awesome work.

I was wondering if you could help me with a little customization.

When the "Draw Point" option is selected, in the Symbol Selector there is a "Source" Combobox, where you can select various categories of symbols. Is there a way to add custom categories? With the old custom Draw widget in Web AppBuilder it was quite simple, but in Experience Builder I can't find where these categories are located.

Can you point me in the right direction?

Thank you,

Marco

Re: Re-designed Draw widget

JeffreyThompson2 — Thu, 13 Feb 2025 13:58:51 GMT

The <SymbolSelector/> is located at client/jimu-ui/advanced/lib/map/components/symbol-selector. Tracing this back as far as I can, it appears to call in the graphic options from the API. I don't have a practical way of injecting any custom symbols in this chain. Building your own Draw Widget might be the most practical path forward.

Re: Re-designed Draw widget

MarcoMattioli — Tue, 18 Feb 2025 10:41:42 GMT

Thanks for the answer, I will try a different approach.

Re: Re-designed Draw widget

Jonathan_Marin — Wed, 26 Feb 2025 18:25:55 GMT

Hi @JeffreyThompson2 ,

I'm sure this has been mentioned before, but is there a way or are you looking for a way to make the drawings that are drawn using this tool to be downloadable or uploaded into the widget. This was functionality in custom widget eDraw for WAB. The download and upload feature was a huge game changer to many organizations.

Also, another feature that was very handy for the eDraw widget was that you could create an "incident" out of a drawing. Obviously the incident widget is not in ExB, but maybe it could be incorporated into the near me tool?

Thank you for your work on this!

Re: Re-designed Draw widget

JeffreyThompson2 — Wed, 26 Feb 2025 19:41:32 GMT

I am not planning any further modifications to this widget at this time. The Add Data Widget supports uploading files and many Widgets have a download function.

Near Me has a built-in drawing option as part of its functionality.

Re: Re-designed Draw widget

RasterFan98 — Wed, 05 Mar 2025 18:00:58 GMT

In what format would the download be? Zipped SHP?

Re: Re-designed Draw widget

Jonathan_Marin — Thu, 13 Mar 2025 22:56:32 GMT

In the eDraw widget you're able to download the sketches made within it as geojson files and it allows uploads of the file too so users could share sketches.

Re: Re-designed Draw widget

Brian_McLeer — Fri, 14 Mar 2025 15:04:43 GMT

@Jonathan_Marin plugging this post to get it upvoted so hopefully released in EB in a future release. Implement export, import and sharing of sketches o... - Esri Community

Re: Re-designed Draw widget

Brian_McLeer — Wed, 28 May 2025 14:28:38 GMT

For the most recent iteration of this widget, please see https://community.esri.com/t5/experience-builder-custom-widgets/advanced-draw-widget-improvements-import-export/ba-p/1618579