Easily manage browser tab titles for all pages

I’ve created a new way to set the title of your browser tab depending on the current scene. The nice thing is it keeps all of the code together, rather than spread out in the various scene-render events throughout your code. And since events can have multiple handlers you don’t need to worry about this overwriting any existing scene-render code you have elsewhere.

In the code below scene_titles uses scene number for the key, and tab title for the value. And you can have dynamic text by making the value a function.

const scene_titles = {
    "50": "Some Page",
    "55": "Another Page",
    "60": function() {
        let record_name = Knack.models["view_123"]["attributes"]["field_456"];
        return "View Record - " + record_name;
    },
};

for (const [scene_num, tab_title] of Object.entries(scene_titles)) {
    $(document).on("knack-scene-render.scene_" + scene_num, function(event, scene) {
        if (typeof tab_title == "function") {
            document.title = tab_title();
        }
        else {
            document.title = tab_title;
        }
    });
}

I imagine some folks prefer having each scene-render begin with assigning document.title as a way to track which scene it is. But I have quite a few scenes in my app and many don’t need custom code besides the tab title.

2 Likes

I agree—I’ve started writing my handlers dynamically (as shown) whenever possible and it definitely feels cleaner than seeing scene-render a bunch of times.

Hi guys,

That’s something I added to the KTL about 2 years ago. To bad nobody noticed :frowning:

Here’s the piece of code that does it:

            if (prevScene !== scene.key) {
                var menu = ktl.core.getMenuInfo().menu;
                (ktl.core.getCfg().enabled.showMenuInTitle && menu) && (document.title = Knack.app.attributes.name + ' - ' + menu); //Add menu to browser's tab.
...
                prevScene = scene.key;
            }

Go see the full code and documentation here - free and open source!
Knack Toolkit Library - on GitHub

Cheers,
Normand

Hi Normand,

Thanks for sharing. Sometimes loading a library is overkill when a snippet will do, but in any case, it definitely looks cool, and great that you made it open-source.

Cheers

Hi Normand

I agree with KnackPros.

I’d suggest you serve us tasty morsels, like this, 1 spoonful at a time. It’s easier for us non-coders to digest/comprehend.

FWIW Normand I took a look at your library and think it could be useful for a large company/application. I really like the idea of grabbing local files to make development much faster. It always feels weird copying+pasting a few hundred/thousand lines of code into Knack.

1 Like

Thanks for sharing @Ryannn!

@Dean2 You’re absolutely right, and I know that this is the reason why no one seems to be interested in the KTL. It’s like killing a mosquito with a light saber!

But I’ve just completed a major simplification process: it’s now only 5 lines of Javascript code to copy, and no more CSS. All the complexity is hidden, yet visible to those who want to see the code. The minified code is currently at 125KB with an average load time around 200ms, which is quite negligible imo.

When I compare the minified/formatted Javascript code from Knack vs KTL, they have 137090 lines of code vs 4300 lines for the KTL - a drop in the bucket. They also use several libraries, like jQuery, FullCalendar, Highcharts, Sortable, Backbone, Moment, Bootstrap, Underscore, Lodash, Vue and more. So KTL would be just a small one among several others.

Usually, people are only interested in one or two features of the KTL, but once it’s installed and they see all what they get, I’m sure they will enjoy them. It not, it’s possible to turn off whatever you don’t like.

Cheers,
Norm