Community
Select to view content in your preferred language

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

1757
4
09-14-2023 01:16 PM
LarryMcEvoy70
by
Occasional Contributor
‎09-14-2023 01:16 PM

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. 

LarryMcEvoy70_0-1694722260058.pngLarryMcEvoy70_0-1694722260058.png

 

0 Kudos
4 Replies
Wei_Ying
by Esri Regular Contributor
Esri Regular Contributor
‎10-15-2023 08:30 PM

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

0 Kudos
LarryMcEvoy70
by
Occasional Contributor
‎10-16-2023 04:01 AM

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
}

 

0 Kudos
Wei_Ying
by Esri Regular Contributor
Esri Regular Contributor
‎10-16-2023 05:13 PM

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

WeiYing1_0-1697501610635.pngWeiYing1_0-1697501610635.png

 

0 Kudos
LarryMcEvoy70
by
Occasional Contributor
‎10-17-2023 02:00 AM

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.

LarryMcEvoy70_0-1697533165369.pngLarryMcEvoy70_0-1697533165369.png

LarryMcEvoy70_1-1697533245819.pngLarryMcEvoy70_1-1697533245819.png

 

 

0 Kudos