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 >

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

Add Image to Dashboard Details Widget

JaredPilbeam2

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?

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN>.9em<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> Sans-Serif<SPAN class="punctuation token">;</SPAN><SPAN class="property token">font-weight</SPAN><SPAN class="punctuation token">:</SPAN>bold<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Project Health<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table<SPAN class="punctuation token">;</SPAN><SPAN class="property token">border-collapse</SPAN><SPAN class="punctuation token">:</SPAN> separate<SPAN class="punctuation token">;</SPAN><SPAN class="property token">border-spacing</SPAN><SPAN class="punctuation token">:</SPAN> 2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-row-group<SPAN class="punctuation token">;</SPAN><SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>#000000<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-row<SPAN class="punctuation token">;</SPAN><SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN>.8em<SPAN class="punctuation token">;</SPAN><SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN>#bbbbbb<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> Charcoal, Sans-Serif<SPAN class="punctuation token">;</SPAN><SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,.9<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-cell<SPAN class="punctuation token">;</SPAN><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>20%<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN>center<SPAN class="punctuation token">;</SPAN><SPAN class="property token">vertical-align</SPAN><SPAN class="punctuation token">:</SPAN>middle<SPAN class="punctuation token">;</SPAN><SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN>10px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Cost<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-cell<SPAN class="punctuation token">;</SPAN><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>20%<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN>center<SPAN class="punctuation token">;</SPAN><SPAN class="property token">vertical-align</SPAN><SPAN class="punctuation token">:</SPAN>middle<SPAN class="punctuation token">;</SPAN><SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN>10px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Schedule<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-cell<SPAN class="punctuation token">;</SPAN><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>20%<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN>center<SPAN class="punctuation token">;</SPAN><SPAN class="property token">vertical-align</SPAN><SPAN class="punctuation token">:</SPAN>middle<SPAN class="punctuation token">;</SPAN><SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN>10px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Project<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-row<SPAN class="punctuation token">;</SPAN><SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN>.8em</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-cell<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN>center<SPAN class="punctuation token">;</SPAN><SPAN class="property token">vertical-align</SPAN><SPAN class="punctuation token">:</SPAN>middle<SPAN class="punctuation token">;</SPAN><SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN>10px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>30<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{costImage}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>30<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-cell<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN>center<SPAN class="punctuation token">;</SPAN><SPAN class="property token">vertical-align</SPAN><SPAN class="punctuation token">:</SPAN>middle<SPAN class="punctuation token">;</SPAN><SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN>10px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>30<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{scheduleImage}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>30<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>table-cell<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN>center<SPAN class="punctuation token">;</SPAN><SPAN class="property token">vertical-align</SPAN><SPAN class="punctuation token">:</SPAN>middle<SPAN class="punctuation token">;</SPAN><SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN>10px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>30<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{projectImage}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>30<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></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>

Find more posts tagged with

Accepted answers

RickeyFight

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.

All comments

RickeyFight

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.

JaredPilbeam2

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...?

RickeyFight

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?

JaredPilbeam2

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

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.