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

Using Arcade to calculate and color by time and date in a Dashboard

Charlie_Kaufman

I was asked by my office to create a scheduler app to track meetings. My thoughts were to create a simple Survey123 Connect form that has Meeting Name along with the time and date of said meeting and have that displayed on a Dashboard for people to call up and view.

What was then asked of me was to somehow have a visual cue as the meetings were coming up, in progress, or finished. I started with what I assumed would be a simple red-yellow-green color scale on some test data just to see if it would work. However, I have either come to a point where I am asking the software do something that Esri never expected, I have hit a wall with my Arcade expression ability, or quite possibly a little of both. I think I'm getting hung up in the whole date / time issues but not sure how to fix the problem.

Can anyone give me some advice on what I can do to make this proof of concept work? I've attached a screen grab of my test data in my Dashboard, the attribute table, and my attempt at the Arcade script.

schedule.txt

example data.png

example data attributes.png

KojiKUROSAWA_10-1732075137499.png

KojiKUROSAWA_9-1732075121617.png

KojiKUROSAWA_8-1732075092697.png

Find more posts tagged with

ArcGIS Online

Accepted answers

JA7

You are on the right track, there are just a couple things to adjust.

You will want to swap the position of your Now and your meeting start date.

DateDiff(meeting1_time, timenow, 'hours')

Your meeting variables where you are returning the color, your else return is 'N/A'. That is not a color, so you need to either supply a default color to return or just use '', to not specify a color at all.

Next, let's look at your time buckets. Your When statement will run in the order you specified, as soon as it hits a true statement it will stop. The first statement it hits is if hours is less than 1. Because 0 is less than 1, your 0 statement will never fire. Additionally, there is a hole in your time buckets at exactly 1. 1 is not less than 1 and it's not greater than 1, so at exactly 1 hour (and only at 1 hour) you will get the default color (which currently is 'N/A'). To get around this you need to create explicit time chunks:

When(due1 <= 0, '#ffff00', due1 > 0 && due1 < 1, '#ff0000', '#4c3600')

Here we are providing a color at 0 and below, another color for anything between 0 and 1, and since everything else will be 1 or higher, we don't need to spell that out and can use the else value to capture everything else.

Since you are returning those colors as an attribute, you then have to add them into the HTML of your list to see any of the colors returned.

Some blogs that might be useful:

All comments

JA7

You are on the right track, there are just a couple things to adjust.

You will want to swap the position of your Now and your meeting start date.

DateDiff(meeting1_time, timenow, 'hours')

When(due1 <= 0, '#ffff00', due1 > 0 && due1 < 1, '#ff0000', '#4c3600')

Since you are returning those colors as an attribute, you then have to add them into the HTML of your list to see any of the colors returned.

Some blogs that might be useful:

Charlie_Kaufman

Jen

Thanks for the help. I was able to update my DateDiff calculation and patched the hole in my time bucket as you suggested. I am still having trouble with the colors working. If I set the text color for example my meeting1 variable, it just returns the first color choice and does not honor the colors chosen for any time passing.

Any additional advice?

Charlie

JA7

Do you mean the color is not changing as time progresses? You will need to set a refresh interval if the dashboard is left open and is not being refreshed.

Charlie_Kaufman

Thanks for the help with this. I was able to update my draft and I have been able to get my colors to update as the time changes.

So new issue, is that my boss would like to see some of the meetings to have a preset time each day. Meeting 1 - would be at 7am every day. Is there a way to use the now() feature or something like it but keep a default time in place?

JA7

I assume you are doing this calculation in your survey. I would not use now(), instead use today(). Today() sets the time to noon, so now that you have a set starting time everytime, you can add a calculation to it to move the time accordingly.

For your example, 7am is 5 hours behind noon, so the calculation will be: date-time(decimal-date-time(today()) - 0.2083333333333333)

5 hours = 1 (day) / 24 (hours) * 5 (hours) = 0.2083333333333333

You might want to check out Dates and Times in Survey123

Charlie_Kaufman

Jen.

Thanks for that, the calculations are doing exactly now what I was hoping to see. Now however, they are not following through to the Survey123 form. Any thoughts on this?

JA7

Remove the today() from the default field. I'm also noticing that today() is using midnight in the browser instead of noon, so if this is going to be a browser based survey, you will want to adjust your calculations accordingly.

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.