topic Re: Conditionally Load Media Element if Field Value is Not False in ArcGIS JavaScript Maps SDK Questions

Conditionally Load Media Element if Field Value is Not False

PatrickMcKinney1 — Sat, 11 Dec 2021 07:40:13 GMT

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}'
                }
            }]
        }
    ]
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Conditionally Load Media Element if Field Value is Not False

AnneFitz — Sat, 11 Dec 2021 07:40:15 GMT

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

Re: Conditionally Load Media Element if Field Value is Not False

PatrickMcKinney1 — Tue, 21 Jul 2020 19:30:57 GMT

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.

Re: Conditionally Load Media Element if Field Value is Not False

AnneFitz — Tue, 21 Jul 2020 19:33:22 GMT

Ok great! Glad it's working now.