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

Make time-aware popups with Arcade

GeeFernando

Did you know that you can customise popups based on time and dates? With Arcade you can .

This can come in handy when displaying opening hours for restaurants, cafes and other facilities. If you’re unfamiliar with Arcade - please refer to these ArcGIS Blogs, as this post assumes some prior knowledge.

Additional Arcade resources

Pop Up Variations

Let’s get started

First, find or create a data-set with opening hours (preferably for all days of the week). For this example I’ll be using Access Canberra locations (sourced from - dataACT). Please ensure opening hours are saved as numbers or text field types.

Time Types

Build expressions

Within the pop-up configuration window - build the following expressions or feel free to follow along with this web map.

Opening Hour Expressions

hoursOfOperationToday {expression/expr0}

This expression will return the current weekday alongside its opening hours.

For example:

Thursday: 08:30-16:30

<SPAN class="keyword token">var</SPAN> weekDays <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Sunday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Monday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Tuesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Wednesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Thursday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Friday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Saturday'</SPAN><SPAN class="punctuation token">]</SPAN>

<SPAN class="comment token">//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6</SPAN>
<SPAN class="keyword token">var</SPAN> currentWeekDay <SPAN class="operator token">=</SPAN> <SPAN class="token function">Weekday</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//Return weekday followed by opening hours</SPAN>
<SPAN class="keyword token">var</SPAN> hoursOfOperationToday <SPAN class="operator token">=</SPAN> weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">": "</SPAN> <SPAN class="operator token">+</SPAN> $feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN>

<SPAN class="keyword token">return</SPAN> hoursOfOperationToday‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

hoursOfOperationRestOfWeek {expression/expr1}

This expression will return the remaining weekdays alongside their opening hours.

For example:

Friday: 08:30-16:30
Saturday: Closed
Sunday: Closed
Monday: 08:30-16:30
Tuesday: 08:30-16:30
Wednesday: 08:30-16:30

<SPAN class="keyword token">var</SPAN> weekDays <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Sunday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Monday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Tuesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Wednesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Thursday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Friday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Saturday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Sunday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Monday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Tuesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Wednesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Thursday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Friday'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6</SPAN>
<SPAN class="keyword token">var</SPAN> currentWeekDay <SPAN class="operator token">=</SPAN> <SPAN class="token function">Weekday</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="keyword token">var</SPAN> hoursOfOperationRestOfWeek <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN>

<SPAN class="comment token">//Iterate over the weekdays and opening hours for the remaning 6 days of the week</SPAN>
<SPAN class="keyword token">for</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> currentWeekDay <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> currentWeekDay <SPAN class="operator token">+</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    hoursOfOperationRestOfWeek <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> weekDays<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">": "</SPAN> <SPAN class="operator token">+</SPAN> $feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN> TextFormatting<SPAN class="punctuation token">.</SPAN>NewLine
<SPAN class="punctuation token">}</SPAN>

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

openCloseStatus {expression/expr2}

This expression will return whether the shopfront is Open, Closed, Opens soon or Closing soon based on opening hours and the time displayed on users' device .

<SPAN class="keyword token">var</SPAN> weekDays <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Sunday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Monday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Tuesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Wednesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Thursday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Friday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Saturday'</SPAN><SPAN class="punctuation token">]</SPAN>

<SPAN class="comment token">//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6</SPAN>
<SPAN class="keyword token">var</SPAN> currentWeekDay <SPAN class="operator token">=</SPAN> <SPAN class="token function">Weekday</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//Change 'Closed' to 00:00-00:00 to be consistent with the rest of opening hours information</SPAN>
<SPAN class="keyword token">var</SPAN> formattedOpeningHours <SPAN class="operator token">=</SPAN> <SPAN class="token function">When</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closed"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"00:00-00:00"</SPAN><SPAN class="punctuation token">,</SPAN> $feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//Separate Opening hours and minutes into an array</SPAN>
<SPAN class="keyword token">var</SPAN> separateOpening <SPAN class="operator token">=</SPAN> <SPAN class="token function">Split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Replace</SPAN><SPAN class="punctuation token">(</SPAN>formattedOpeningHours<SPAN class="punctuation token">,</SPAN><SPAN class="string token">'-'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">':'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">':'</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//Assign hours and minutes to opening and close times</SPAN>
<SPAN class="keyword token">var</SPAN> startTime <SPAN class="operator token">=</SPAN> <SPAN class="token function">Date</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Year</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Month</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Day</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">var</SPAN> endTime <SPAN class="operator token">=</SPAN> <SPAN class="token function">Date</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Year</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Month</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Day</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<SPAN class="punctuation token">[</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<SPAN class="punctuation token">[</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="token function">When</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> endTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="token function">Dateadd</SPAN><SPAN class="punctuation token">(</SPAN>endTime<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hours'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Closes soon:"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> endTime<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Open"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="token function">Dateadd</SPAN><SPAN class="punctuation token">(</SPAN>startTime<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hours'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Opens soon"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"Closed"</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>

openCloseStatusColour {expression/expr3}

If you'd like to re-iterate the openCloseStatus values with added colour - rewrite and replace previous expression's return values with hexadecimal colour values.

For example:

#239B56 ⋅ Open

#CB4335 ⋅ Closed

#2ECC71 ⋅ Opens soon

#EC7063 ⋅ Closing soon

<SPAN class="comment token">//First 15 lines the same as - openCloseStatus {expression/expr2}</SPAN>

<SPAN class="token function">When</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> endTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="token function">Dateadd</SPAN><SPAN class="punctuation token">(</SPAN>endTime<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hours'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"#EC7063"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> endTime<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"#239B56"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="token function">Dateadd</SPAN><SPAN class="punctuation token">(</SPAN>startTime<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hours'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"#2ECC71"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"#CB4335"</SPAN><SPAN class="punctuation token">)</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Now use this expression to replace the colour code within the popup HTML. For more information on this topic - refer to Bring Colors From Your Map Into Your Pop-up Using Arcade written by Lisa Berry‌.

Inserting Colour Expressions into HTML

closingOrOpeningTime {expression/expr4}

This expression can look a little daunting at first, but like any other piece of code - go through one line at a time and use your own test environment to test and experiment .

It will return the:

closing time, if the Access Canberra shop front is Open or Closes soon.
opening time for the current day, if it Opens soon, or Closed (before hours).
and next opening day and time, if it's Closed (after hours), Closes soon or Closed for the whole day.

<SPAN class="keyword token">var</SPAN> weekDays <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Sunday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Monday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Tuesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Wednesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Thursday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Friday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Saturday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Sunday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Monday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Tuesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Wednesday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Thursday'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'Friday'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6</SPAN>
<SPAN class="keyword token">var</SPAN> currentWeekDay <SPAN class="operator token">=</SPAN> <SPAN class="token function">Weekday</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//Change 'Closed' to 00:00-00:00 to be consistent with the rest of of opening hours information</SPAN>
<SPAN class="keyword token">var</SPAN> formattedOpeningHours <SPAN class="operator token">=</SPAN> <SPAN class="token function">When</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closed"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"00:00-00:00"</SPAN><SPAN class="punctuation token">,</SPAN> $feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//Separate Opening hours and minutes into an array</SPAN>
<SPAN class="keyword token">var</SPAN> separateOpening <SPAN class="operator token">=</SPAN> <SPAN class="token function">Split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Replace</SPAN><SPAN class="punctuation token">(</SPAN>formattedOpeningHours<SPAN class="punctuation token">,</SPAN><SPAN class="string token">'-'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">':'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">':'</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="keyword token">var</SPAN> startTime <SPAN class="operator token">=</SPAN> <SPAN class="token function">Date</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Year</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Month</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Day</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">var</SPAN> endTime <SPAN class="operator token">=</SPAN> <SPAN class="token function">Date</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Year</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Month</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="token function">Day</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<SPAN class="punctuation token">[</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>separateOpening<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> openCloseStatus <SPAN class="operator token">=</SPAN> <SPAN class="token function">When</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> endTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="token function">Dateadd</SPAN><SPAN class="punctuation token">(</SPAN>endTime<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hours'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Closes soon:"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> endTime<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Open"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> startTime <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="token function">Dateadd</SPAN><SPAN class="punctuation token">(</SPAN>startTime<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hours'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Opens soon"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"Closed"</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//If openCloseStatus is Closed (before hours), return current day's opening time</SPAN>
<SPAN class="comment token">//Else if openCloseStatus is Closed (after hours), Closes soon or Closed for the whole day, return next opening day and time</SPAN>
<SPAN class="keyword token">var</SPAN> nextOpening <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closed"</SPAN> <SPAN class="operator token">&&</SPAN> $feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">!=</SPAN> <SPAN class="string token">"Closed"</SPAN> <SPAN class="operator token">&&</SPAN> <SPAN class="token function">Now</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> startTime<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    nextOpening <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Opens "</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="token function">LEFT</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closed"</SPAN> <SPAN class="operator token">||</SPAN> openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closes soon:"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN> $feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">!=</SPAN> <SPAN class="string token">"Closed"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    nextOpening <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Opens "</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="token function">LEFT</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">" "</SPAN> <SPAN class="operator token">+</SPAN> weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closed"</SPAN> <SPAN class="operator token">||</SPAN> openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closes soon:"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">for</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> currentWeekDay <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> $feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closed"</SPAN><SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        nextOpening <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Opens "</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="token function">LEFT</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>i <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">" "</SPAN> <SPAN class="operator token">+</SPAN> weekDays<SPAN class="punctuation token">[</SPAN>i <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN>
    <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="token function">When</SPAN><SPAN class="punctuation token">(</SPAN>openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Open"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"⋅ "</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="token function">RIGHT</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Opens soon"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"⋅ "</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="token function">LEFT</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
openCloseStatus <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Closes soon:"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="token function">RIGHT</SPAN><SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN>weekDays<SPAN class="punctuation token">[</SPAN>currentWeekDay<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">" ⋅ "</SPAN> <SPAN class="operator token">+</SPAN> nextOpening<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"⋅ "</SPAN> <SPAN class="operator token">+</SPAN> nextOpening<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>

Final thoughts

Once you’ve built the pop-ups to your heart's content you can further highlight them by using configurable app templates. Click here to see how I’ve extended the above web map using the NearBy configurable app.

Nearby Access Canberra GIF

Tips - Make sure to take advantage of Test your expressions feature to check whether return values look correct. If you have admin privileges to your computer you could also adjust time/date to test various return values based on opening hours.

Test Expressions

Challenge - As you may have figured out, these expressions are not time-zone aware. And in most instances this wouldn't be a problem - as the intended maps and apps are localised.

But, I'd still love to hear your thoughts around how you'd go about this. Please use the comments section below for ideas.

Cheers! - Gee Fernando

Find more posts tagged with

Comments

XanderBakker

Hi Gee Fernando ,

Thanks for sharing. Great content and great examples!

I have a couple of related posts that might be interesting for those that read your blog (although the content is in Spanish, it is very visual and might be helpful to some):

Visualizar el esquema de barrido y el próximo barrido en una ventana emergente con Arcade (visualize which streets are being cleaned in the symbology based on current time and a visual representation in the pop-up)
Determinar Días Hábiles y Horas Horario de Trabajo con Arcade (time an assignment has been open taking into account any holidays and weekends)

If you run into Andres White and/or Nicholas Flett, please say hi and tell them I miss my mates. They will know what I mean

GeeFernando

Thanks Xander Bakker‌. Just read both your articles in English. And I LOVED it.

Just goes onto show the power of Aracde.

Yes, will definitely mention that you miss them

AlanGuerra

I'm having trouble getting mine to work and I think it is because your configuration is for 24 hour time format.

GeeFernando

Hi Alan Guerra,

You'll need to convert the time to 24 hour format. You can either change how the data is stored or write an Arcade expression to do the conversion.

Click here for more information on time formats - Date Functions | ArcGIS for Developers

Also, feel free to share how your time formats are saved? And I might be able to help out.

Gee

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.