Popup content w/ Relationship Query

MKF62

I'm going to ask a pretty much straight JS question because stackexchange can't wrap their minds around the fact that there are javascript platforms that they've never seen before (arcigs javascript api basically).... so, sorry this is going to be a bit out of place but hopefully someone here will understand what I'm saying better.

I am trying to populate a InfoTemplate object with content using related table records of a polygon layer. I run the relationship query sucessfully, and then I need to loop through the records and put them in an HTML table format so I can display it in the popup. The problem I'm having is that I'm not sure how to write the code so the asynchronous relationship query finishes before the popup content gets rendered. The anonymous callback function won't finish before the return statement is hit in the function, thus my popup renders the table headers but nothing else. I'm sure I could just shift around the code using a feature layer on click event and do it that way, but I feel that I'm so close to having it done this way that maybe there's a simpler fix.

I've fiddled around with JS Promises and moving the anonymous callback function to it's own named function, but just can't seem to figure out how to make those work together.

<SPAN class="comment token">//Call the function that will format the popup content</SPAN>
mgmtTractPopupBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>mgmtPopupContent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">mgmtPopupContent</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="comment token">//set up the query properties</SPAN>
    <SPAN class="comment token">//....</SPAN>
    <SPAN class="comment token">//Create table header that will go inside popup</SPAN>
    <SPAN class="keyword token">var</SPAN> content <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<table id="mgmtPopupTable1"><tr><th>Veg Mgmt Practice</th><th>Herbicide</th><th>Month</th><th>Year</th>\
            <th>Implemented By</th><th>Funded By</th><th>Farm Bill Code</th></tr>'</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="comment token">//Run the query - asynchronous process</SPAN>
    queryableMgmtTractFL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryRelatedFeatures</SPAN><SPAN class="punctuation token">(</SPAN>relatedQuery<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>relatedRecords<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> fset <SPAN class="operator token">=</SPAN> relatedRecords<SPAN class="punctuation token">[</SPAN>OID<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
        fset<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> vegPractice <SPAN class="operator token">=</SPAN> <SPAN class="token function">vegPName</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>VegMgmtPractice<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> herbicide <SPAN class="operator token">=</SPAN> <SPAN class="token function">herbName</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Herbicide<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> monthTreated <SPAN class="operator token">=</SPAN> <SPAN class="token function">monthName</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>MonthTreated<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> yearTreated <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>YearTreated<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> impBy <SPAN class="operator token">=</SPAN> <SPAN class="token function">impName</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>ImplementedBy<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> fundBy <SPAN class="operator token">=</SPAN> <SPAN class="token function">fundName</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>FundedBy<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> fbc <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>FarmBillCode<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>fundBy <SPAN class="operator token">==</SPAN> <SPAN class="string token">"CRP"</SPAN> <SPAN class="operator token">||</SPAN> fundBy <SPAN class="operator token">==</SPAN> <SPAN class="string token">"CRP - CREP"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                fbc <SPAN class="operator token">=</SPAN> <SPAN class="token function">crpName</SPAN><SPAN class="punctuation token">(</SPAN>fbc<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>fundBy <SPAN class="operator token">==</SPAN> <SPAN class="string token">"EQIP"</SPAN> <SPAN class="operator token">||</SPAN> fundBy <SPAN class="operator token">==</SPAN> <SPAN class="string token">"EQIP - RCPP"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                fbc <SPAN class="operator token">=</SPAN> <SPAN class="token function">eqipName</SPAN><SPAN class="punctuation token">(</SPAN>fbc<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                fbc <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Not applicable"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            row <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<tr><td>'</SPAN> <SPAN class="operator token">+</SPAN> vegPractice <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td><td>'</SPAN> <SPAN class="operator token">+</SPAN> herbicide <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td><td>'</SPAN> <SPAN class="operator token">+</SPAN> monthTreated <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td><td>'</SPAN> <SPAN class="operator token">+</SPAN> yearTreated <SPAN class="operator token">+</SPAN>
                <SPAN class="string token">'</td><td>'</SPAN> <SPAN class="operator token">+</SPAN> impBy <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td><td>'</SPAN> <SPAN class="operator token">+</SPAN> fundBy <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td><td>'</SPAN> <SPAN class="operator token">+</SPAN> fbc <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td></tr>'</SPAN><SPAN class="punctuation token">;</SPAN>
            content <SPAN class="operator token">=</SPAN> content <SPAN class="operator token">+</SPAN> row<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        content <SPAN class="operator token">=</SPAN> content <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</table>'</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="comment token">//Returns table header with none of the derived rows </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>

MKF62

Figured it out... dumb SQL mistake, using the javascript operator of "or" instead of the SQL operator of "or" in my definition expression. Final code that's FINALLY working. With the records that come out of the initial query task (on hbMgmtTableFL), I should be able to set the popup with those values for each polygon that is visible on the map. I'll have to format the popup on click of a feature with another ".queryRelatedFeatures(...)" call.

<SPAN class="comment token">//After adding the layers to the map get the initial definition expression of the tract feature layer</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"layers-add-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="token function">getDefinitionExpression</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="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">getDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> recordIDs <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    recordIDs<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"1=1"</SPAN><SPAN class="punctuation token">;</SPAN>
    hbMgmtTableFL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryIds</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>OIDs<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">//Create relationship query</SPAN>
        <SPAN class="keyword token">var</SPAN> relatedRecordsQuery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">RelationshipQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        relatedRecordsQuery<SPAN class="punctuation token">.</SPAN>objectIds <SPAN class="operator token">=</SPAN> OIDs<SPAN class="punctuation token">;</SPAN>
        relatedRecordsQuery<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"MgmtTractID"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
        relatedRecordsQuery<SPAN class="punctuation token">.</SPAN>relationshipId <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        hbMgmtTableFL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryRelatedFeatures</SPAN><SPAN class="punctuation token">(</SPAN>relatedRecordsQuery<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>fset<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">//Get all MgmtTractIDs for the current year</SPAN>
            <SPAN class="keyword token">var</SPAN> MgmtTractIDsArr <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> OIDs<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> OID <SPAN class="operator token">=</SPAN> OIDs<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">var</SPAN> feature <SPAN class="operator token">=</SPAN> fset<SPAN class="punctuation token">[</SPAN>OID<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">var</SPAN> mgmtTractId <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>MgmtTractID<SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN><SPAN class="punctuation token">(</SPAN>MgmtTractIDsArr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">includes</SPAN><SPAN class="punctuation token">(</SPAN>mgmtTractId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    MgmtTractIDsArr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>mgmtTractId<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="comment token">//Create the definition expression</SPAN>
            <SPAN class="keyword token">var</SPAN> whereClause<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> MgmtTractIDsArr<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    whereClause <SPAN class="operator token">=</SPAN> <SPAN class="string token">"MgmtTractID = '"</SPAN> <SPAN class="operator token">+</SPAN> MgmtTractIDsArr<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"'"</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                    whereClause <SPAN class="operator token">=</SPAN> whereClause <SPAN class="operator token">+</SPAN> <SPAN class="string token">" OR MgmtTractID = '"</SPAN> <SPAN class="operator token">+</SPAN> MgmtTractIDsArr<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"'"</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            <SPAN class="comment token">//Set the polygon feature layer's definition expression based on the GUIDs</SPAN>
            hbMgmtTractFL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN>whereClause<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            hbMgmtTractFL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">refresh</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="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="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>