topic Re: Display related records in a popup in a nice table in ArcGIS Online Questions

Display related records in a popup in a nice table

NorthSouthGIS — Tue, 21 Mar 2023 19:22:52 GMT

I have a table of related work history on a point asset layer. For each point representing an asset, there are multiple related records storing the work history. Here is the Arcade expression I used to display in the pop up.

Note: This only works right now when set up as an Arcade Expression content type, rather than an arcade expression referenced in a Text content type.

// Get the related work orders var includedFields = ['Type','completion_date','real_price']; var history = FeatureSetByRelationshipName($feature, 'relationshipName', includedFields); if (count(history) > 0){ // Get the schema of the WorkOrders table var woSchema = Schema(history); // Get the fields from the schema var fields = woSchema.fields; // Define an array to store the table headers var headers = []; // Loop through the fields and add a header to the array for each one for (var i in fields) { var field = fields[i]; if(Includes(includedFields, field.name)) { Push(headers,'<th style="border: 1px solid #ddd;padding: 8px;background-color: #eee;">' + field.alias + '</th>'); } } // Define the HTML table header row var headerRow = '<tr style="border: 1px solid #ddd;padding: 8px;">' + concatenate(headers) + '</tr>'; // Define an array to store the HTML table rows var rows = []; // Loop through each related work order and add an HTML table row to the array for (var i in history) { var wo = i; // Define an array to store the data for the current row var rowData = []; // Loop through the fields and add the value of each field to the rowData array for (var j in fields) { //Skip Object ID Field if(fields[j].alias != 'OBJECTID_1') { Push(rowData, '<td style="border: 1px solid #ddd;padding: 8px;">' + wo[fields[j].name] + '</td>'); } } // Concatenate the rowData array into a string with table data tags var row = '<tr style="border: 1px solid #ddd;padding: 8px;">' + concatenate(rowData) + '</tr>'; // Push the resulting string into the rows array push(rows, row); } // Define the HTML table using the header row and the rows array var table = '<p><h3>Work History</h3></p><div><table style="font-family: arial, sans-serif;border-collapse: collapse;text-align: left;">' + headerRow + concatenate(rows) + '</table></div>'; // Return the HTML table return { type : 'text', text : table //this property supports html tags } //return table; } else { return { type : 'text', text : '<p><h3>Work History</h3></p><p>No related work history</p>' //this property supports html tags } }

Re: Display related records in a popup in a nice table

Teresa_Blader — Fri, 24 Mar 2023 18:25:55 GMT

If I understand, "Text" option in popup is based on a "feature" output type from "Attribute Expressions"; whereas "Arcade" option allows return of "feature sets" which is vital for returning more than 1 result like it sounds like you are doing by creating and displaying a table?

"Chart" option is the same. A chart based on a related table needs multiple values, so its based on the return of a feature set so the "Arcade" option has to be used, with the "chart template", not "Chart".

If you're looking to output a single value from the expression, then it needs to be entered in "Attribute Expressions" and then referenced in "Text" or "Table". If you're looking to output a set of values as a feature set, then it needs to be completely built and designed in "Arcade".

Someone from Esri can correct me if I'm wrong, but that's what I've learned so far.

Re: Display related records in a popup in a nice table

NorthSouthGIS — Fri, 24 Mar 2023 21:15:10 GMT

To be clear, I don't have any issues with my script, just wanted to share for anyone out there in case it is useful. The 'Related Records' content type still requires you expand and drill down into a related record and you don't have much control over the configuration of what is displayed and how. This arcade script allows me to get all related record information, get the info I only care about from the related record table, and then display it in a nicely formatted html table.

Re: Display related records in a popup in a nice table

Teresa_Blader — Fri, 24 Mar 2023 21:17:15 GMT

Ha! I was trying to figure out what your question was... being posted in ArcGIS Online Questions...

Re: Display related records in a popup in a nice table

NorthSouthGIS — Fri, 24 Mar 2023 21:20:48 GMT

I didn't see an option to post any sort of blog post anymore in the Community. I think they updated it recently... Not sure

Re: Display related records in a popup in a nice table

Teresa_Blader — Fri, 24 Mar 2023 21:24:27 GMT

Eh, it kind of makes sense as it is a question others may have! You can post on ArcGIS Online, if you back up one link.

Sorry for trolling your non-question! 😅

Re: Display related records in a popup in a nice table

Marshal — Sat, 29 Apr 2023 01:14:01 GMT

Just wanted to say thank you for posting this. It was extremely helpful for some popups I was trying to create and had hit a wall. This helped me push through and make the solution better than I originally envisioned. Thanks a bunch!!

Re: Display related records in a popup in a nice table

Paco — Mon, 30 Oct 2023 15:24:23 GMT

Hi @NorthSouthGIS . thanks for this Post! do you have a screenshot of your Popup output? I'm hoping your Post will help me get past my Related Records issue. thx!

Re: Display related records in a popup in a nice table

VanessaSimps — Mon, 04 Dec 2023 16:02:50 GMT

was going to ask the same! I can get the express to pass the check and save, but I am still not able to see the data in the pop-up? I must be missing something here!

Re: Display related records in a popup in a nice table

Marshal — Mon, 18 Dec 2023 17:11:58 GMT

It would look something like this. Is the sharing configured appropriately on the related table service? Users without sharing permissions on the related table service won't see the table in the popup.

Re: Display related records in a popup in a nice table

TKSHEP — Tue, 12 Nov 2024 17:49:25 GMT

@NorthSouthGIS How would I bring all the related records with a table that looks like below. Using the 1st row of each record that is related to features using the 1 of # of records to each feature (repeating records) ? I hope I am clear with my question.

Re: Display related records in a popup in a nice table

e_huynh161 — Tue, 14 Jan 2025 20:33:06 GMT

How did you get 2 separate tables?

Re: Display related records in a popup in a nice table

Marshal — Wed, 15 Jan 2025 19:06:40 GMT

Using a loop to build multiple tables as needed and pushing them into a list. Then concatenating all tables from the list for the return statement. Here is my working code, hope it helps!

Again, thanks to @NorthSouthGIS for inspiring the solution that worked for me.

// Establish a connection to the ArcGIS Portal var portal_con = Portal('https://gis.domain.com/portal'); // Retrieve a feature set by Portal item ID and select relevant fields var fs = FeatureSetByPortalItem(portal_con, '9d41bd4a518947a28ac549d48f1a6539', 0, ['LEASE_NUMBER', 'COMPANY_NAME', 'ASGN_PCT', 'ALQT_ID', 'DESCRIPTION', 'AREA_BLOCK']); // Active feature lease number for defining the filter var lease = $feature.Lease; // Define the query string to filter records based on the active lease var lease_filter = 'LEASE_NUMBER = @lease'; // Filter the feature set using the lease filter var records = Filter(fs, lease_filter); // Initialize an empty list to store unique ALQT_IDs and a dictionary for descriptions var alqs = []; // List to hold retrieved ALQT_IDs var descs = {}; // Dictionary to map ALQT_ID to legal descriptions // Loop through the filtered records to populate ALQT_IDs and their descriptions for (var record in records) { // Construct a description based on the record's DESCRIPTION and AREA_BLOCK var desc = ''; if (IsEmpty(record.DESCRIPTION)) { desc = 'All of lease ' + lease + ' within block ' + record.AREA_BLOCK; } else { desc = record.DESCRIPTION + ' of block ' + record.AREA_BLOCK; } // Store the description in the dictionary, keyed by ALQT_ID descs[record.ALQT_ID] = desc; // Add the ALQT_ID to the list Push(alqs, record.ALQT_ID); } // Remove duplicate ALQT_IDs to ensure uniqueness var alqs = Distinct(alqs); // Initialize an empty list to hold the generated HTML tables var tables = []; // Check if there are any ALQT_IDs to process if (!IsEmpty(alqs)) { // Loop through the distinct ALQT_IDs for (var alq in alqs) { var curr_alq = alqs[alq]; // Current ALQT_ID being processed var alq_filter = 'ALQT_ID = @curr_alq'; // Query string for filtering by ALQT_ID var alq_records = Filter(records, alq_filter); // Filter records by the current ALQT_ID // Fields to be included in the output table var data_fields = ['COMPANY_NAME', 'ASGN_PCT']; // Initialize an empty list to store the HTML rows for the current table var rows = []; // Loop through the filtered records for the current ALQT_ID for (var alq_record in alq_records) { var row_data = []; // Initialize a list to hold the data cells for the current row // Loop through the data fields to build each cell for (var field in data_fields) { Push(row_data, '<td style="border: 1px solid #ddd;padding: 8px;">' + alq_record[data_fields[field]] + '</td>'); } // Combine the cells into an HTML row and add it to the rows list var row = '<tr style="border: 1px solid #ddd;padding: 8px;">' + concatenate(row_data) + '</tr>'; Push(rows, row); } // Define the header fields for the table var header_fields = ['Company', 'Interest']; var headers = []; // Initialize a list to hold the header cells // Loop through the header fields and create styled header cells for (var header_field in header_fields) { var field = header_fields[header_field]; Push(headers, '<th style="color:black; border: 1px solid #A9A9A9;padding: 8px;background-color: #eee;">' + field + '</th>'); } // Combine the header cells into an HTML header row var headerRow = '<tr style="border: 1px solid #A9A9A9;padding: 8px;">' + concatenate(headers) + '</tr>'; // Construct the full HTML table, including the description and rows var table = '<h7><b>' + descs[curr_alq] + '</b></h7>' + '<table style="font-family: arial, sans-serif;border-collapse: collapse;text-align: left;">' + headerRow + concatenate(rows) + '</table></div>'; // Add the table to the list of tables Push(tables, table); } // Combine all tables into a single output string, separated by line breaks var output_text = '<h3>Record Title Ownership</h3>' + concatenate(tables, "<br>"); // Return the output text as the result return { type: 'text', text: output_text }; }

Re: Display related records in a popup in a nice table

Marshal — Wed, 15 Jan 2025 19:10:17 GMT

I don't fully understand your question, but you might want to take a look at the code I shared. It iterates over potentially multiple related record "groups" and builds tables for each of the "groups", which is what your screenshot appears to represent.

Re: Display related records in a popup in a nice table

hamini — Fri, 04 Apr 2025 15:59:42 GMT

Thanks so much for posting this. It was very helpful.