Unique Value Renderer - use a local variable in Java Script in Value Expression

[GeorgeAbraham]

Hi Experts / Kristian Ekenes, 

Unfortunately I don't have a working example to share as the data that I am working on is client sensitive. 

I am using a Unique Value Renderer to colour various types of pipelines with the PRODUCT feature/attribute and it works fine without a value expression.

In my JS code, I have a variable, say routeName which has a name say "ABC". Now what I need is the value expression to consider the local variable which is not happening

I also tried with field and field1 and filedDelimiter as ",', but even this is not working. Need help on how to access this.

The whole idea is if I select a particular route on the map, I need to change the opacity of the other routes in this layer, so if I can get this to work, then I can add the opacity. 

var routeName = "ABC";

var pipelineRenderer = {renderer: {
type: "unique-value",
field: "PRODUCT",
valueExpression: "When($feature.PRODUCT = "OIL" && $feature.ROUTE_NAME != routeName, 'OIL', $feature.PRODUCT = "GAS" && $feature.ROUTE_NAME != routeName, 'GAS', 'OTHERS')",
defaultSymbol: {
type: "simple-line",
color: "black",
width: 2
},
uniqueValueInfos: [
{
value: 'OIL',
symbol: {
type: "simple-line",
color: "red",
width: 3
}
},
{
value: 'GAS',
symbol: {
type: "simple-line",
color: "yellow",
width: 2.5
}
}
]
}}

pipeLineLayer.set(pipelineRenderer);
pipeLineLayer.refresh();

I even tried to do below but its throwing Syntax Error - if I can access the DOM and take the value which I can use in my When expression, that should also work:

valueExpression: `

                                var selectFilter = document.getElementsByTagName("select");

                                var opts = selectFilter[0].options;

                                var route = selectFilter.item(0).item(selectFilter.item(0).selectedIndex).value.split("|")[0].split(":")[1].trim();

                                Console("Selected Route: " +  route);

                                When($feature.PRODUCT == 'GAS', 'GAS', $feature.PRODUCT == 'OIL', 'OIL', 'OTHERS')`,

[JohnGrayson]

I'm not sure doing this via the renderer is the best way to handle this use case.  Have you instead tried looking at the  effect (FeatureEffect) property of the FeatureLayerView?  By setting the effect property you can configure the FeatrueLayerView to display features that don't have a specific route name to be more transparent.

[GeorgeAbraham]

Thanks a lot John Grayson - something new for me to try out/explore definitely, however, for the time being since I had almost made it with new renderer, I will go with Kristian's comment/changes. No hard feelings! Cheers!

[KristianEkenes · Accepted solution]

Hey George,

I agree with John's suggestion. It might be better to try FeatureEffect in this case. That way you can set a renderer that's less complicated, and have a cleaner way of de-emphasizing non-selected values.

If you're still going down the renderer route...the Arcade expression is referring to DOM elements which technically isn't allowed in arcade. You're already half way there using a template literal, but you need to wrap the JS parts in ${} to make this valid arcade: 

`When($feature.PRODUCT = "OIL" && $feature.ROUTE_NAME != '${routeName}', 'OIL', $feature.PRODUCT = "GAS" && $feature.ROUTE_NAME != '${routeName}', 'GAS', 'OTHERS')`,‍

Kristian

[GeorgeAbraham]

Thanks a lot Kristian Ekenes‌

You have been my saviour and I realized the mistake I was doing. I had encapsulated the JS part as ${routeName} but was missing the single quotes '' as '${routeName}' - without this I was still getting invalid TOKEN.

Its working seamlessly now as I wanted it to work. Lot of learning!