Draw widget custom symbols

abureaux — Tue, 30 Mar 2021 16:25:53 GMT

Hello,

I am trying to use custom symbols in place of the pre-defined point symbols.

I found <install directory>\client\stemapp\jimu.js\dijit\SymbolsInfo which contains *.json files that correspond to the default point symbols. But when I modify or delete these files, it has no effect on my app. I have tried refreshing the content by going back to home and creating a new app as that was the only way I could get some other edits to show, but that doesn't help here.

I seem to be missing something. Any thoughts?

If it matters, I am looking to have these custom point symbols be used in the eDraw widget, but I have been testing on both eDraw the the standard Draw widgets.

Thank you

Re: Draw widget custom symbols

jcarlson — Wed, 07 Apr 2021 14:19:38 GMT

When you "publish" the app, it copies all the relevant files to a new folder. Try looking in <exported-app-folder>\jimu.js\dijit\SymbolsInfo and editing those, as they will be the files referenced in the exported web app.

Re: Draw widget custom symbols

abureaux — Wed, 14 Apr 2021 21:22:27 GMT

Hi Josh, Thank you for the reply!

I actually just got this working. I tried changing details in both the client and the server directories, but nothing was working. What I did that seemed to fix everything was I edited SymbolChooser.js and changed DEFAULT_PORTAL_URL from //arcgis.com/ to our portal, and _isOnline from true to false. After this, all the changes I made appeared and things have been working well since.

In case anyone else stumbles across this, here are all the changes I made to get custom images to appear in the draw widget (*see very end for server vs. client):

1. Navigate to <InstallDirectory>\client\stemapp\jimu.js\dijit\SymbolChooser.js

Change DEFAULT_PORTAL_URL from //arcgis.com/ to //DNS.domain.com/

Change _isOnline from true to false

2. Navigate to <InstallDirectory>\client\stemapp\jimu.js\dijit\templates\SymbolChooser.html

Locate <select data-dojo-attach-point="pointSymClassSelect" data-dojo-type="dijit/form/Select" style="width:100%;height:30px;"></select>

Add the text you want to appear in the drop-down between these two tags. E.g., <option value='20'selected="selected">Company Custom Option 1</option>

3. Navigate to <InstallDirectory>\client\stemapp\jimu.js\dijit\SymbolsInfo

Add a *.json. I copy-pasted one already there and named it 20.json

Format generally looks like this (you can inspect the other *.json files):

[ { "imageData":"xxx", "height":100, "width":100, "xoffset":22, "yoffset":22, "name":"YourImageName", "type":"esriPMS", "angle":0, "url":"jimu.js/dijit/images/Your_Image.png", "contentType":"image/png" } ]

A couple notes:

Offset is your mouse offset from the image centre. You will have to play with this to get it correct
I stuck with my image height/width (100x100), but I didn't find modifying this did anything noticeable in my testing
Name can be anything you want. In my testing, it apparently didn't need to be unique but I made it unique anyways
URL can be a directory within your app (see Step 4) or a location on the web
The imageData line is necessary if you want to print your images. Without it, the custom images will not appear on the printed document. Where "xxx" is, should be a long alpha string. Edit: See my post below for how to generate this.

4. Navigate to <InstallDirectory>\client\stemapp\jimu.js\dijit

Create a folder called "Images"

Put images you want to use into this folder. A *.png with a clear background would be best

5. Edit: Didn't find this out until I published. I added this last step to get it to work on Portal

Once you publish to your portal, the SymbolChooser.js file will ignore the above customization and pull the list of points (as well as their associated properties) from a separate online source. You need to override this functionality to get the custom symbols to appear.

I discussed this in a different thread: https://community.esri.com/t5/arcgis-web-appbuilder-questions/draw-widget-custom-list-reverting-to-esri-default-once-published/m-p/1046049/thread-id/20638#M20655. I will also post those steps here to avoid people needlessly searching the forms:

Go into SymbolChooser.js
Look around line 548** for if(!this._symbolTypes){ and modify as I have below:

if(!this._symbolTypes){
// // fetch symbol types from portal
// this._initPortal()
//Added this line:
this._offLineGetSymbols(fileName);
// .then(lang.hitch(this, this._fetchSymbolTypes))
// .then(lang.hitch(this, function(types){
// if(!this.domNode){
// return;
// }
// // create options
// this._clearOptions();
// this._createOptions(types);
// // fetch symbols from portal
// this._handleGetPointSymbols(lang.hitch(this, this._getPortalSymbolsByType), fileName);
// }), lang.hitch(this, function(err){
// if(!this.domNode){
// return;
// }
// if(window.isXT){
// this._offLineGetSymbols(fileName);
// }else{
// this.loadingShelter.hide();
// console.error('Fetching symbols failed', err);
// }
// }));

}else{
// // fetch symbols from portal
this._handleGetPointSymbols(lang.hitch(this, this._getPortalSymbolsByType), fileName);
}

},

*As Josh mentioned, if you want to make these changes in an app that has already been created, you need to navigate to <InstallDirectory>\server\apps\###
Where ### is the automatically generated number of your app.
The same steps mentioned above still apply.
Where you make these changes (either client or server) is up to you and your needs. I learned/tested in server and then replicated the changes in client

** You should be using something like Notepad++ or Visual Studio Code (both free) to do this.

Re: Draw widget custom symbols

jcarlson — Wed, 07 Apr 2021 15:16:50 GMT

Wow! That's an excellent and very thorough resource. Make sure you mark your own answer as "accepted" so that this is easier for others to find.

Re: Draw widget custom symbols

abureaux — Mon, 12 Apr 2021 19:34:26 GMT

As an update to my last post, to get "ImageData", you can use an online tool that converts a PNG into data uri such as https://onlinepngtools.com/convert-png-to-data-uri

topic Re: Draw widget custom symbols in Web AppBuilder Custom Widgets Questions

Draw widget custom symbols

Re: Draw widget custom symbols

Re: Draw widget custom symbols

Re: Draw widget custom symbols

Re: Draw widget custom symbols