ArcGIS Javascript 4.12 removed the support of the custom function for each field. Previously I was able to update the set something like below to update the format of POP2013. var popupTemplate = new PopupTemplate ( { title : "Population in {NAME}" , content : "As of 2010, the population in this area was {POP2010:NumberFormat} ." + "As of 2013, the population here was {POP2013:NumberFormat} ." + "Percent change is {POP2013:populationChange}" } ) ; populationChange = function ( value , key , data ) { // calculate the population percent change from 2010 to 2013. } In the new version, however, the code need to be updated to: let popupTemplate = { // autocasts as new PopupTemplate() title : "Population in {NAME}" , content : populationChange , fieldInfos : [ { fieldName : "POP2010" , format : { digitSeparator : true , places : 0 } } , { fieldName : "POP10_SQMI" , format : { digitSeparator : true , places : 2 } } , { fieldName : "POP2013" , format : { digitSeparator : true , places : 0 } } , { fieldName : "POP13_SQMI" , format : { digitSeparator : true , places : 2 } } ] } ; function populationChange ( feature ) { // calculate the population percent change from 2010 to 2013. let diff = feature . graphic . attributes . POP2013 - feature . graphic . attributes . POP2010 ; let pctChange = ( diff * 100 ) / feature . graphic . attributes . POP2010 ; let arrow = diff > 0 ? upArrow : downArrow ; // add green arrow if the percent change is positive. // red arrow for negative percent change. return ( "As of 2010 , the total population in this area was { POP2010 } and the density was { POP10_SQMI } sq mi . As of 2013 , the total population was { POP2013 } and the density was { POP13_SQMI } sq mi . br / > br / > " + " Percent change is " + arrow + " span style = 'color : " + (pctChange red " : " green" ) + ";'>" + pctChange . toFixed ( 3 ) + "% " ) ; } ; But if there are two of more features selected, feature attributes except the first feature became "Undefined". You can see no values and NaN error when you go to the next feature from popup. Please see the below screenshots. a) first feature b) second feature All codes and screenshots are from: https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-function/index.html Please fix this and also let me know if there is any work-around. Thanks.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PopupTemplate with Function Bug in 4.12

SangHyouk_Oum

ArcGIS Javascript 4.12 removed the support of the custom function for each field. Previously I was able to update the set something like below to update the format of POP2013.

<SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PopupTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
  title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Population in {NAME}"</SPAN><SPAN class="punctuation token">,</SPAN>
  content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"As of 2010, the population in this area was <b>{POP2010:NumberFormat}</b>."</SPAN> <SPAN class="operator token">+</SPAN>
           <SPAN class="string token">"As of 2013, the population here was <b>{POP2013:NumberFormat}</b>."</SPAN> <SPAN class="operator token">+</SPAN>
           <SPAN class="string token">"Percent change is {POP2013:populationChange}"</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

populationChange <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">,</SPAN> key<SPAN class="punctuation token">,</SPAN> data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="comment token">// calculate the population percent change from 2010 to 2013.</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

In the new version, however, the code need to be updated to:

<SPAN class="keyword token">let</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
  title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Population in {NAME}"</SPAN><SPAN class="punctuation token">,</SPAN>
  content<SPAN class="punctuation token">:</SPAN> populationChange<SPAN class="punctuation token">,</SPAN>
  fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
    fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP2010"</SPAN><SPAN class="punctuation token">,</SPAN>
    format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
      digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
      places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
      fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP10_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN>
      format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
        digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
        places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
      fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP2013"</SPAN><SPAN class="punctuation token">,</SPAN>
      format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
        digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
        places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
      fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP13_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN>
      format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
        digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
        places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> populationChange <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="comment token">// calculate the population percent change from 2010 to 2013.</SPAN>
  <SPAN class="keyword token">let</SPAN> diff <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2013 <SPAN class="operator token">-</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">let</SPAN> pctChange <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>diff <SPAN class="operator token">*</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">let</SPAN> arrow <SPAN class="operator token">=</SPAN> diff <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">?</SPAN> upArrow <SPAN class="punctuation token">:</SPAN> downArrow<SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">// add green arrow if the percent change is positive.</SPAN>
  <SPAN class="comment token">// red arrow for negative percent change.</SPAN>
  <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">(</SPAN>
    "As <SPAN class="keyword token">of</SPAN> <SPAN class="number token">2010</SPAN><SPAN class="punctuation token">,</SPAN> the total population <SPAN class="keyword token">in</SPAN> <SPAN class="keyword token">this</SPAN> area was <SPAN class="punctuation token">{</SPAN>POP2010<SPAN class="punctuation token">}</SPAN> and the density was <SPAN class="punctuation token">{</SPAN>POP10_SQMI<SPAN class="punctuation token">}</SPAN> sq mi<SPAN class="punctuation token">.</SPAN>
    As <SPAN class="keyword token">of</SPAN> <SPAN class="number token">2013</SPAN><SPAN class="punctuation token">,</SPAN> the total population was <SPAN class="punctuation token">{</SPAN>POP2013<SPAN class="punctuation token">}</SPAN> and the density was <SPAN class="punctuation token">{</SPAN>POP13_SQMI<SPAN class="punctuation token">}</SPAN> sq mi<SPAN class="punctuation token">.</SPAN>
    <SPAN class="operator token"><</SPAN>br <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN><SPAN class="string token">" + "</SPAN>Percent change is <SPAN class="string token">" + arrow + "</SPAN><SPAN class="operator token"><</SPAN>span style<SPAN class="operator token">=</SPAN>'color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">" + (pctChange < 0 ? "</SPAN>red<SPAN class="string token">" : "</SPAN>green"<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
    <SPAN class="string token">";'>"</SPAN> <SPAN class="operator token">+</SPAN> pctChange<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%</span>"</SPAN>
  <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

But if there are two of more features selected, feature attributes except the first feature became "Undefined". You can see no values and NaN error when you go to the next feature from popup. Please see the below screenshots.

a) first feature

b) second feature

All codes and screenshots are from: https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-function/index.html

Please fix this and also let me know if there is any work-around.

Thanks.

Encuentra más publicaciones etiquetadas con

Accepted answers

khutchins

In order for this to work at the latest release you'll have to specify the outFields for the popup template. The sample is being updated to reflect this but for now here's the relevant code:

  <SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
            title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Population in {NAME}"</SPAN><SPAN class="punctuation token">,</SPAN>
            outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            content<SPAN class="punctuation token">:</SPAN> populationChange<SPAN class="punctuation token">,</SPAN>
            fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

SangHyouk_Oum

Thank you both for quick response. Adding outFields: ["*"] resolved the issue.

HeatherGonzago

Sorry about this, when I updated the sample, I forgot to add `outFields: ["*"]` to the popupTemplate. We fixed it so our next doc update should reflect this. In the meantime, please update the snippet you have above to this

let popupTemplate = {
// autocasts as new PopupTemplate()
title: "Population in {NAME}",
content: populationChange,
outFields: ["*"],
fieldInfos: [{
...

That should take care of it.

khutchins

In order for this to work at the latest release you'll have to specify the outFields for the popup template. The sample is being updated to reflect this but for now here's the relevant code:

  <SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
            title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Population in {NAME}"</SPAN><SPAN class="punctuation token">,</SPAN>
            outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            content<SPAN class="punctuation token">:</SPAN> populationChange<SPAN class="punctuation token">,</SPAN>
            fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.