I cannot figure out how to call the related field using this function to populate the content of the popup. I have tried relationships/0/FieldName everywhere I thought it was necessary with no luck. I think I need to call fieldInfos within the content syntax, Correct? liquefactionPopup = function ( value , key , data ) { var content = "" ; if ( key === "LQSHazardUnit" ) { if ( data . LQSHazardUnit ) { content + = " LQSHazardUnit: " + data . LQSHazardUnit + " " ; } } if ( key === "LQSMappedScale" ) { if ( data . LQSMappedScale ) { content + = " LQSMappedScale: " + data . LQSMappedScale + " " ; } } } return content ; } const liquefaction = new FeatureLayer ( { url : "https://services.arcgis.com/3" , title : "Liquefaction Susceptibility" , visible : false , outFields : [ "*" ] , popupTemplate : { title : "Liquefaction Susceptibility" , content : "{LQSHazardUnit:liquefactionPopup}{LQSMappedScale:liquefactionPopup}" } , } ) ;

Biraja Thanks I have it working now by not passing the related data through the function. I call the function on the unrelated data in the text area of popupTemplate. See below. popupTemplate : { title : " {relationships/0/HazardName} " , content : [ { type : "fields" , fieldInfos : [ { fieldName : "relationships/0/Description" , visible : false , label : "Hazard Description" } , { fieldName : "relationships/0/HazardName" , visible : false , label : "Hazard" } ] } , { type : "text" , text : " Description: {relationships/0/Description} {LQSMappedScale:liquefactionPopup}" } ] }

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; } } }

Related table field in a popupTemplate function?

JayHill

I cannot figure out how to call the related field using this function to populate the content of the popup. I have tried relationships/0/FieldName everywhere I thought it was necessary with no luck. I think I need to call fieldInfos within the content syntax, Correct?

            liquefactionPopup <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="keyword token">var</SPAN> content <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>key <SPAN class="operator token">===</SPAN> <SPAN class="string token">"LQSHazardUnit"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>LQSHazardUnit<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> 
                        content <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<span class='bold' title='Magnitude'><b>LQSHazardUnit: </b></span>"</SPAN> <SPAN class="operator token">+</SPAN> data<SPAN class="punctuation token">.</SPAN>LQSHazardUnit <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br/>"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>key <SPAN class="operator token">===</SPAN> <SPAN class="string token">"LQSMappedScale"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>LQSMappedScale<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> 
                        content <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<span class='bold' title='Longitude'><b>LQSMappedScale: </b></span>"</SPAN> <SPAN class="operator token">+</SPAN> data<SPAN class="punctuation token">.</SPAN>LQSMappedScale <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br/>"</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">return</SPAN> content<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>


            <SPAN class="keyword token">const</SPAN> liquefaction <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgis.com/3"</SPAN><SPAN class="punctuation token">,</SPAN>
                title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Liquefaction Susceptibility"</SPAN><SPAN class="punctuation token">,</SPAN>
                visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</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>
                popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                    title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Liquefaction Susceptibility"</SPAN><SPAN class="punctuation token">,</SPAN>
                    content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{LQSHazardUnit:liquefactionPopup}{LQSMappedScale:liquefactionPopup}"</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="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>

Najděte více příspěvků označených jako

Accepted answers

All comments

BirajaNayak

Hi Jay,

That is what I observed during my testing. That is why I asked to contact Esri Support Services to work on it further or may be an enhancement for this behavior.

Thanks,

Biraja

JayHill

Biraja

Thanks

I have it working now by not passing the related data through the function. I call the function on the unrelated data in the text area of popupTemplate. See below.

                popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                     title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>{relationships/0/HazardName}</b>"</SPAN><SPAN class="punctuation token">,</SPAN>
                     content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                         type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fields"</SPAN><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">"relationships/0/Description"</SPAN><SPAN class="punctuation token">,</SPAN>
                            visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
                            label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Hazard Description"</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">"relationships/0/HazardName"</SPAN><SPAN class="punctuation token">,</SPAN>
                         visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
                         label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Hazard"</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>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text"</SPAN><SPAN class="punctuation token">,</SPAN>
                    text<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>Description: </b>{relationships/0/Description}<br>{LQSMappedScale:liquefactionPopup}"</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>

BirajaNayak

Hi Jay,

I tried to pass content using function ( Tested with my colleague Jose Banuelos) but can not read the values for related tables. You can log a case with Esri Support to look into more.

The below 4x sample using fieldinfos for related tables and attachment:

ArcGIS API for JavaScript Sandbox

Again, if you find issues after using above sample, then you can contact Esri Support Services to diagnose the issue more.

Thanks,

Biraja

JayHill

Robert and Biraja

I've been trying to use both related fields and attachments within my popupTemplate function following some of the syntax in that example. Nothing is working for me. Should I abandoned the popupTemplate function altogether and just use fieldInfos? Or am I missing how to use fieldInfos along with the function? I would really like to keep the function though for it checks for nulls and does some other custom html styling.

BirajaNayak

Hi Jay,

I have not used function for populating content. I can work on it and get back to you. As you have seen in the example both 3.x and 4.x , fieldinfos works for related table fields.

Thanks,

Biraja

RobertScheitlin__GISP

Jay,

Then this is the 4.x sample that shows you how t use relate fields in a popup:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=popup-multipleelements

irtizahussain

I was also looking for this but i think there is no solution available for this in 4.x yet, So i switched to 3.x and i found this.

Have a look ,it might be helpful for you.

JayHill

Biraja

Thanks for the reply! I forgot to mention I'm using 4.10. Also since I am using a function populate the content of the popupTemplate, are fieldInfos necessary?

BirajaNayak

Hi Jay,

Yes, please include fieldinfos in popupTemplate.

You can go through the below sample "Create and use a popup template that references fields from a relationship" which may provide some help:

Thanks,

Biraja

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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