Help

The Community will be temporarily unavailable starting on Friday February 28. We’ll be back as soon as we can! To learn more, check out our Announcements blog post.

Set Page Title to Current View Name

2913 2
cancel
Showing results for 
Search instead for 
Did you mean: 

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

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
      });
  });
}
Lu
6 - Interface Innovator
6 - Interface Innovator

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