Query widget popup with arcade expression issue

MartinOwens1 — Fri, 07 Aug 2020 16:02:33 GMT

I have configured a popup in my webmap with a series of arcade expressions. When I click a feature from in my application the popup displays the values as they should. The issue I'm having is when I click a result feature from the Query widget the values are not the same and the field formatting is different. Arcade rounding issues not there, thousand separators gone, arcade averages returning incorrectly. Has anyone experienced any of these issues. I'm running js api 3.30 and WAB 2.16

Re: Query widget popup with arcade expression issue

MartinOwens1 — Thu, 13 Aug 2020 20:27:37 GMT

Here is the result from ESRI if anyone else has this issue:

"On our call, we were able to demonstate the Query widget not honoring custom arcade expressions in the feature pop-ups. We found an exising defect that addresses this issue. I have attached the following defect to this case.

BUG-000120210: The Query widget in the Web AppBuilder for ArcGIS application does not honor Arcade expressions configured in the pop-up setting for a web map feature layer even when the option to use the web map layer pop-up configuration is checked for the Query widget.

Our Software Developers review bugs to determine further action to address these types of issues in future releases of the software. Currently, the public status of the defect is "In Product Plan" For the most up-to-date information on this request, you may track it by referencing BUG-000120210."

Re: Query widget popup with arcade expression issue

DaveOrlando — Thu, 24 Sep 2020 17:06:23 GMT

I have also experienced this...., but aside from that.... WOW, that is one impressive pop-up!

Care to share your html or some tips on how that is all working?

Re: Query widget popup with arcade expression issue

MartinOwens1 — Sun, 12 Dec 2021 07:39:50 GMT

Sure. I'm not sure how much will translate since most of this has custom arcade expressions that are used to display the information, but I'll attach it. As far as the Query widget not honering the arcade I have developed a work around by sending the information to the Search widget. For whatever reason the Search widget honors the arcade and displays the correct values. As far as tips and tricks: I think utilizing the html display and visibility values with arcade is pretty awesome. The other neat one is displaying a gauge and having the gauge value reflected through an arcade expression. Hopefully that helps.

<table style="width: 100%;">
	       
	       <tbody>
		   <tr><td style="text-align: left;line-height: 23px;" valign="top"><font style="font-size: 19px;"><span style="font-weight: bold;">{expression/expr2}</span><br /><span style="font-weight: bold; font-size:19px;">{expression/expr4} {STATE} {ZIPCODE}</span></font> </td> 
		   
		   <td style="text-align: right;" valign="top">
		   
		    <span style="font-weight: bold;">
				<font size="5">Tentative value:</font>
				</span> 
				<font size="5">$<span>{APRTOT}</span>
				</font>
				<br />
			<span style="font-weight: bold;">
			<font size="4">Prior value:</font>
			</span> <font size="4">$
			<span>{expression/expr71}</span>
			</font>
			<br />

			<span style="display:{expression/expr60}">

			<font size="3">Last Sold: </font><font size="3"><span>$</span>{SALEPRCE}<br /></font>
			<font size="3">Sale Date: </font><font size="3">{SALEDATE}<br /></font>
			</span>
			
			<span style="display:{expression/expr15}">
			
			<img src="https://gis.co.greene.oh.us/GIMS/images/sold2.png" style="width:16px;margin-right: 8px;margin-top: 5px;margin-bottom: 0px;" />
			<font size="3" style="font-weight: bold;">Sold: </font><font size="3"><span>$</span>{SALEPRCE}<br /></font>
			<font size="3" style="font-weight: bold;">Sale Date: </font><font size="3">{SALEDATE}<br /></font>
			</span>
			
			<span style="font-size: initial;padding-top: 12px;margin-top: 10px;line-height: 25px;">View this property on <a href="https://www.zillow.com/homes/{LHN}-{ST_NAME}-{ST_TYPE}-{USPS_CITY}-{STATE}-{ZIPCODE}_rb" rel="nofollow ugc" target="_blank">Zillow</a>
			</span>
		   </td> </tr>
           </tbody>
    </table>
	
	<span style="font-weight: bold;line-height: 30px;display:{expression/expr70};"><font style="font-size: 19px;line-height: 26px;">{RMBED} beds - {FIXBATH}/{FIXHALF} baths - {SQ_FT} sq ft</font></span><br /><font size="3">{expression/expr2} is {expression/expr7} located in {expression/expr9}.{expression/expr8}The Auditor's appraised value for this property is ${APRTOT}.<br /> </font><br /><span style="font-weight: bold;line-height: 25px;"><font size="4">Facts and Features </font></span><hr /><br />
<table style="width: 100%;">
<tbody>
<tr style="height: 20px;">
<td style="width: 5%; height: 10px;"><br /></td>
<th rowspan="2" style="width: 5%; height: 10px;text-align: right;"><img alt="" src="https://gis.co.greene.oh.us/Reappraisal/images/home.png" style="width:35px;margin-right: 5px;" /></th>
<td style="width: 15%; height: 10px;"><span style="font-size: medium;"><span style="font-weight: bold;">Type</span></span></td>
<td style="width: 5%; height: 10px;"><br /></td>
<th rowspan="2" style="width: 5%; height: 10px;text-align: right;"><img alt="" src="https://gis.co.greene.oh.us/Reappraisal/images/Calendar.png" style="width:35px;margin-right: 5px;" /></th>
<td style="width: 15%; height: 10px;"><span style="font-size: medium;"><span style="font-weight: bold;">Year Built</span></span></td>
<td style="width: 5%; height: 10px;"><br /></td>
<th rowspan="2" style="width: 5%; height: 10px;text-align: right;"><img alt="" src="https://gis.co.greene.oh.us/Reappraisal/images/basement.svg" style="width:35px;margin-right: 5px;" /></th>
<td style="width: 15%; height: 10px;"><span style="font-size: medium;"><span style="font-weight: bold;">Basement</span></span></td>
<td style="width: 5%; height: 10px;"><br /></td>
</tr>

<tr style="height:  15px;">
<td style="width: 5%; height: 10px;"><br /></td>
<td style="width: 15%; height: 23px;font-size: 14px;">{expression/expr6}</td>
<td style="width: 5%; height: 10px;"><br /></td>
<td>{YRBLT}</td>
<td style="width: 5%; height: 10px;"><br /></td>
<td style="width: 15%; height: 23px;font-size: 14px;">{expression/expr12}</td>
<td style="width: 5%; height: 10px;"><br /></td>

</tr>
<tr style="height:  15px;">
<td style="width: 5%; height: 4.86667px;"><br /></td>
<td style="width: 5%; height: 4.86667px;"><br /></td>
<td style="width: 15%; height: 4.86667px;"><br /></td>
<td style="width: 5%; height: 4.86667px;"><br /></td>
<td style="width: 5%; height: 4.86667px;"><br /></td>
<td style="width: 15%; height: 4.86667px;"><br /></td>
<td style="width: 5%; height: 4.86667px;"><br /></td>
<td style="width: 5%; height: 4.86667px;"><br /></td>
<td style="width: 15%; height: 4.86667px;"><br /></td>
<td style="width: 5%; height: 4.86667px;"><br /></td>
</tr>

<tr style="height: 15px;">
<td style="width: 5%; height: 23px;"><br /></td>
<th rowspan="2" style="width: 5%; height: 23px;text-align: right;"><img alt="" src="https://gis.co.greene.oh.us/Reappraisal/images/heating.png" style="width:35px;margin-right: 5px;" /></th>
<td style="width: 15%; height: 23px;"><span style="font-size: medium;"><span style="font-weight: bold;">Heating/Cooling</span></span></td>
<td style="width: 5%; height: 23px;"><br /></td>
<th rowspan="2" style="width: 5%; height: 23px;text-align: right;"><img alt="" src="https://gis.co.greene.oh.us/Reappraisal/images/land.png" style="width:35px;margin-right: 5px;" /></th>
<td style="width: 5%; height: 23px;"><span style="font-size: medium;"><span style="font-weight: bold;">Lot</span></span></td>
<td style="width: 5%; height: 23px;"><br /></td>
<th rowspan="2" style="width: 5%; height: 23px;text-align: right;"><img alt="" src="https://gis.co.greene.oh.us/Reappraisal/images/fire.svg" style="width:35px;margin-right: 5px;" /></th>
<td style="width: 15%; height: 23px;"><span style="font-size: medium;"><span style="font-weight: bold;">Fireplaces</span></span></td>
<td style="width: 5%; height: 23px;"><br /></td>
</tr>

<tr style="height: 15px;">
<td style="width: 5%; height: 23px;"><br /></td>
<td style="width: 15%; height: 23px;font-size: 14px;">{expression/expr11}</td>
<td style="width: 5%; height: 23px;"><br /></td>
<td style="width: 15%; height: 23px;font-size: 14px;">{expression/expr1}</td>
<td style="width: 5%; height: 23px;"><br /></td>
<td style="width: 15%; height: 23px;font-size: 14px;">{expression/expr13}</td>
<td style="width: 5%; height: 23px;"><br /></td>

</tr>
</tbody>
</table>
<div>
<br /></div>
<div style="text-align: left;">
<font size="4" style="text-align: left;width: 100%;"><span style="font-weight: bold;text-align: left;width: 100%;">Valuation Factors</span></font>
  </div>
<hr />

<div style="width:100%;display: {expression/expr69};"><font size="3">

<span style="color: #ae0808;cursor: text;">This is listed as {expression/expr7}. To view more information please visit the </span>

<a href="https://apps.co.greene.oh.us/auditor/ureca/data.aspx?parcelid={PARID}&amp;taxyear=2019&amp;taxformyear=2019&amp;search=ParcelID&amp;searchp={PARID}" rel="nofollow ugc" style="cursor: pointer;" target="_blank">URECA Property Search.</a></font>
<br />
</div>
<div style="width:100%;display: {expression/expr68};">
<div style="width: 200px;margin: 10px auto; float: left; margin-left: 12%; ">
<div style="position: relative;height: 100px;margin-bottom: 10px;background-color: #d2d0d0;border-radius: 150px 150px 0 0;overflow: hidden;text-align: center;">
<div style="position: absolute;top: 100px;left: -200%;width: 400%;height: 400%;margin-left: 100px;background-color: #31505b;transform: rotate({expression/expr19}deg);transform-origin: top center;"></div>
<div style="position: absolute;top: 20px;right: 20px;left: 20px;height: 80px;background-color: #fff;border-radius: 150px 150px 0 0;"></div>
<span style="position: absolute;top: 42%;left: 0;width: 100%;font-size: 38px;font-weight: 700;">{expression/expr14}</span>
<span style="bottom: -2px;text-align: center;position: absolute;left: 0;width: 100%;;padding-bottom: 2px;">
<a href="https://gis.co.greene.oh.us/Reappraisal/conditionscore.html" rel="nofollow ugc" style="cursor: help;" target="_blank">Condition Score</a></span></div>
<span style="float: left;">0</span>
<span style="float: right;">10</span>
</div>

<div style="width: 200px;margin: 10px auto; float: right; margin-right: 14%;">
<div style="position: relative;height: 100px;margin-bottom: 10px;background-color: #d2d0d0;border-radius: 150px 150px 0 0;overflow: hidden;text-align: center;">
<div style="position: absolute;top: 100px;left: -200%;width: 400%;height: 400%;margin-left: 100px;background-color: #a2482b;transform: rotate({expression/expr37}deg);transform-origin: top center;"></div>
<div style="position: absolute;top: 20px;right: 20px;left: 20px;height: 80px;background-color: #fff;border-radius: 150px 150px 0 0;"></div>
<span style="position: absolute;top: 42%;left: 0;width: 100%;font-size: 38px;font-weight: 700;">{expression/expr36}</span>
<span style="bottom: -2px;text-align: center;position: absolute;left: 0;width: 100%;;padding-bottom: 2px;">Appraisal vs Average</span></div>
<span style="float: left;">0</span>
<span style="float: right;">100</span>
</div>

<div style="margin: 10px auto;float: right;line-height: 2;width: 100%;">
<table style="width: 100%;">
 <tbody><tr style="text-align: center;">
    <th colspan="2" style="text-align: left;font-size: large;font-weight: bold;width: 50%;">Condition Rating:</th>
     <th colspan="2" style="text-align: left;font-size: large;font-weight: bold;">Neighborhood Sales:</th>
  </tr>
  <tr>
  
    
	<th rowspan="3" style="display:{expression/expr63};visibility:{expression/expr66};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnUpArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr63};visibility:{expression/expr63};" /></th>
	<th rowspan="3" style="display:{expression/expr64};visibility:{expression/expr65}"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnDnArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr64};visibility:{expression/expr65};" /></th>
    
	
	
  <td style="font-size: 14px;">The condition score for this</td>
   
       <th rowspan="3" style="display:{expression/expr29};visibility:{expression/expr31};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnDnArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr29};visibility:{expression/expr31};" /></th>
	
	<th rowspan="3" style="display:{expression/expr30};visibility:{expression/expr35};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnUpArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr30};visibility:{expression/expr35};" /></th>
   <td style="font-size: 14px;">${APRTOT} Auditor's Appraised Value</td> 
  </tr>
  <tr>
    <td style="font-size: 14px;">property is considered to be<br /></td>
    <td style="font-size: 14px;">${expression/expr24} Average Sale Price</td>
  </tr>
  <tr>
    <td style="font-weight: bold;font-size: 14px;vertical-align: top;">{expression/expr62}</td>
    <td style="font-weight: bold;font-size: 14px;">${expression/expr25}{expression/expr26}</td>
  </tr>
  <tr style="line-height: 10px;height: 15px;">
    <th colspan="2" style="text-align: center;font-size: large;font-weight: bold;"><br /></th>
    <th colspan="2" style="text-align: center;font-size: large;font-weight: bold;"><br /></th>
  </tr>
<tr> 
	<th colspan="2" style="text-align: left;font-size: large;font-weight: bold;">Above Grade Living Area:</th>
    <th colspan="2" style="text-align: left;font-size: large;font-weight: bold;">Basement Information:</th>
  </tr>
  <tr>
  
    <th rowspan="3" style="display:{expression/expr27};visibility:{expression/expr33};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnUpArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr27};visibility:{expression/expr33};" /></th>
	
	<th rowspan="3" style="display:{expression/expr28};visibility:{expression/expr34};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnDnArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr28};visibility:{expression/expr34};" /></th>
    <td style="font-size: 14px;">{SQ_FT} Sq. Ft.</td>

	 
	 <th rowspan="3" style="display:{expression/expr46}; visibility:{expression/expr45};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnUpArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr46};visibility:{expression/expr45};" /></th>
	 
	<th rowspan="3" style="display:{expression/expr48};visibility:{expression/expr47};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnDnArrow.png" style="float: right;padding-right: 10px;width: 70px;display:{expression/expr48};visibility:{expression/expr47};" /></th>
	  
	  
	  
    <td style="font-size: 14px;">{expression/expr44} Sq. Ft. Finished Area</td>
  </tr>
  <tr>
    <td style="font-size: 14px;">{expression/expr20} Average Sq. Ft.</td>
     <td style="font-size: 14px;">{expression/expr39} Sq. Ft. Average Finished Area</td>
  </tr>
  <tr>
    <td style="font-weight: bold;font-size: 14px;">{expression/expr21}</td>
     <td style="font-weight: bold;font-size: 14px;">{expression/expr42}</td>
  </tr>
</tbody></table>
</div>
</div>
<div><br /></div>


<div style="display: inline-block;width: 100%;">
<font size="4" style="text-align: left;width: 100%;"><span style="font-weight: bold;text-align: left;width: 100%;">District Sales Trend</span></font><hr />
<font size="5">
  </font></div>
  <font size="5">
 </font>
 
 
 
 <div style="width: 46%;margin: 10px auto;float: left;line-height: 22px;">
 <font size="5" style="font-size: large;font-weight: bold;">{expression/expr3}<br /></font>
<span><font style="font-size: medium;">Since the last reappraisal {expression/expr3} has seen a {expression/expr49}<br /></font></span>

<br />
</div>



 <div style="width: 47%;margin: 10px auto; float: right; margin-left: 10px;max-height: 110px;"><font size="5" style="font-size: large;"> 
</font><span><font size="3">
<span style="display:{expression/expr51};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnUpArrow.png" style="width: 60px;height: 60px;" />
<font size="60px" style="font-size: 60px;font-weight: bold;vertical-align: bottom;color: #31505b;">{expression/expr50}</font> <br />
</span>
<span style="display:{expression/expr52};"><img src="https://gis.co.greene.oh.us/GIMS/images/GrnDnArrow.png" style="width: 60px;height: 60px;" />
<font size="60px" style="font-size: 60px;font-weight: bold;vertical-align: bottom;color: #31505b;">{expression/expr50}</font> <br />
</span>

<br /></font></span><font size="3">
</font></div>

<br />

<div style="width: 100%;margin: 10px auto;float: right;"><font size="3">

<div style=""><span style="text-align: center;width: 100%;align-content: center;position: absolute;margin-bottom: 15px;">
<font size="3" style="text-align: center;width: 100%;align-content: center;">
<font style="text-align: center;width: 100%;align-content: center;font-size: large;font-weight: bold;">Average Sale Price For {expression/expr3}<br /></font><font size="2">(2014-2019)<br /></font></font></span></div>

<div><img alt="" src="https://gis.co.greene.oh.us/Reappraisal/charts/{DISTRICT}.svg" style="width: -moz-available;margin-top: 33px;" /></div>
</font></div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Query widget popup with arcade expression issue

DaveOrlando — Mon, 28 Sep 2020 16:12:20 GMT

Thanks Martin, this is great and will definitely get the creative juices flowing!

Re: Query widget popup with arcade expression issue

AnjulPandey — Wed, 07 Feb 2024 12:00:42 GMT

BUG-000120210 Although this bug marked as fixed, problem still persists in ArcGIS Enterprise 10.8.1 WebApp Builder.

Query widget does not honor Arcade expressions configured in the pop-up setting for a web map feature layer even when the option to use the web map layer pop-up configuration is checked for the Query widget

Re: Query widget popup with arcade expression issue

BrettLessner_Nsight — Thu, 30 May 2024 18:33:59 GMT

Did you ever hear more about the fix? I'm running into this issue too.

I'm wondering if they meant version 11.3...

topic Re: Query widget popup with arcade expression issue in ArcGIS Web AppBuilder Questions

Query widget popup with arcade expression issue

Re: Query widget popup with arcade expression issue

Re: Query widget popup with arcade expression issue

Re: Query widget popup with arcade expression issue

Re: Query widget popup with arcade expression issue

Re: Query widget popup with arcade expression issue

Re: Query widget popup with arcade expression issue