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-e.... 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.
