topic How do I add a hatch pattern to the Draw widget? in Web AppBuilder Custom Widgets Questions

How do I add a hatch pattern to the Draw widget?

MichaelAugust — Mon, 14 Nov 2016 23:04:21 GMT

How would I add a that simple backwards black line hatch pattern to the Draw widget? What JS would I have to add where? I'm hoping someone has tried this and could provide feedback/experience. Thanks!

Re: How do I add a hatch pattern to the Draw widget?

RobertScheitlin__GISP — Tue, 15 Nov 2016 16:03:28 GMT

Michael,

It is not so simple. You will have to replace the jimu.js/dijit/SymbolChooser.js and jimu.js/dijit/templates/SymbolChooser.html as well as add the new style to the jimu.js/dijit/SymbolsInfo/fill.json:

For the jimu.js/dijit/SymbolsInfo/fill.json part (be careful to add this without causing a syntax error, add it at the end of the file just before the ] 😞

,{"tags":["black","hash"],"title":"Hash","style":"esriSFSBackwardDiagonal","color":[0,0,0,255],"name":"Hash","type":"esriSFS","outline":{"style":"esriSLSSolid","color":[0,0,0,255],"width":1.5,"type":"esriSLS"}}‍‍

Replace the jimu.js/dijit/SymbolChooser.js and jimu.js/dijit/templates/SymbolChooser.html using the attached files

Re: How do I add a hatch pattern to the Draw widget?

MichaelAugust — Tue, 15 Nov 2016 22:39:18 GMT

Awesome - thanks Robert! Now what if I made it really tricky and wanted to add the default balloon callout style, the standard arcmap yellow callout, to the text drawing tool (A) in the draw widget, would it be a similar process? We're trying to modify this particular widget so that our users can create a common vicinity map that we utilize. Our regular Arcmap template has a standard symbology, i.e. the site boundary hatch and a simple balloon text callout which points to the hatched area...does the text styling work in a similar way? Thanks again for your help!

Re: How do I add a hatch pattern to the Draw widget?

RobertScheitlin__GISP — Tue, 15 Nov 2016 23:29:07 GMT

Michael,

I am not sure that is possible at all.

Re: How do I add a hatch pattern to the Draw widget?

deleted-user-CQZbjNeBXm49 — Fri, 10 Feb 2017 11:37:32 GMT

Hi Robert,

Please can you help me out, as I have tried on my own to replicate your modifications to the SymbolChooser js and html but to no success for the WAB 2.3 version?.

Thank you

Baba

Re: How do I add a hatch pattern to the Draw widget?

deleted-user-CQZbjNeBXm49 — Fri, 10 Feb 2017 12:04:16 GMT

No need anymore Robert, I have fixed it and it works perfect now.....

Thanks

Baba

Re: How do I add a hatch pattern to the Draw widget?

Gedeon_muhawenayo — Mon, 25 Apr 2022 07:39:31 GMT

Hi @RobertScheitlin__GISP ,
Thanks very much for a very supportive reply.
I would like to ask how to do this with the recent releases, because when I replaced my jimu.js/dijit/SymbolChooser.js and jimu.js/dijit/templates/SymbolChooser.html with the files you share I lost some functionalities. If you could share with me the updated files or the lines of code to modify.

Best.

Re: How do I add a hatch pattern to the Draw widget?

RobertScheitlin__GISP — Tue, 26 Apr 2022 13:22:08 GMT

@Gedeon_muhawenayo That code was from 6 years ago. So much has changed. What version of WAB are you using?

Re: How do I add a hatch pattern to the Draw widget?

Gedeon_muhawenayo — Tue, 26 Apr 2022 14:27:48 GMT

Hi @RobertScheitlin__GISP , I am using the WAB Version 2.24

Re: How do I add a hatch pattern to the Draw widget?

RobertScheitlin__GISP — Tue, 26 Apr 2022 17:20:03 GMT

@Gedeon_muhawenayo

Here is the 2.24 version of the zip file above.

Re: How do I add a hatch pattern to the Draw widget?

Gedeon_muhawenayo — Tue, 26 Apr 2022 20:35:21 GMT

Thanks very much

Re: How do I add a hatch pattern to the Draw widget?

Gedeon_muhawenayo — Tue, 26 Apr 2022 22:00:31 GMT

Thank you very much @RobertScheitlin__GISP