Easily manage browser tab titles for all pages

API & Custom Code Show & Tell
1

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.

4 Likes
2

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.

3

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

4

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

5

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.

6

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
7

Thanks for sharing @Ryannn!

8

@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

1 Like
9

Does anyone know how to get this bit of code to work? I assume you can’t just copy and paste it into the Javasript section, I tried this and it had no effect on the name of the tabs in the browser. Thanks Anthony

10

Hey @AnthonySar57194, you’ll need to update the scene numbers to ones relevant to your app. Start by opening Knack’s builder and going to the page/scene that you want a new title for. The browser URL for that page will look something like https://builder.knack.com/ your_account/your_app/pages/scene_123. The number at the end is what you need. Then update the code so that scene_titles includes the scene number as a key and the title as the value.

const scene_titles = {
    "123": "My page title",
}
11

Hi guys,

I’ve extracted the essential code from the KTL that shows the page title in the browser’s tab. It works across the whole app.

Here’s what it looks like:

$(document).on('knack-scene-render.any', function (event, scene) {
    const pageStr = Knack.scenes._byId[Knack.router.current_scene].attributes.name;
    document.title = Knack.app.attributes.name + ' - ' + pageStr; //Add menu to browser's tab.
})

Enjoy,
Norm

2 Likes
12

Thanks perfect hat works!

1 Like
13

Hi Normand!

Thank you soo much this worked so beautifully!

1 Like
14

Norm,
I know this is not the place for this But…

I like the KTL code you have put together but I have a issue. On a Iphone if you have a numbers field it goes to the number keyboard on the Iphone and their is no decimal. Can this be turned off?

I look threw all you get hub stuff and can not seem to figure it out.

We have a Maintenance program built in knack with Technicians in the field using their phones. But staff in the back that really could benefit from KTL. But Time is money and in are case a decimal point is important.

Again sorry for asking here. I tried Get Hub but it never seemed to get across. I probably did something wrong . Saw you had a recent post here so just going for it.
Thanks

1 Like
15

Hi @James10,

No problem, this can be fixed easily by unchecking this flag in the KTL Configurator.

image
image1920×1674 255 KB

This will revert to default style in numeric fields.

You can also copy this snippet in the Builder if that’s easier for you:

ktl.fields.setCfg({
    convertNumToTel: false,
})

Be sure to add it at the right place! Above the last curly bracket.

See these two videos from Carl Holmes for more details on how to use the KTL Configurator:

Cheers,
Norm

16

Norm

You are a Scholar and a Gentleman

I appreciate you very much and Thanks.

1 Like