Adding multiple images using Arcade in a popup

[Anonymous User]

Hello all, 

I am trying to display the sustainable development goals (SDG's) in a popup based on an input in the feature. I have written the code in Arcade which works if one SDG is mentioned in the feature. However, problem arises if one input has multiple SDG's (i.e. '1, 4, 5'). A function cannot return multiple links for an image. I was curious if there is a workaround for this?

See my code below:

// input of data i.e. '1, 4, 12'
var data_atr = $feature["SDG_s"]
var list = Split(data_atr, ' ')
// deleting space
var result = ''
for (var i in list) {
    if (!IsEmpty(list[i])){   
        if (result == ''){
            result = list[i]
        } else {
            result += list[i]
        }
    }
}
// splitting of numbers
var sdgs = split(result, ',')

var url = ''
var baseurl = 'https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-'
var extension = '.png?resize=200%2C200&ssl=1'

// making of counter
for (i = 1; i <= 17; i++) {
    // iterate over sdgs
    for (var j in sdgs){
        // adding '0' in the link
        if (i < 10) {
            if (number(sdgs[j]) == i) {
            url = baseurl + '0' + i + extension
            console(url)
            return url
           }
        } else if (i > 10) {
            if (number(sdgs[j]) == i) {
            url = baseurl + i + extension
            console(url)
            return url
           }
        }
    }  
}

I have wondered if you could index a expression so you could add the images manually.

Could somebody steer me in the right direction?

[XanderBakker]

Hi @Anonymous User ,

If this was a ArcGIS Pro question, the answer would be simple. You can use Arcade and generate the HTML and return the images as show below:

You were really close, but keep in mind that using a return statement inside a loop will return the first item and exits the loop. 

ArcGIS Online does not allow the return of HTML from an Arcade expression. You will need an expression for each image and return it inside an HTML formatted pop-up and probably need another expression to hide an image when you don't have that number in the list. 

I have done some HTML formatting with conditional images described here: https://community.esri.com/t5/arcgis-online-documents/create-pop-ups-in-arcgis-online-with-conditional-images-using/ta-p/916518 but maybe including all the 17 images and hide them depending on the values supplied would be a better way. You can find an example here: https://community.esri.com/t5/arcgis-online-documents/conditional-field-display-with-arcade-in-pop-ups-revisited/ta-p/920869 

I will do a quick test first to share some more details later on.

[XanderBakker · Accepted solution]

Hi @Anonymous User ,

Just did the test and it will work in ArcGIS Online:

I configured it in the old Map Viewer but it displays better in the new map viewer. 

What you need to do is create 1 Arcade expression for each SDG with the following content:

var txt = Replace($feature["SDGs"], " ", "");
var lst = Split(txt, ",");
if (IndexOf(lst, "#") > -1) {
    return "block";
} else {
    return "none";
}

Change the "#" on line 3 for the SDG number the images applies to (no leading zero). Configure to use a customized HTML pop-up:

Change to HTML mode:

Paste the following HTML:

SDGs {SDGs}<br />
<br />
<img alt="SDG 01" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-01.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr0}" />

<img alt="SDG 02" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-02.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr1}" />

<img alt="SDG 03" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-03.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr2}" />

<img alt="SDG 04" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-04.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr3}" />

<img alt="SDG 05" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-05.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr4}" />

<img alt="SDG 06" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-06.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr5}" />

<img alt="SDG 07" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-07.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr6}" />

<img alt="SDG 08" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-08.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr7}" />

<img alt="SDG 09" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-09.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr8}" />

<img alt="SDG 10" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-10.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr9}" />

<img alt="SDG 11" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-11.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr10}" />

<img alt="SDG 12" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-12.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr11}" />

<img alt="SDG 13" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-13.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr12}" />

<img alt="SDG 14" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-14.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr13}" />

<img alt="SDG 15" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-15.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr14}" />

<img alt="SDG 16" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-16.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr15}" />

<img alt="SDG 17" src="https://i1.wp.com/www.un.org/sustainabledevelopment/wp-content/uploads/2019/08/E-Goal-17.png?resize=100%2C100&amp;ssl=1" style="display:{expression/expr16}" />

[Anonymous User]

Hi @XanderBakker , 

Thank you very much for the idea and code! Very smart to use HTML formatting on the image to show or hide it. I was not sure if it would be possible to use this method because the HTML Mode in Map VIewer is not available yet. I thought it might not be supported yet. So just a back and forth between the old and new version! 😉

[XanderBakker]

Hi @Anonymous User ,

Indeed the HTML configuration of the pop-up is not yet implemented in the Map Viewer and the Classic Map Viewer should be used for this. It will show up correctly in the new Map Viewer.