Feature Info widget colours don't match Popup when using HTML

LarryMcEvoy70 — Thu, 14 Sep 2023 20:16:41 GMT

I'm using arcade expressions to populate a complex popup lots of HTML involved to create a tall and wide table, hence the fact I am using the feature info widget to display it, I am supposed to be matching corporate colours. when viewed in the popup it works grand I can have a white text on a dark background but when it populates in the feature info widget the colour changes. Screen grab below gives a good idea of what is happening.

If anyone has any suggestions or has encountered this before I would be grateful if they could put me on the right track.

Re: Feature Info widget colours don't match Popup when using HTML

Wei_Ying — Mon, 16 Oct 2023 03:30:50 GMT

Hi @LarryMcEvoy70 ,

Thanks for your feedback. This is because ExB overwrite the theme I think, which is bug here for the cutom HTML styles. Would you be able to share the arcade expression so we can take a further look?

Thanks,
Wei

Re: Feature Info widget colours don't match Popup when using HTML

LarryMcEvoy70 — Mon, 16 Oct 2023 11:01:39 GMT

Hi Wei,

Thanks for the feedback, below is one of the expressions used hope it helps

Larry

/* Open the Suggestions tab and choose a template to get started creating different content types for your pop-up. To learn more about using Arcade to create pop-up content visit: https://developers.arcgis.com/arcade/guide/profiles/#popup-element */ function planninghistory () { Var register=FeatureSetById($map, /* Planning_Register */ "Planning_Register_4480") var history=Intersects($feature,register); var ordered=Orderby(history, 'ref DESC'); var urlbase='<a href="https://planning.agileapplications.ie/southdublin/application-details/?ref=' var list='' for(var I in ordered){ list += `${urlbase}${I.REF}"> ${I.REF} </a>&nbsp` } if (count(list)==0){ return "No Planning History" }else return list } function units () { var x=$feature["FIRST_FIRST_MaxDensity"] var y=$feature["FIRST_FIRST_MinDensity"] var ha =$feature.areaHA var z='' if (x >0){ z= Floor(((x+y)/2*ha)) } else {z='Not a Core Strategy Site'} return z } function enforcementHist () { //Enforcement History 7 Var register =FeatureSetById($map, /* Planning Enforcement */ "Planning_Enforcement_3452") var history=Intersects($feature,register); var list='' for(var I in history){ list += ` ${I.REF},` } if (count(list)>0){ return left(list, count(list)-1);} else { console('Not Sure') return "No Enforcements mapped, note the enforcement mapping is incomplete" } } function housecountinfo () { var resdets=FeatureSetById($map, /* Residential Permissions */ "18330d672f7-layer-22") var resact=Intersects($feature,resdets) var stats = GroupBy(resact, [ { name: "Status", expression: "Status" }, ], [ { name: 'Units', expression: 'units', statistic: 'Sum' } ] ); var list='' if (count(stats)>0){ for (var x in stats){ var decoded=decode (x.status, 1,'Not Commenced ',2,'Under Construction ',3,'Completed ','Expired/Superseeded/Quashed consents ') list += decoded + x.units + ' units' +TextFormatting.NewLine } } else { list = 'No House Count Info' } return list } var list=planninghistory() var projunits=units() var enforce=enforcementHist() var resconst=housecountinfo() var result=` <div style="width: 100%"> <figure class="table"> <table width="100%" cellpadding="0px" cellspacing="3px" > <tbody style="width: 100%"> <tr valign="top"> <td style="background-color: #425a6c; padding: 5px; text-align:left" colspan="6" > <strong style="color:white;"><font color="#FFFBFB">Site Details for Site ${$feature.PARCEL_ID}</font></strong> </td> </tr> <tr valign="top"> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align:left" colspan="1" > <strong >Neighbourhood</strong> </td> <td width="25%" style="background-color: #EFEFEF; padding: 5px; text-align:left" colspan="1" > ${DomainName($feature, "Neighbourhood")} </td> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align:left" colspan="1" > <strong >Site Area</strong> </td> <td width="25%" style="background-color: #EFEFEF; padding: 5px; text-align:left" colspan="1" > ${Round($feature.areaHA,3)} </td> </tr> <tr valign="top"> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align:left" colspan="1" > <strong >Zoning</strong> </td> <td width="25%" style="background-color: #EFEFEF; padding: 5px; text-align:left" colspan="1" > ${$feature.ZONE_ORIG} </td> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align:left" colspan="1" > <strong >Greenfield / Brownfield</strong> </td> <td width="25%" style="background-color: #EFEFEF; padding: 5px; text-align:left" colspan="1" > ${DomainName($feature, "FIRST_classification")} </td> </tr> <tr valign="top"> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align:left" colspan="1" > <strong >Existing Residental Property</strong> </td> <td width="25%" style="background-color: #EFEFEF; padding: 5px; text-align:left" colspan="1" > ${iif ($feature["sum_residential_delivery_points"]>0,'YES','NO') } </td> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align:left" colspan="1" > <strong >Potential Units</strong> </td> <td width="25%" style="background-color: #EFEFEF; padding: 5px; text-align:left" colspan="1" > ${projunits} </td> </tr> <tr valign="top"> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align: left" > <strong>Planning History</strong> </td> <td td width="75%" style="background-color: #EFEFEF; padding: 5px; text-align: left" colspan="5" > ${list} </td> </tr> <tr valign="top"> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align: left" > <strong>Enforcement History</strong> </td> <td td width="75%" style="background-color: #EFEFEF; padding: 5px; text-align: left" colspan="5" > ${enforce} </td> </tr> <tr valign="top"> <td width="25%" style="background-color: #CFD0CE; padding: 5px; text-align: left" > <strong>Residential Construction</strong> </td> <td td width="75%" style="background-color: #EFEFEF; padding: 5px; text-align: left" colspan="5" > ${resconst} </td> </tr> </tbody> </table> </figure> </div>` return { type : 'text', text : result }

Re: Feature Info widget colours don't match Popup when using HTML

Wei_Ying — Tue, 17 Oct 2023 00:13:53 GMT

@LarryMcEvoy70 could you confirm if you are choose "Respect the source" option in FeatureInfo setting?

Re: Feature Info widget colours don't match Popup when using HTML

LarryMcEvoy70 — Tue, 17 Oct 2023 09:00:58 GMT

Hi Wei,

I have read about this setting but I don't appear to have this setting, I assume it should be in the style tab or the content tab neither appears to have it.

topic Feature Info widget colours don't match Popup when using HTML in ArcGIS Experience Builder Questions

Feature Info widget colours don't match Popup when using HTML

Re: Feature Info widget colours don't match Popup when using HTML

Re: Feature Info widget colours don't match Popup when using HTML

Re: Feature Info widget colours don't match Popup when using HTML

Re: Feature Info widget colours don't match Popup when using HTML