How can I monitor all options in a virtualized Airtable dropdown with Distill?

Help and Support
, ,
1

I need to monitor all options in an Airtable virtualized dropdown. Only the visible options exist in the DOM, and the remaining options render while scrolling. Can you help me create a JavaScript selector that returns the complete unique list of dropdown options on every check?

Website:Airtable

2

@wardaddy427 Could you please share the exact URL of the page you want to monitor, along with a screenshot of the Airtable dropdown you want to track?

That will help us review how the dropdown is rendered and suggest the right selector or monitoring approach.

1 Like
3

Reside Airtable - link to webpage issue.

https://imgur.com/a/9gddynH - screen shot

thanks so much.

4

@wardaddy427 Thanks for sharing the screenshot. This is an advanced monitoring use case. Since Airtable uses a virtualized dropdown, only the currently visible options are present in the DOM, while the remaining options are rendered dynamically as you scroll.
Custom JavaScript solutions like this are typically covered under our paid setup service. However, we’ve received similar requests from several customers, so we’re sharing this solution publicly to help others in the Distill community who may have the same requirement.

Before adding the JavaScript selector, please create a Macro that clicks the “+ Add unit” button to open the dropdown. Then, use the following JavaScript selector:

var oldResult = document.getElementById("distill-airtable-result");
if (oldResult) {
  oldResult.remove();
}
var listings = new Map();
var previousCount = 0;
var unchangedCount = 0;
var attempts = 0;
var maxAttempts = 50;
function normalizeText(text) {
  return text
    .replace(/\u00A0/g, " ")
    .replace(/[\u200B-\u200D\uFEFF]/g, "")
    .replace(/\s+/g, " ")
    .trim();
}
function addListing(text) {
  var cleanedText = normalizeText(text);
  if (cleanedText) {
    listings.set(cleanedText.toLowerCase(), cleanedText);
  }
}
function collect() {
  var el = document.querySelector("[role='region']");
  if (!el) {
    return;
  }
  var options = el.querySelectorAll("[role='option']");
  if (options.length > 0) {
    options.forEach(function(option) {
      addListing(option.innerText);
    });
  } else {
    el.innerText.split("\n").forEach(function(line) {
      addListing(line);
    });
  }
  attempts++;
  if (listings.size === previousCount) {
    unchangedCount++;
  } else {
    previousCount = listings.size;
    unchangedCount = 0;
  }
  var reachedBottom =
    el.scrollTop + el.clientHeight >= el.scrollHeight - 5;
  if (
    (reachedBottom && unchangedCount >= 3) ||
    attempts >= maxAttempts
  ) {
    var div = document.createElement("div");
    div.id = "distill-airtable-result";
    div.innerText = Array.from(listings.values()).join("\n");
    document.body.appendChild(div);
    sendResponse(null, div);
    return;
  }
  el.scrollTop = Math.min(
    el.scrollTop + Math.max(el.clientHeight * 0.8, 100),
    el.scrollHeight
  );
  setTimeout(collect, 250);
}
var el = document.querySelector("[role='region']");
if (el) {
  el.scrollTop = 0;
  setTimeout(collect, 150);
}

This script automatically scrolls through the dropdown, captures each option as it is rendered, removes duplicates, and returns the complete unique list of options for Distill to monitor.

1 Like
5

Thank you so much!!!:blush:

1 Like