nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Matt,

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

      _bindEvents<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">//init first focusable node</SPAN>
        <SPAN class="comment token">// jimuUtils.initFirstFocusNode(this.domNode, this.drawBox.pointIcon);</SPAN>

        <SPAN class="comment token">//bind DrawBox</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>drawBox<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'icon-selected'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_onIconSelected<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>drawBox<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'DrawEnd'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_onDrawEnd<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">//bind symbol change events</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>pointSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>lineSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>textSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillColor<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillAlpha<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAlpha</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillOutlineColor<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillOutlineWidth<SPAN class="punctuation token">.</SPAN>setValue <SPAN class="operator token">=</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">//bind unit events</SPAN>
        <SPAN class="comment token">// this.own(on(this.showMeasure, 'click', lang.hitch(this, this._setMeasureVisibility)));</SPAN>

        <SPAN class="comment token">//bind UndoManager events</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_undoManager<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_onUndoManagerChanged<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

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

All comments

RobertScheitlin__GISP

Matt,

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

      _bindEvents<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">//init first focusable node</SPAN>
        <SPAN class="comment token">// jimuUtils.initFirstFocusNode(this.domNode, this.drawBox.pointIcon);</SPAN>

        <SPAN class="comment token">//bind DrawBox</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>drawBox<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'icon-selected'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_onIconSelected<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>drawBox<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'DrawEnd'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_onDrawEnd<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">//bind symbol change events</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>pointSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>lineSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>textSymChooser<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDrawDefaultSymbols</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillColor<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillAlpha<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAlpha</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillOutlineColor<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>fillSymChooser<SPAN class="punctuation token">.</SPAN>fillOutlineWidth<SPAN class="punctuation token">.</SPAN>setValue <SPAN class="operator token">=</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">//bind unit events</SPAN>
        <SPAN class="comment token">// this.own(on(this.showMeasure, 'click', lang.hitch(this, this._setMeasureVisibility)));</SPAN>

        <SPAN class="comment token">//bind UndoManager events</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_undoManager<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_onUndoManagerChanged<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

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

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.