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; } } }

Create a renderer using Arcade Expressions

HushamMohamed

I am creating simple election map, that visualize the result over the county by Some election races, which I listed them on accordion Panel. I tried to follow this example , to render the feature layer. I failed to Add the following

1- Add on Click Events on the Race Accordion header then render the map according. by replacing the field names in the Arcade Expression

(on console log I was able to get all the fields name)

2- instead of placing the arcade expression on the HTML file (script tag) How can I add it to my separated js file(script.js).

I do appreciate your help.

Attaching my code so far.

index.zip

Find more posts tagged with

Accepted answers

All comments

rscheitlin

You could could have your JS file inject a script tag using:

<SPAN class="keyword token">var</SPAN> s <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'script'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
s<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">=</SPAN> <SPAN class="string token">'text/javascript'</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>
document<SPAN class="punctuation token">.</SPAN>body<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>s<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

HushamMohamed

Thank you, Robert

I already tried that without any success.

I am still trying, Please share if you came with any solution or sample.

Regards

rscheitlin

Husham,

I think the purpose of putting it into the HTML script tag is that the var is global in nature. I have never gone down this path but I assume you could try and attach the var to the global window var and see if that works.

HushamMohamed

OH, thank you for the correction, and tagging Robert,

Hope to hear from him soon.

Regards

XanderBakker

I just had another look at the documentation on the Decode function and I think that my suggestion was wrong. No square brackets are used. So ,sorry for that.

I am not a JavaScript API progarmmer, so I think best I can do is to tag someone that is: Robert Scheitlin, GISP‌

HushamMohamed

thanks Xander, Yes that is exactly what i have. So Can you help with this 2 issue,

1- Add on Click Events on the Race Accordion header then render the map according, by replacing the field names in the Arcade Expression

(on console log I was able to get all the fields name as an array)

2- instead of placing the arcade expression on the HTML file (script tag) How can I add it to my separated js file(script.js).

Regards

XanderBakker

When you use Decode the second parameter is an array. So please try the following expression:

            <SPAN class="keyword token">var</SPAN> republican <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">.</SPAN>Candidate12<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> democrat <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">.</SPAN>Candidate10<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> independent <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">.</SPAN>Candidate11<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> WriteIn <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">.</SPAN>Candidate72<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> parties <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>republican<SPAN class="punctuation token">,</SPAN> democrat<SPAN class="punctuation token">,</SPAN> independent<SPAN class="punctuation token">,</SPAN>WriteIn<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          
            <SPAN class="keyword token">return</SPAN> <SPAN class="token function">Decode</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Max</SPAN><SPAN class="punctuation token">(</SPAN>parties<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">[</SPAN>
              republican<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'republican'</SPAN><SPAN class="punctuation token">,</SPAN>
              democrat<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'democrat'</SPAN><SPAN class="punctuation token">,</SPAN>
              independent<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'Libertarian'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
              <SPAN class="string token">'n/a'</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>

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.