Skip to main content

I tend to have a number of Airtable views open, each with a different focus. However, the default Airtable only says (Table Name) - Airtable.


I’ve written a Greasemonkey/Tampermonkey script that will change the title to (Current View Name) / (Table Name) - Airtable


Note: you will need either the Greasemonkey/Tampermonkey plugin/extension to use this script. Also, since this is an unofficial script, it may (likely) break with a future update to Airtable.


// @name         Airtable View Name as Title

// @namespace    https://airtable.com/

// @version      0.1

// @description  Sets the title of Airtable pages to the View name

// @author       AndyLin

// @match        *://*.airtable.com/tbl*

// Airtable already loads jQuery

// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js

// @grant        none



// ==/UserScript==

//var $ = window.jQuery; //Airtable already loads jQuery

waitForKeyElements ("#table div.ml1.big.stronger", setTitle);

function setTitle (viewNameNode) {

    var thePageTitle = viewNameNode.text();

    document.title = thePageTitle + " / " + document.title;

}

This one doesn’t work in older browsers, but is a lot faster, and updates when you change views.


// @name         Airtable View Name as Title

// @namespace    https://airtable.com/

// @version      0.3

// @description  Sets the title of Airtable pages to the View name

// @author       AndyLin

// @match        *://*.airtable.com/tbl*

// @grant        none



// ==/UserScript==



var titleCaps = document.title.match(/(^:]+: (.+) - Airtable/)/1].replace(/(^A-Z]/g,'');



waitForName ();



function waitForName () {

    elementReady( '#table div.ml1.big.stronger' ).then( foundElement => setTitle(foundElement) );

}



function setTitle (jsNode){

    var theViewName = jsNode.textContent;

    document.title = "A|" + titleCaps + " " + theViewName;

    //Monitor for AJAX page change

    elementMonitor();

}



function elementMonitor() {

    new MutationObserver((mutationRecords, observer) => waitForName() )

        .observe(document.getElementById("table"), {

        attributes: true

    });

}



// Source: jwilson8767/es6-element-ready.js – Wait for an element to exist. ES6, Promise, MutationObserver

// https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e.js

function elementReady(selector) {

  return new Promise((resolve, reject) => {

    let el = document.querySelector(selector);

    if (el) {resolve(el);}

    new MutationObserver((mutationRecords, observer) => {

      // Query for elements matching the specified selector

      Array.from(document.querySelectorAll(selector)).forEach((element) => {

        resolve(element);

        //Once we have resolved we don't need the observer anymore.

        observer.disconnect();

      });

    })

      .observe(document.documentElement, {

        childList: true,

        subtree: true

      });

  });

}

Page titles are still a bit lacklustre in general.

  • When viewing automations, the title is just "Base Name - Airtable"
  • The order of segments can make browser tab titles useless, i.e. "Base Name: Table Name - Airtable" will result in multiple adjacent tabs appearing as "Base Nam… | Base Nam… | Base Nam…", depending on lengths of names and number of tabs open.
  • View names are still absent as @Andy_Lin1 points out.
  • Current context often has no effect on the title, e.g. using the field manager, testing an automation, editing a step, expanding a record for editing are all things that could add useful segments to the page title.

Having "View name - Table name - Base name - Airtable", and "Automation name - Base name - Airtable" as a minimum would be a considerable improvement.

Reply


Terms & Conditions