Change default colors of Draw Widget

[MattPohl]

I am trying to change the default polygon fill using the SimpleFillSymbol class as referenced In this discussion while using WAB version 2.17, but can not seem to make it happen. I have tried several code changes to the postCreate function and to the _setDrawDefaultSymbols function, but they all seem to keep the original default settings without throwing an error. Does anyone have a snippet for an example of a successful change of the default polygon fill? 

[RobertScheitlin__GISP · Accepted solution]

Matt,

   In the Widget.js make these changes (lines 23-26):

      _bindEvents: function() {
        //init first focusable node
        // jimuUtils.initFirstFocusNode(this.domNode, this.drawBox.pointIcon);

        //bind DrawBox
        this.own(on(this.drawBox, 'icon-selected', lang.hitch(this, this._onIconSelected)));
        this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawEnd)));

        //bind symbol change events
        this.own(on(this.pointSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.lineSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.fillSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.textSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));

        this.fillSymChooser.fillColor.setColor(new Color([255,255,0,0.25]));
        this.fillSymChooser.fillAlpha.setAlpha(0.25);
        this.fillSymChooser.fillOutlineColor.setColor(new Color([255,0,0]));
        this.fillSymChooser.fillOutlineWidth.setValue = 2;

        //bind unit events
        // this.own(on(this.showMeasure, 'click', lang.hitch(this, this._setMeasureVisibility)));

        //bind UndoManager events
        this.own(on(this._undoManager, 'change', lang.hitch(this, this._onUndoManagerChanged)));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Make these define changes at the top of the widget.js code (line 7 added and line 22 changed):

...
    'jimu/utils',
    'jimu/dijit/ToggleButton',
    'jimu/SpatialReference/wkidUtils',
    'jimu/LayerInfos/LayerInfos',
    'jimu/dijit/LoadingIndicator',
    'esri/Color',
    'jimu/dijit/DrawBox',
    'jimu/dijit/SymbolChooser',
    'jimu/dijit/ColorPicker',
    'jimu/dijit/formSelect',
    'dijit/form/NumberSpinner'
  ],
  function(declare, _WidgetsInTemplateMixin, BaseWidget, on, keys, Deferred, dojoI18n, esriNlsBundle,
    html, lang, array, domStyle,
    esriConfig, Graphic, Polyline, Polygon, TextSymbol, Font, esriUnits, webMercatorUtils,
    EsriProjectParameters,
    EsriSpatialReference,
    EsriRequest,
    geodesicUtils, GeometryService, AreasAndLengthsParameters, LengthsParameters, UndoManager,
    OperationBase, GraphicsLayer, FeatureLayer, ViewStack, jimuUtils, ToggleButton, wkidUtils, LayerInfos,
      LoadingIndicator, Color) {
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MattPohl]

Robert-

Works perfect. I thought I was on the right track but it seems I was not. Thanks for the quick response and the help. 

[dsanchez80]

Hello

I am trying also to customize Draw widget, however I am having some trouble with ColorPicker component as I don't want to use it. Instead of it, I need to set a ComboBox with some specific Colors defined by the business and configurable (should be read from config file, populate the combobox and allow to select the color: fill and outline).

Any idea how to disable the ColorPicker? Where to put the combobox in the Widget.html? Which js operations to use?

Appreciate your help.