Useful Dev Console Commands? I'll go first: ADD LOTS OF OPTIONS TO SELECT COLUMN!

Tips&Tricks
,
1

Any useful dev console commands? I found one and it’s made me wonder what other useful stuff could be done through that.

Here’s mine (credit goes to chat gpt - although it was trial and error for us):

I had a lot of options to add to a selection column and figured out a way to use the browser dev console to add tons of options for me:

  1. Open the dev console (console tab)
  2. Open the column menu and basically get it cued up as if you were going to add an option
  3. In the dev console, paste the command below (all you need to update is the options to add)
  4. Tweak the delay if you want it to go slower (line: const delay = 500; // ← adjust if needed)

I used this to add over 300 options, and it worked perfectly. Finished adding all the options in just a few minutes.

// :memo: Replace this array with the list of options you want to add
const optionsToAdd = [
“Option 1”,
“Option 2”,
“Option 3”,
// …
];

// :stopwatch: Adjust delay if needed (ms between each input)
const delay = 500;

let index = 0;

const interval = setInterval(() => {
const allInputs = document.querySelectorAll(‘.select-options__item input’);
const input = allInputs[allInputs.length - 1]; // always targets last input (newest empty one)

if (!input) {
console.warn(“:x: Input field not found. Make sure the Options section is open.”);
clearInterval(interval);
return;
}

// :dart: Enter the current option
const tag = optionsToAdd[index];
input.focus();
input.value = tag;

// Trigger input + “Enter” to confirm
input.dispatchEvent(new Event(‘input’, { bubbles: true }));
input.dispatchEvent(new KeyboardEvent(‘keydown’, { key: ‘Enter’, bubbles: true }));

console.log(➕ Added: ${tag});
index++;

// :magic_wand: Click “Add an option” to prepare next row (button always visible)
const addBtn = document.querySelector(‘.button-text__label’);
if (addBtn) addBtn.click();

// :white_check_mark: Done
if (index >= optionsToAdd.length) {
console.log(“:white_check_mark: All options added!”);
clearInterval(interval);
}
}, delay);

2

Great idea and approach :muscle:

Just an addition:
Would be helpful to add which baserow version you were testing this with as it is very likely that this might stop working in the future due to updates and changes in the DOM layout of baserow.

And it would be helpful if you could write the script in the “source code tag” so there are no copy and paste issues.

Just select the whole script and click the </> symbol in the menu bar of the editor to get a result like this:

// Testscript
console.log("test");
3

Like this (see below)? The editors I use didn’t have any of those symbols so I’m not 100% sure.

I’m just using baserow.io, not self-hosted.

 ```javascript const tags = [ "Option 1", "Option 2", "Option 3"]; let currentTag = 0; const interval = setInterval(() => { const allInputs = document.querySelectorAll('.select-options__item input'); const input = allInputs[allInputs.length - 1]; // last input (newest blank one) if (!input) { console.warn("❌ No input found."); clearInterval(interval); return; } const tag = tags[currentTag]; input.focus(); input.value = tag; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); console.log(`➕ Added tag: ${tag}`); currentTag++; // Simulate clicking "Add an option" for next round const addBtn = document.querySelector('.button-text__label'); if (addBtn) addBtn.click(); if (currentTag >= tags.length) { console.log("✅ Done adding tags."); clearInterval(interval); } }, 500); ```
4

Almost :wink:

Just the line breaks are gone now but it’s already way better than before :slight_smile:

I think the full version should look like this (please double check for errors):

// 📝 Replace this array with the list of options you want to add
const optionsToAdd = [
"Option 1",
"Option 2",
"Option 3",
// …
];

// ⏱️ Adjust delay if needed (ms between each input)
const delay = 500;

let index = 0;

const interval = setInterval(() => {
const allInputs = document.querySelectorAll('.select-options__item input');
const input = allInputs[allInputs.length - 1]; // always targets last input (newest empty one)

if (!input) {
console.warn("❌ Input field not found. Make sure the Options section is open.");
clearInterval(interval);
return;
}

// 🎯 Enter the current option
const tag = optionsToAdd[index];
input.focus();
input.value = tag;

// Trigger input + "Enter" to confirm
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));

console.log("➕ Added: ${tag}");
index++;

// 🪄 Click "Add an option" to prepare next row (button always visible)
const addBtn = document.querySelector('.button-text__label');
if (addBtn) addBtn.click();

// ✅ Done
if (index >= optionsToAdd.length) {
console.log(":white_check_mark: All options added!");
clearInterval(interval);
}
}, delay);