Javascript API popup functions return value is unclear

MKF62

I'm creating a custom pop-up where I send the attribute table value into a function to reformat it. It's called like so:

<SPAN class="keyword token">var</SPAN> herbicide <SPAN class="operator token">=</SPAN> <SPAN class="string token">'${Herbicide1:herbName}'</SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

It then enters the function like this (it has many more cases than what's shown):

herbName <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; herb <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp; <SPAN class="keyword token">switch</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">case</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">:</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; herb <SPAN class="operator token">=</SPAN> <SPAN class="string token">'None'</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">case</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">:</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; herb <SPAN class="operator token">=</SPAN> <SPAN class="string token">'2,4-D'</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> herb<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>

The 'return herb' line should return the new value and I thought that the 'herbicide' variable would be set equal to whatever was returned, but that does not appear to be the case if I actually try to print it's value. When I print it:

>>> console.log(herbicide);

>>> ${Herbicide1:herbName}

This is making it really hard to do conditional statements on the variable. For instance, if herbicide is set to 'None' then I don't want it to show up in the popup, but using this statement:

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>herbicide <SPAN class="operator token">==</SPAN> <SPAN class="string token">'None'</SPAN><SPAN class="punctuation token">)</SPAN>‍<SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//do something</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

It will never evaluate true because unfortunately, no matter what value was returned from the function, the value being tested against is always the string '${Herbicide1:herbName}'

What's weird to me is that you can't see the value by printing it to the console, yet I know my functions are returning the correct values because it prints them correctly to a popup. I can't test the value I need to test... what can I do to fix that?

MKF62

So it turns out using conditionals isn't possible when formatting popup content as per the documentation:

Placeholders (string substitution)

When graphics or feature layers have an info template, that info template is automatically used by the API to construct info window content when a feature is selected. Within an info template, placeholders denoted by ${} are used to specify attributes to display. At run-time, substitution occurs and the placeholder is replaced with the actual attribute value for the selected feature. In the code below, values inside ${} correspond to attribute field names. In the screen shot, values for the selected feature were substituted for the associated placeholders.

Since it doesn't actually convert the values until run time, that's why it always appears as the placeholder when you console.log() it and never appears to change despite the function returning an actual value. To work around this, it appears I have to write a custom function and set the InfoTemplate content to what gets returned by the function. This means you don't use attribute fields specifiers and instead work with a graphic to get the attributes. 

Format info window content | Guide | ArcGIS API for JavaScript 3.25