I'm not sure if i'm overlooking things or this is not yet supported, but i'm curious if the default JavaScript API (v4) popup supports related records. I have the following situation: * Hosted feature service on ArcGIS Online. In it three sublayers (trees, roads and vegetation). Each of the sublayers has a related table in which i store quality-inspection records (quality level, date of inspection and attachment-option). The relation is 1-m. * Hosted feature service is added to a webmap which is also stored on AGO. * In my custom front-end i created a mapView which loads the entire webmap at once (rather than adding all layer individually) * Map draws perfectly and the popup works, but does not show the related records. Related records are however visible and editable in collector, explorer and via webappbuilder (see screenshot). Example in default JSAPI popup: Example in Webappbuilder: What i'm looking for is the option to add the functionality regarding the related records in the second screenshot to the situation in the first screenshot. My question is twofold: * Is this supported by default and if yes, how do i turn it on? * If this is not a default option, how would one go about and custom create this functionality?

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

Does the default JavaScript API (v4) popup support related records?

GFlonk

I'm not sure if i'm overlooking things or this is not yet supported, but i'm curious if the default JavaScript API (v4) popup supports related records.

I have the following situation:

Hosted feature service on ArcGIS Online. In it three sublayers (trees, roads and vegetation). Each of the sublayers has a related table in which i store quality-inspection records (quality level, date of inspection and attachment-option). The relation is 1-m.
Hosted feature service is added to a webmap which is also stored on AGO.
In my custom front-end i created a mapView which loads the entire webmap at once (rather than adding all layer individually)
Map draws perfectly and the popup works, but does not show the related records. Related records are however visible and editable in collector, explorer and via webappbuilder (see screenshot).

Example in default JSAPI popup:

Example of record in default JSapi popup (v4)

Example in Webappbuilder:

Example of record in webappbuilder

What i'm looking for is the option to add the functionality regarding the related records in the second screenshot to the situation in the first screenshot.

My question is twofold:

Is this supported by default and if yes, how do i turn it on?
If this is not a default option, how would one go about and custom create this functionality?

Find more posts tagged with

Accepted answers

All comments

JimBarry

It's on our plan for 2020. Might not be the next release, but something being worked on.

JimBarry

Sorry for the delay on this. Checking with the dev team to see what they say.

AnninaHirschiWyss

Thanks, Robert, I just took his name because he figures as responsible for this space. Maybe he can transfer the question to someone in charge 🙂

RobertScheitlin__GISP

Annina,

Just FYI Jim is not on the development team.

AnninaHirschiWyss

Is there a road map / timeline when editing related records will be possible with the JS API v4?

Thx

Jim Barry‌ or anyone else from the dev-team?

RobertScheitlin__GISP

I like to use dojo dom-construct for building html elements and then domConstruct.place to add them. You can use dojo query to get the infoWindow dim node to append to.

GFlonk

Robert,

That worked like a charm! Thank you. I expanded a little bit on it and am now getting the related records as a response after selectedFeature changes:

The code I used (might not be pretty, but it works):

watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"selectedFeature"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>selectedFeature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> url <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>selectedFeature<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>url<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> layerId <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>selectedFeature<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>layerId<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> fullURL <SPAN class="operator token">=</SPAN> url <SPAN class="operator token">+</SPAN> <SPAN class="string token">"/"</SPAN> <SPAN class="operator token">+</SPAN> layerId<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> objectID <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>selectedFeature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>OBJECTID<SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> queryTask <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url<SPAN class="punctuation token">:</SPAN> fullURL
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relationQuery <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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objectIds<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>objectID<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relationshipId<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;queryTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">executeRelationshipQuery</SPAN><SPAN class="punctuation token">(</SPAN>relationQuery<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

Now what I've got to do is append this to the content property of the popup.

I'll keep this thread updated.

RobertScheitlin__GISP

There is not need to have the watch occur inside a view click event. Just add this after you create your view:

watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"selectedFeature"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>selectedFeature<SPAN class="punctuation token">.</SPAN>attributes<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>

GFlonk

This still gives strange results. Sometimes, when clicking one feature, I get a burst of console logs (some of which are null, often one more than the previous burst). Also view.popup.attributes still doesnt work. Feels indeed like a timing thing, as all the logs happen before the popup draws.

GFlonk

Vanilla might have been the wrong term there. The complexity of the sourcefile you linked is way beyond my understanding

The selectedFeature property looks like the thing I need. I was able to implement it partly. I'm now getting an object returned as the selectedFeature after an on-click action.

Two things:

- To get the current selected feature I would need some kind of event listener. view.on("click", function(event) doesn't seem like the right one.

- Trying to access the OBJECTID via view.popup.selectedFeature.attributes.OBJCTID gives me an error (also via data.getAttributes("OBJECTID")). How would one access this object?

RobertScheitlin__GISP

WAB is a Highly customized app built on top of JS API (so not vanilla at all). You can borrow code from WAB if you want the file you are looking for is the jimu/RelatedRecordsPopupProjector.js

You can use the popup widgets selectedFeature property and then get the OID from the returned value.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#selectedFeature

GFlonk

Thanks for the response!

Too bad this functionality isn't default (this seems to be the case in the vanilla options within for example webappbuilder).

- - Some context:

I have played around with speaking to the queryRelated REST endpoint directly via hitTest, getting all related records and appending them to a custom popup (with html markup). With this there were two issues:

- Buggy peformance when hitting multiple features

- Identity manager didnt seem to cover the authentication when getting the attachmentURL(of the related record) and displaying it

-- End of context

With the suggested idea of using QueryTask. In order to perform a QueryTask one would need an OBJECTID for the current selected feature (correct me if i'm wrong). Is there any other way to do this other than using hitTest?

RobertScheitlin__GISP

Q1. No this is not supported by default.

Q2. You will need to use QueryTask executeRelationshipQuery

https://developers.arcgis.com/javascript/latest/api-reference/esri-tasks-QueryTask.html#executeRelationshipQuery

Once you get the featureSet results from the Query you will loop through the results and generate html markup to append to the popup widgets content properly. This is not going to be a simple one of two lines of code type customization.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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