Javascript: Add VIEW_ID to all your views in Developer mode

API & Customization Show & Tell
1

Hi to all,

My gift of the day.

I spend too much time finding what is the view ID's of those I have on my screen, either by going to the builder or the Inspect element in my browser.

So I coded this little utility that adds the label either to the title or the control. Now, I'm able to see it in bright bold and red directly in the app.

But I only want to see this when I'm in "developer" mode, i.e. usually for me and no one else. So I add the new Developer role in my app and apply it to my account.

Then add this code to the Javascript pane and that's it!

Enjoy,
Norm

ctrnd.com

![](upload://tqIdFjqwqOkHr19aShFG3ktMDdd.jpeg)

/////////////////////////////////////////////////////////////////////////////////////////
const SHOW_VIEW_ID = true;

// This must match your App.
var g_accountRoles = {
    'Administrator': 'object_12',
    'Supervisor': 'object_3',
    'Employee': 'object_4',
    'Safety Personnel': 'object_8',
    'Executive': 'object_13',
    'Human Resources': 'object_14',
    'Apprentice': 'object_15',
    'Accounting': 'object_29',
    'SuperAdmin': 'object_32',
    'Developer': 'object_35',
}

/////////////////////////////////////////////////////////////////////////////
$(document).on('knack-view-render.any', function (event, view, data) {
    if (SHOW_VIEW_ID && Knack.getUserRoles().includes(g_accountRoles['Developer'])) {
        var label = document.createElement('label');
        label.setAttribute('id', view.key + '-label-id');
        label.appendChild(document.createTextNode('    (' + view.key + ')'));
        label.setAttribute('style', 'margin-left: 10px; margin-top: 5px; color: red; font-weight: bold;');

        if ($('#' + view.key + ' .view-header').length > 0) {
            $('#' + view.key + ' .view-header').css({ 'display': 'inline-flex' }).append(label);
        } else if ($('#' + view.key + ' .control').length > 0) {
            $('#' + view.key + ' .control').css({ 'display': 'inline-flex' }).append(label);
        } else {
            label.setAttribute('style', 'margin-top: 5px; color: red; font-weight: bold;');
            $('#' + view.key).prepend(label);
        }
    }
})
2

Thats really cool this should be retrofitted to the javascript console that Brad did then it would require no setup and always work within your app view.

3

I know, I saw that and it's actually what triggered the idea of doing this code!

Now haven't tried the extension yet, but sure will.

Cheers, and thanks for notifying,

Norm

4

Check this out

https://support.knack.com/hc/en-us/community/posts/360057746872-Display-View-and-Field-numbers-in-the-Builder