How to Get the Raw Row ID of a Reference Column in Custom Widget?

Ask for Help
1

I’m creating a custom widget.
I have a table ICP with a reference column Industry that points to another table Industry. The Industry column is configured to display the human-readable Industry_Name instead of the raw rowID. However, I need to access the raw rowID of the related Industry record in my custom widget.

Here’s the schema for reference:

@grist.UserTable
class ICP:
  ICP_name = grist.Text()
  Industry = grist.Reference('Industry')  # Configured to show Industry_Name for readability
  description = grist.Text()

@grist.UserTable
class Industry:
  Industry_Name = grist.Text()
  Industry_Description = grist.Text()

In my custom widget, I’m using grist.onRecord to access the record data. However, the Industry field in the record object returns the human-readable Industry_Name instead of the raw rowID. Here’s my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>onRecord</title>
  <script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
</head>
<body>
  <div id="readout">Waiting for data...</div>
  <div>
    <strong>Row ID:</strong>
    <span id="rowID">Loading...</span>
  </div>
  <div>
    <strong>ICP Name:</strong>
    <span id="icpName">Loading...</span>
  </div>
  <div>
    <strong>Industry:</strong>
    <span id="industry">Loading...</span>
  </div>
  <div>
    <strong>Industry Row ID:</strong>
    <span id="industryRowID">Loading...</span>
  </div>

  <script>
    grist.ready();
    grist.onRecord(function(record) {
      console.log("Record Data:", JSON.stringify(record, null, 2));
      document.getElementById('readout').innerHTML = "Data loaded successfully!";
      if (record) {
        document.getElementById('rowID').innerText = record.id || 'N/A';
        document.getElementById('icpName').innerText = record.ICP_name || 'N/A';
        document.getElementById('industry').innerText = record.Industry || 'N/A';
        document.getElementById('industryRowID').innerText = record.Industry || 'N/A';
      }
    });
  </script>
</body>
</html>

Current Output:

Data loaded successfully!
Row ID: 1
ICP Name: Video Pro Vince
Industry: Media & Entertainment
Industry Row ID: Media & Entertainment

Expected Output:

Data loaded successfully!
Row ID: 1
ICP Name: Video Pro Vince
Industry: Media & Entertainment
Industry Row ID: 2  // Raw rowID of the related Industry record

How can I access the raw rowID of the related Industry record instead of the human-readable Industry_Name? Any help would be greatly appreciated!

2

I found a solution. using grist.docApi.fetchTable()

            // Fetch Industry table and find the matching index
            const industryTable = await grist.docApi.fetchTable('Industry');
            const industryIndex = industryTable.Industry_Name.findIndex(
              name => name === industryName
            );