Conditionally Load Media Element if Field Value is Not False

[PatrickMcKinney1]

I'm working on converting a map app from Leaflet.js to the Esri JS API (4.x).  I have a field that contains the URL to an image.  However, not every record has an image.

I was planning on using the code below to add the image to the pop-up.  However, I was wondering if there is a way to control the pop-up logic so that the image only appears if the value in the field is not false (technically null)?

Thanks for the help.

const popupTemplate = {
    title: 'Survey Location: <strong>{expression/display-location}</strong>',
    expressionInfos: [
        {
            name: 'display-location',
            title: 'Location',
            expression: "DefaultValue($feature.Loc_ID ,'Not Defined')"
        },{
            name: 'round-latitude',
            title: 'Latitude',
            expression: "Round($feature.LAT, 3)"
        },
        {
            name: 'round-longitude',
            title: 'Longitude',
            expression: "Round($feature.LONG, 3)"
        }, {
            name: 'format-area',
            title: 'Area Surveyed (sq. ft.)',
            expression: "Text($feature.Area, '#,###')"
        }
    ],
    content: [
        {
            type: 'fields',
            fieldInfos: [
                {
                    fieldName: 'expression/round-latitude'
                },
                {
                    fieldName: 'expression/round-longitude'
                },{
                    fieldName: 'expression/format-area'                    
                }
            ]
        },
        {
            type: 'media',
            mediaInfos: [{
                title: 'Survey Location: {expression/display-location}',
                type: 'image',
                value: {
                    sourceURL: '{IMG}'
                }
            }]
        }
    ]
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AnneFitz]

Hi Patrick,

You could try using a function to set the content of the PopupTemplate. Here's a sample where we do this: PopupTemplate - use functions to set content | ArcGIS API for JavaScript 4.16 

In your case, instead of returning a div like the sample does, you would want to return an array of FieldsContent and MediaContent. It would look something like this:

const popupTemplate = {
    title: 'Survey Location: <strong>{expression/display-location}</strong>',
    expressionInfos: [ ... ],
    content: setContent
};

function setContent(feature){
   const fieldsContent = new FieldsContent({
     fieldInfos: [
       {
          fieldName: 'expression/round-latitude'
       },
       {
          fieldName: 'expression/round-longitude'
       },
       {
          fieldName: 'expression/format-area'                    
       }
     ]
   }); 
   if (feature.graphic.attributes.IMG != false){
     const mediaContent = new MediaContent({
         mediaInfos: [{
                title: 'Survey Location: {expression/display-location}',
                type: 'image',
                value: {
                    sourceURL: feature.graphic.attributes.IMG
                }
            }]
      });
     return [fieldsContent, mediaContent];
   }
   return [fieldsContent];
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I haven't tested this out completely so it might need some tweaking, but the idea should work. Also, make sure to include "MediaContent" and "FieldsContent" in your require statement! Hope this helps!

Best,
Anne

[PatrickMcKinney1]

I think this may have been taken care in the 4.15 or 4.16 release. I just went back to this project, updated to version 4.16, and without changing anything else, the popup doesn't show anything if the image value is null.

[AnneFitz]

Ok great! Glad it's working now.