Change Symbols in Measurement Widget in 4.28

[WilsonIonara]

I am using arcgis core 4.28 and I need to change the symbology for the measurement widget. I know that on 4.17 we can change it  by accessing the palette of the event viewModel but this seems impossible in 4.28. I need to have the boundary for area measurement with a symbol with transparent filling so just with just the border and no fill.  Any ideas? 

This is what works in 4.17 but not in 4.28

measurement.watch("activeWidget", function(evt){

if(evt !== null){

if(measurement.activeTool === "distance"){

evt.viewModel.palette.handleColor = [0,128,128,0.5];
evt.viewModel.palette.pathPrimaryColor = [0,76,76,1];
evt.viewModel.palette.pathSecondaryColor = [255,255,255,1];

}else{

evt.viewModel.palette.fillColor = [178,216,216,0];
evt.viewModel.palette.handleColor = [0,128,128,0.5];
evt.viewModel.palette.pathColor = [0,128,128,0.8];

}
}

});

[JoelBennett · Accepted solution]

I don't believe there's a documented way to do this.  The following solution works, but uses undocumented features, and therefore may not work in a future version of the SDK. so use at your own risk:

const measurement = new Measurement();
measurement.watch("viewModel.activeViewModel.tool", function(tool) {
  if (tool?._measurementLayer) {
    tool._measurementLayer.graphics.on("before-add", function(evt) {
      if (measurement.activeTool == "distance") {
        if (evt.item.symbol.type == "cim")
          evt.item.symbol = new SimpleLineSymbol(); //set a custom line symbol here
      } else if (measurement.activeTool == "area") {
        if (evt.item.symbol.type == "simple-fill")
          evt.item.symbol = new SimpleFillSymbol(); //set a custom fill symbol here
        else if (evt.item.symbol.type == "simple-line")
          evt.item.symbol = new SimpleLineSymbol(); //set a custom line symbol for the outline here
      }
    });
  }
});

[WilsonIonara]

Thank you so much! This works perfectly! You rock 😀

[WilsonIonara]

Also, is there a way to change also the dots representing the vertices?

[JoelBennett · Accepted solution]

Yes, it's the same kind of deal.  You could easily combine this with the previous one:

const measurement = new Measurement();
measurement.watch("viewModel.activeViewModel.tool", function(tool) {
  if (tool?._manipulatorLayer) {
    tool._manipulatorLayer.graphics.on("before-add", function(evt) {
      if (evt.item.symbol.type == "simple-marker")
          evt.item.symbol = new SimpleMarkerSymbol(); //set a custom marker symbol for the vertex here
    });
  }
});