Hide Field in Pop-up

[aprhyde11]

I have data with video link attachments. Some have up to five links associated with them.

I'm trying to configure the pop-ups so that, if there is only one video, only one video player will show up.

I've added the following expression via arcade:

and this is my HTML code. I'm looking at lines 20 and below for the video formatting

<p>
    <strong>Begin Width (feet): </strong>{BEG_WIDTH} &nbsp;<strong>End Width (feet): </strong>{END_WIDTH}&nbsp;
</p>
<p>
    <strong>Length (feet): </strong>{FEET}&nbsp;
</p>
<p>
    <strong>PCI: </strong>{PCI} &nbsp;<strong>Condition: </strong>{CONDITION}&nbsp;
</p>
<p>
    <strong>Treatment:</strong> {TREATMENT} &nbsp;<strong>Cost: </strong>{TOTALCOST}&nbsp;
</p>
<p>
    <strong>Asphalt Type:</strong> {TYPE}&nbsp;
</p>
<p>
    <strong>Inspection Date:</strong> {INSPECT_DA}&nbsp;
</p>
<p>
<span style="display:{expression/expr0}">
    <strong>Video: </strong><video controls="" width="100%">
                            <source src="{VID_LINK_1}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video> &nbsp;<video controls="" width="100%">
                            <source src="{VID_LINK_2}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video> &nbsp;<video controls="" width="100%">
                            <source src="{VID_LINK_3}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video> &nbsp;<video controls="" width="100%">
                            <source src="{VID_LINK_4}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video> &nbsp;<video controls="" width="100%">
                            <source src="{VID_LINK_5}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video> &nbsp;&nbsp;
</span>
</p>

This code still shows all five video players even if the attribute is blank. I want it to only show one if there is only one video.

I've tried a few different iterations of the code but nothing seems to work. I've tried it in AGOL and ArcPro.

Any help is appreciated! Thanks!

[KenBuja]

You can use the Arcade element to create this. Your Arcade script would look something like this

var output =`<b>Begin Width (feet):</b> ${$feature.BEG_WIDTH} <b>End Width (feet):</b> ${$feature.END_WIDTH} <br/>
<b>Length (feet):</b> ${$feature.FEET}<br/>
//etc...
<video controls="" width="100%">
  <source src="${$feature.VID_LINK_1}" type="video/mp4">
  Your browser does not support the video tag.
</video>`;
`;

//add this if function for each other video link

if (!IsEmpty($feature.VID_LINK_2)) {
  output += `<br/><b>Video:</b> 
<video controls="" width="100%">
  <source src="${$feature.VID_LINK_2}" type="video/mp4">
  Your browser does not support the video tag.
</video>`;
}
return { 
  type : 'text', 
  text : output
}

[aprhyde11]

I keep getting an "Unexpected Token" error on line 13 at the > of the <br/>. I've tried taking the break out and the Video: line out but then I get an error on line 14 at controls

Any ideas?

[KenBuja · Accepted solution]

I had an error in the code. Remove line 8.

var output =`<b>Begin Width (feet):</b> ${$feature.BEG_WIDTH} <b>End Width (feet):</b> ${$feature.END_WIDTH} <br/>
<b>Length (feet):</b> ${$feature.FEET}<br/>
//etc...
<video controls="" width="100%">
  <source src="${$feature.VID_LINK_1}" type="video/mp4">
  Your browser does not support the video tag.
</video>`;
`; // remove this line

[aprhyde11]

Thank you so much!!