Select to view content in your preferred language

Display related records in a popup in a nice table

3766
14
03-21-2023 12:22 PM
Labels (3)
NorthSouthGIS
Frequent Contributor

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 
  }
}
14 Replies
e_huynh161
New Contributor

How did you get 2 separate tables?

0 Kudos
Marshal
Frequent Contributor

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

 

0 Kudos
TKSHEP
by
Frequent Contributor

@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.

TKSHEP_0-1731433572871.pngTKSHEP_1-1731433714975.pngTKSHEP_2-1731433740819.png

 

 

0 Kudos
Marshal
Frequent Contributor

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.

0 Kudos
hamini
by
New Contributor

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

0 Kudos