topic Re: Can't read symbol definition from config.json in ArcGIS Web AppBuilder Questions

Can't read symbol definition from config.json

KeithGanzenmuller — Thu, 11 Jun 2015 12:15:48 GMT

My first attempt at creating a widget for web app builder.

Trying to incorporate a pattern where the symbols are defined and referenced in the config.json file.

I am able to create the in-panel widget, add it to apps and run it using a test config. All is well, interacts with the map after clicking a button.

The problem I am having is referencing to a simple marker symbol defined in the config.json file which looks like this:

I can add a graphic to the map at the mouse-click point is I define the symbol in code like this:

symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10, null, new Color("#ff6666") );

however if I try this:

symbol = new SimpleMarkerSymbol(this.config.symbols.smsymbol);

I get nothing on the map.

Thanks

Re: Can't read symbol definition from config.json

RickeyFight — Thu, 11 Jun 2015 13:00:33 GMT

Keith,

What does the console log look like after you try to draw on the map?

To access your console log/ developer tools right click and click and developer tools.

Re: Can't read symbol definition from config.json

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:43:44 GMT

Keith,

Are you sure that you are getting json when you use this.config.symbols.smsymbol?

I have this in my config.json

    "simplemarkersymbol": {
      "color": [255, 255, 255, 64],
      "size": 12,
      "type": "esriSMS",
      "style": "esriSMSDiamond",
      "outline": {
        "color": [0, 0, 0, 255],
        "width": 1,
        "type": "esriSLS",
        "style": "esriSLSSolid"
      }
    },

and this in my widget.js

symbol = new SimpleMarkerSymbol(this.config.symbols.simplemarkersymbol);

and it works fine. Are there any errors in your web console?

Re: Can't read symbol definition from config.json

KeithGanzenmuller — Thu, 11 Jun 2015 13:52:48 GMT

Thanks Robert.

I am receiving the following:

Uncaught TypeError: Cannot read property 'symbols' of undefined

Re: Can't read symbol definition from config.json

KeithGanzenmuller — Thu, 11 Jun 2015 13:55:32 GMT

I am receiving the following:

Uncaught TypeError: Cannot read property 'symbols' of undefined

Re: Can't read symbol definition from config.json

RobertScheitlin__GISP — Thu, 11 Jun 2015 13:57:54 GMT

Keith,

So that is saying that this.config is undefined. Is there anywhere else in your code that you are reading values from the config that are working? You may be trying to read the config in the wrong spot. I need to see your widget.js

Re: Can't read symbol definition from config.json

KeithGanzenmuller — Thu, 11 Jun 2015 14:37:00 GMT

Thanks again for looking.

I attempted attach my Widget.js file.

Re: Can't read symbol definition from config.json

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:43:46 GMT

Keith,

So your issue is one that trips up many JS developers at first, it is a scope issue.

You are trying to use "this" in a function for the draw end and inside that function "this" is different than what "this" is outside of that function. In Dojo you use lang.hitch to get around this issue.

define([
  'dojo/_base/declare',
  'jimu/BaseWidget',
  'esri/symbols/SimpleMarkerSymbol',
  'esri/graphic',
  'esri/toolbars/draw',
  'esri/Color',
  'esri/symbols/SimpleLineSymbol',
  'dojo/_base/lang'],
    function (declare, BaseWidget, SimpleMarkerSymbol, Graphic, Draw, Color, SimpleLineSymbol, lang) {
        var myDraw, symbol, graphic;

        //To create a widget, you need to derive from BaseWidget.
        return declare([BaseWidget], {

            // Custom widget code goes here

            baseClass: 'my-first-widget',
            // this property is set by the framework when widget is loaded.
            // name: 'MyFirstWidget',
            // add additional properties here

            //methods to communication with app container:
            postCreate: function () {
                this.inherited(arguments);
                //console.log('MyFirstWidget::postCreate');
                //console.log(this.map.id);
            },
         
            starting: function () {
                myDraw.activate(Draw.POINT);

                //myDraw.activate(Draw.POINT);
                //console.log('MyFirstWidget::startup');
            },

            startup: function () {
                this.inherited(arguments);
                myDraw = new Draw(this.map);
                myDraw.on("draw-end", lang.hitch(this, function (evt) {
                    //symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10, null, new Color("#ff6666") );
                    symbol = new SimpleMarkerSymbol(this.config.symbols.smsymbol);
                    graphic = new Graphic(evt.geometry, symbol);
                    this.map.graphics.add(graphic);
                    myDraw.finishDrawing();
                    myDraw.deactivate();
                }));
            },

            // onOpen: function(){
            //  console.log('MyFirstWidget::onOpen');
            // },

            onClose: function () {
                myDraw.deactivate();
                // console.log('MyFirstWidget::onClose');
            }
        });
    });

Re: Can't read symbol definition from config.json

KeithGanzenmuller — Thu, 11 Jun 2015 15:12:58 GMT

That was it exactly.

I appreciate your time Robert.