Is it possible to create a widget that updates the renderer based on user inputed values (weights)?

[DrewMerrill1]

Essentially I would like to build a web application that allows a user to input values and have those value be multiplied by values in specific fields, thus changing the symbology of each feature (assuming they move across classes). I think this may be possible using the "renderer as a function" method in JavaScript, but I am not sure.

Thanks,

Drew

[thejuskambi]

What kind of layers are we taking about? FeatureLayer, GraphicsLayer or DynamicMapServiceLayer.

If it is a FeatureLayer, it is possible, checkout this sample. Renderer using a function | ArcGIS API for JavaScript 3.17 

[DrewMerrill1]

Thanks for the tip. It is a FeatureLayer. The renderer using a function method seems like the best option, I just can't find any live examples of it being used in practice. 

[KristianEkenes]

The sample thejus kambi‌ provided the link to demonstrates how to do this. In a nutshell, you are passing a function with the following signature into the "field" parameter of the renderer:

// The function must have a graphic param to access field values
// this is just an example for demo purposes.
function weightedRenderer (graphic) {
  var field1Val = graphic.attributes.field1;
  var field2Val = graphic.attributes.field2;
  var userInput1 = document.getElementById("foo").value;
  
  return (field1Val / field2Val) * userInput1;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

var renderer  = new ClassBreaksRenderer(null, weightedRenderer);
layer.setRenderer(renderer);‍‍‍‍

You would also need to set breaks on your ClassBreaksRenderer, but that is independent of the function. This should be enough to get you started.

[JordanBaumgardner]

I figured it out for 4.x

JS Bin - Collaborative JavaScript Debugging 

var CustomSymbolRenderer =
SimpleRenderer.createSubclass(SimpleRenderer,
{
getSymbol: function () {
var sym = this.inherited(arguments);

// Do what you want here to change the symbol

sym.color = new Color([Math.floor(Math.random() * 255) + 1, Math.floor(Math.random() * 255) + 1, Math.floor(Math.random() * 255) + 1, .5]);

this.set("symbol",sym.clone());
return sym;
}
});

Then use this Renderer in your FeatureLayer creation

var myLayer = new FeatureLayer({url: "myurl", renderer: CustomSymbolRenderer});