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

External Arcade scripts

kenbuja

The samples for using Arcade scripts all use in-line scripts. Instead of having one big index.html file, are there any samples available showing how to keep these Arcade scripts in a separate location?

A followup question would be how to do this in TypeScript.

Find more posts tagged with

Accepted answers

KristianEkenes

Hi Ken,

This app stores most of the Arcade scripts in a different location: GitHub - ekenes/covid19viz: Visualization of COVID-19 cases over time.

More specifically here: covid19viz/expressionUtils.ts at master · ekenes/covid19viz · GitHub

And it's written in TypeScript. Hopefully that helps.

Kristian

All comments

RyanBohan

Thank you for calling it a backtick. I hate to say how long I spent trying to use a single quote to get an sample arcade to run. If your looking for it the backtick ` is top left on most keyboards

KristianEkenes

Yeah, this is an Arcade limitation for now. Arcade in popups only supports returning numbers or strings, not HTML markup. It's been on our list for some time to evaluate this. It's a popular request. So unfortunately we don't support this at the moment.

Kristian

kenbuja

Thanks for your help, Kristian. I have been able to incorporate the external scripts into my code. Here's one of the scripts in my external file (scripts.ts).

<SPAN class="keyword token">export</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getSources</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">return</SPAN> `
  <SPAN class="keyword token">var</SPAN> documents <SPAN class="operator token">=</SPAN> <SPAN class="token function">FeatureSetByRelationshipName</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Document"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">// initialize result text and get count</SPAN>
  <SPAN class="keyword token">var</SPAN> result <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> cnt <SPAN class="operator token">=</SPAN> <SPAN class="token function">Count</SPAN><SPAN class="punctuation token">(</SPAN>documents<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="comment token">// check count and start creating result text</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>cnt <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="comment token">// we have related records</SPAN>
    result <SPAN class="operator token">=</SPAN> cnt <SPAN class="operator token">+</SPAN> <SPAN class="string token">" documents found:"</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="comment token">// loop through venues</SPAN>
    <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> document <SPAN class="keyword token">in</SPAN> documents<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      result <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> TextFormatting<SPAN class="punctuation token">.</SPAN>NewLine <SPAN class="operator token">+</SPAN> <SPAN class="string token">" - "</SPAN> <SPAN class="operator token">+</SPAN> document<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Title"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="comment token">// add a line per venue and include name and address</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="comment token">// we don't have related record, show that in the result</SPAN>
    result <SPAN class="operator token">=</SPAN> <SPAN class="string token">"No documents found"</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>

  <SPAN class="keyword token">return</SPAN> result<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

And here's how I bring it into my code

<SPAN class="keyword token">import</SPAN> <SPAN class="punctuation token">{</SPAN> getSources <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">from</SPAN> <SPAN class="string token">'./arcade/scripts'</SPAN>

<SPAN class="keyword token">const</SPAN> regionLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
  url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'...'</SPAN><SPAN class="punctuation token">,</SPAN>
  popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
    title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Documents by region'</SPAN><SPAN class="punctuation token">,</SPAN>
    content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
      <SPAN class="punctuation token">{</SPAN>
        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'text'</SPAN><SPAN class="punctuation token">,</SPAN>
        text<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
          <SPAN class="string token">'{expression/doc-count}'</SPAN>
        <SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    expressionInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
      <SPAN class="punctuation token">{</SPAN>
        name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'doc-count'</SPAN><SPAN class="punctuation token">,</SPAN>
        title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Document Count'</SPAN><SPAN class="punctuation token">,</SPAN>
        expression<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">getSources</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><SPAN class="punctuation token">,</SPAN>
  outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'*'</SPAN><SPAN class="punctuation token">]</SPAN>
<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Now I have a followup question. I'd like to use html formatting in my returned list, using this script.

<SPAN class="keyword token">export</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getSourcesList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">return</SPAN> `
  <SPAN class="keyword token">var</SPAN> documents <SPAN class="operator token">=</SPAN> <SPAN class="token function">FeatureSetByRelationshipName</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Document"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">// initialize result text and get count</SPAN>
  <SPAN class="keyword token">var</SPAN> result <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> cnt <SPAN class="operator token">=</SPAN> <SPAN class="token function">Count</SPAN><SPAN class="punctuation token">(</SPAN>documents<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">// check count and start creating result text</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>cnt <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="comment token">// we have related records</SPAN>
    result <SPAN class="operator token">=</SPAN> \<SPAN class="template-string token"><SPAN class="string token">`There are a total of \</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN> cnt <SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">  documents found: <ul>\`</SPAN></SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="comment token">// loop through venues</SPAN>
    <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> document <SPAN class="keyword token">in</SPAN> documents<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="comment token">// add a line per venue and include name and address</SPAN>
      result <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> \`<SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN>\$<SPAN class="punctuation token">{</SPAN>document<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Title"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN>\<SPAN class="template-string token"><SPAN class="string token">`;
    }
    result += \`</ul>\`</SPAN></SPAN><SPAN class="punctuation token">;</SPAN> 
    <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="comment token">// we don't have related record, show that in the result</SPAN>
    result <SPAN class="operator token">=</SPAN> <SPAN class="string token">"No documents found"</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
  
  <SPAN class="keyword token">return</SPAN> result<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>‍</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>

If I use this script with the ExpressionInfos and the text property, I see the formatting tags.

It looks like I have to use CustomContent for this to appear with the formatting tags, but I'm just getting the entire script returned, not the results of the script.

  <SPAN class="keyword token">const</SPAN> contentDocList <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CustomContent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'*'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    creator<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="token function">getSourcesList</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>

  <SPAN class="keyword token">const</SPAN> regionLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'...'</SPAN><SPAN class="punctuation token">,</SPAN>
    popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
      title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Documents by region'</SPAN><SPAN class="punctuation token">,</SPAN>
      content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
        contentDocList
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'*'</SPAN><SPAN class="punctuation token">]</SPAN>
  <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>‍</SPAN></SPAN>

What's the proper way to do this?

kenbuja

However, when I use the "Summarize intersecting point" script, I get an error.

Uncaught ReferenceError: num is not defined at size.js:40

<SPAN class="comment token">// Query the number of crimes that intersect a selected polygon</SPAN>
<SPAN class="keyword token">const</SPAN> base <SPAN class="operator token">=</SPAN> `
  <SPAN class="keyword token">var</SPAN> crimes <SPAN class="operator token">=</SPAN> <SPAN class="token function">Intersects</SPAN><SPAN class="punctuation token">(</SPAN>
    $feature<SPAN class="punctuation token">,</SPAN>
    <SPAN class="token function">FeatureSetByName</SPAN><SPAN class="punctuation token">(</SPAN>$map<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"San Diego crimes"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"desc_"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"is_night"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
  <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">// Queries the count of crimes grouped by the "desc_" field</SPAN>
  <SPAN class="keyword token">var</SPAN> stats <SPAN class="operator token">=</SPAN> <SPAN class="token function">GroupBy</SPAN><SPAN class="punctuation token">(</SPAN>crimes<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"desc_"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"total"</SPAN><SPAN class="punctuation token">,</SPAN> expression<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1"</SPAN><SPAN class="punctuation token">,</SPAN> statistic<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"count"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"night_avg"</SPAN><SPAN class="punctuation token">,</SPAN> expression<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"is_night"</SPAN><SPAN class="punctuation token">,</SPAN> statistic<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"avg"</SPAN> <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">]</SPAN>
  <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">// Orders the results in descending order by the total count</SPAN>
  <SPAN class="comment token">// excludes crimes that don't have a classification</SPAN>
  <SPAN class="keyword token">var</SPAN> topCrimes <SPAN class="operator token">=</SPAN> <SPAN class="token function">Top</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">OrderBy</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Filter</SPAN><SPAN class="punctuation token">(</SPAN>stats<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"desc_ <> ''"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"total desc"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="keyword token">var</SPAN> output <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="token function">Count</SPAN><SPAN class="punctuation token">(</SPAN>topCrimes<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="string token">"No crimes committed in this area"</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
  <SPAN class="keyword token">var</SPAN> num <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="comment token">// Format the results for display</SPAN>
  <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> item <SPAN class="keyword token">in</SPAN> topCrimes<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    num<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">var</SPAN> num_crimes <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN>total<SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">var</SPAN> crimeType <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"desc_"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

    <SPAN class="comment token">// The isNight field has values of either 1 or 0.</SPAN>
    <SPAN class="comment token">// If the average value is high, then most crimes</SPAN>
    <SPAN class="comment token">// occurred at night. If the average is low, then</SPAN>
    <SPAN class="comment token">// the crimes typically occurred during daytime hours.</SPAN>
    <SPAN class="keyword token">var</SPAN> timeOfDay <SPAN class="operator token">=</SPAN> <SPAN class="token function">When</SPAN><SPAN class="punctuation token">(</SPAN>
      item<SPAN class="punctuation token">.</SPAN>night_avg <SPAN class="operator token">>=</SPAN> <SPAN class="number token">0.6</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"at night"</SPAN><SPAN class="punctuation token">,</SPAN>
      item<SPAN class="punctuation token">.</SPAN>night_avg <SPAN class="operator token"><=</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">" during the daytime hours"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">" at both night and day"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

    <SPAN class="comment token">// Display crime type with count using template literals</SPAN>
    output <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> \`$<SPAN class="punctuation token">{</SPAN>num<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">.</SPAN> $<SPAN class="punctuation token">{</SPAN>crimeType<SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token">--</SPAN> Total offenses<SPAN class="punctuation token">:</SPAN> $<SPAN class="punctuation token">{</SPAN><SPAN class="token function">Text</SPAN><SPAN class="punctuation token">(</SPAN>num_crimes<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"#,###"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token">--</SPAN> Most crimes were reported $<SPAN class="punctuation token">{</SPAN>timeOfDay<SPAN class="punctuation token">}</SPAN>

\<SPAN class="template-string token"><SPAN class="string token">`;
  }
  return output;
`</SPAN></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>‍</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><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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

KristianEkenes

You can use escape characters. This is documented on this page: Arcade | ArcGIS API for JavaScript 4.16 beginning with the line: "You can use template literals (ES6 or later) to write multi-line Arcade expressions."

For example:

layer<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
  content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{expression/percent-unemployed}"</SPAN><SPAN class="punctuation token">,</SPAN>
  expressionInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
    <SPAN class="punctuation token">{</SPAN>
      name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-crimes"</SPAN><SPAN class="punctuation token">,</SPAN>
      title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Top crimes"</SPAN><SPAN class="punctuation token">,</SPAN>
      expression<SPAN class="punctuation token">:</SPAN> `
        <SPAN class="keyword token">var</SPAN> unemploymentRate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN> $feature<SPAN class="punctuation token">.</SPAN>UNEMP_CY <SPAN class="operator token">/</SPAN> $feature<SPAN class="punctuation token">.</SPAN>LABOR_FORCE <SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> population <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">.</SPAN>POP_16UP<SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> populationNotWorking <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="punctuation token">(</SPAN> $feature<SPAN class="punctuation token">.</SPAN>UNEMP_CY <SPAN class="operator token">+</SPAN> $feature<SPAN class="punctuation token">.</SPAN>NOT_LABORFORCE_16 <SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> $feature<SPAN class="punctuation token">.</SPAN>POP_16UP <SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// returns a string built using an Arcade template literal</SPAN>

        <SPAN class="keyword token">return</SPAN> \`\$<SPAN class="punctuation token">{</SPAN>$feature<SPAN class="punctuation token">.</SPAN>COUNTY<SPAN class="punctuation token">}</SPAN> County

        <SPAN class="operator token">-</SPAN> Unemployment rate<SPAN class="punctuation token">:</SPAN> \$<SPAN class="punctuation token">{</SPAN><SPAN class="token function">Text</SPAN><SPAN class="punctuation token">(</SPAN>unemploymentRate<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"##.#"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="operator token">%</SPAN>
        <SPAN class="operator token">-</SPAN> <SPAN class="operator token">%</SPAN> population not working<SPAN class="punctuation token">:</SPAN> \$<SPAN class="punctuation token">{</SPAN><SPAN class="token function">Text</SPAN><SPAN class="punctuation token">(</SPAN>populationNotWorking<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"##.#"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="operator token">%</SPAN>
        <SPAN class="operator token">-</SPAN> Population<SPAN class="punctuation token">:</SPAN> \$<SPAN class="punctuation token">{</SPAN><SPAN class="token function">Text</SPAN><SPAN class="punctuation token">(</SPAN>population<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"#,###"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN>\<SPAN class="template-string token"><SPAN class="string token">`
      `</SPAN></SPAN>
    <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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

kenbuja

In the expressionUtils.ts, you use the backtick to enclose the actual Arcade code. What do you do in cases where the code is using template literals like in this sample?

KristianEkenes

Hi Ken,

This app stores most of the Arcade scripts in a different location: GitHub - ekenes/covid19viz: Visualization of COVID-19 cases over time.

More specifically here: covid19viz/expressionUtils.ts at master · ekenes/covid19viz · GitHub

And it's written in TypeScript. Hopefully that helps.

Kristian

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.