topic Re: Add Image to Dashboard Details Widget in Developers Questions

Add Image to Dashboard Details Widget

JaredPilbeam2 — Sun, 12 Dec 2021 09:25:01 GMT

I'd like to know how this dashboard displayed the green check-marks? I dug into the html and found out where it was. I then attempted a couple things to try and recreate it, but no luck. I put a url to an image I have stored on a server inside the curly brackets. And I added a fieldname of a table. It looks like they might have images in a table (costImage, scheduleImage, projectImage). Does anyone know how to do that?

<div style="font-size:.9em; font-family: Sans-Serif;font-weight:bold;">Project Health</div>
<div style="display:table;border-collapse: separate;border-spacing: 2px;">
    <div style="display:table-row-group;color:#000000;">
        <div style="display:table-row;font-size:.8em;background-color:#bbbbbb; font-family: Charcoal, Sans-Serif;color: rgba(0,0,0,.9);">
            <div style="display:table-cell;width:20%;text-align:center;vertical-align:middle;line-height:10px;padding:2px;">Cost</div>
            <div style="display:table-cell;width:20%;text-align:center;vertical-align:middle;line-height:10px;padding:2px;">Schedule</div>
            <div style="display:table-cell;width:20%;text-align:center;vertical-align:middle;line-height:10px;padding:2px;">Project</div>
        </div>
        <div style="display:table-row;font-size:.8em">
            <div style="display:table-cell;text-align:center;vertical-align:middle;line-height:10px;padding:2px;"><img height="30" src="{costImage}" width="30" /></div>
            <div style="display:table-cell;text-align:center;vertical-align:middle;line-height:10px;padding:2px;"><img height="30" src="{scheduleImage}" width="30" /></div>
            <div style="display:table-cell;text-align:center;vertical-align:middle;line-height:10px;padding:2px;"><img height="30" src="{projectImage}" width="30" /></div>
        </div>
    </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add Image to Dashboard Details Widget

RickeyFight — Thu, 30 Jan 2020 22:39:22 GMT

Some of that was built in an ArcGIS online map using arcade in the popup.

Look here for the project stage part.

arcade-expressions/project-phase.md at master · Esri/arcade-expressions · GitHub

It should give you a clue on how to add the check marks.

Re: Add Image to Dashboard Details Widget

JaredPilbeam2 — Fri, 31 Jan 2020 15:26:39 GMT

Rickey,

Thanks for the reply. They are using Arcade in this pop-up (Details) widget. But, the Arcade is used in the "Project Stage" section only from what I can see. I had a look at their table inside their webmap and found they had links to each of the three images (costImage, scheduleImage, projectImage). So, I think I'll add some fields and then populate them with urls to my images.

EDIT: So, I added fields to store the url to the images. But, now I'm wondering how that field is populated for each feature, manually or automatically...?

Re: Add Image to Dashboard Details Widget

RickeyFight — Fri, 31 Jan 2020 18:57:05 GMT

Jared Pilbeam‌

They have it linked to a field just like the example I believe. Do you have a link to the webapp you are looking at for reference?

Re: Add Image to Dashboard Details Widget

JaredPilbeam2 — Fri, 31 Jan 2020 21:49:42 GMT

Here's the link to the example webmap and dashboard.

Re: Add Image to Dashboard Details Widget

RickeyFight — Tue, 04 Feb 2020 16:50:56 GMT

Jared Pilbeam‌

I imagine that it is updated manually. In most cases these projects don't have a lot of changes so manually updating the fields should not be too difficult.

But I am sure that you could write a python script to update the fields that runs every night.

I do believe that it could be written in arcade to display the check marks on the fly.