Community

Query widget popup with arcade expression issue

1993
5
08-07-2020 09:02 AM
MartinOwens1
by
Occasional Contributor II
‎08-07-2020 09:02 AM

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

Preview file
265 KB
Preview file
398 KB
5 Replies
MartinOwens1
by
Occasional Contributor II
‎08-13-2020 01:27 PM

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."

AnjulPandey
by
New Contributor III
‎02-07-2024 04:00 AM

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

AnjulPandey_0-1707307065242.png

 

0 Kudos
DaveOrlando
by
Occasional Contributor III
‎09-24-2020 10:06 AM

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?

0 Kudos
MartinOwens1
by
Occasional Contributor II
‎09-28-2020 06:15 AM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
DaveOrlando
by
Occasional Contributor III
‎09-28-2020 09:12 AM

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

0 Kudos