Builder Tools [V2]

This has been super handy when doing any Javascript and CSS work - quick access to the view and field numbers, and now filtering of objects and fields all inside the builder.

It'll result in an object view like below with search boxes and object ids, and the page view adds viewids.


This works along with a Chrome extension and some code.  It might work with other extensions to inject Javascript but I have not tested beyond this scenario.  And it works in both Google Chrome and Microsoft Edge (chromium version) browsers.

See what it does here:

1. Install "Custom Javascript for Websites 2" extension - Make sure the correct Jquery version is selected (see below).

Get it from

2. Add this following code into the CJS extension panel

// Free to use under any licence.
// Any improvements and additions are to be shared with the Knack community

//View List
customjsReady('#view-list', function(element) {

//Add view IDs
$('#view-list li.view').each(function() {
var view_id = $(this).attr('id');
if ($(this).find('.view_id').length !== 0) {
} else {
$(this).find('.name').after('<div class="view_id" style="text-align:right; font-size:smaller; padding:18px 80px 0 0;">' + view_id + '</div>');


// Field list
customjsReady('#field-list', function(element) {

//Add file IDs
$("#field-list li").each(function() {
var field_id = $(this).attr('id');
$(this).find('.name').after('<div class="field_id" style="text-align:right; font-size:smaller; padding:18px 80px 0 0;">' + field_id + '</div>');

// Add field_name search
var html = '<li><input type="search" value placeholder="search fields" title="ESC to clear search" class="field-filter" \
style="width:150px; height:25px; margin-top:-5px"></li>'
var hidden_count = 0;
var field_count = $("#field-list li").length;
$('#field-list').append('<div><div id="hidden-count-badge">Filtering...</div><a href="#" class="hidden-badge-expand">show all fields</a></div>');

$('.field-filter').keyup(function() {
var filter = $('input.field-filter').val();
$("#field-list li").each(function() {
if(filter.length > 0) {
var fieldname = $(this).find('.name').eq(0)[0].innerText;
if(fieldname.toLowerCase().includes(filter.toLowerCase())) {
} else {
$('#hidden-count-badge').text(hidden_count + ' of ' + field_count + ' fields hidden').show();
} else {
hidden_count = 0;

$('.hidden-badge-expand').click(function() {
$("#field-list li").show();

//Add object search
if($('.object-search').length == 0) {
var html = '<input type="search" value="" placeholder="search objects" title="ESC to clear search" class="object-search" \
style="width:90%;height: 20px;margin:0 0 15px 15px;background: transparent;color: white;">';
$('#objects-menu > ul.objects').before(html);
html = '<div class="hidden-object-badge" style="padding-left:50px; display:none;"><div id="hidden-object-count-badge">Filtering...</div> \
<a href="#" class="hidden-object-badge-expand" style="color:gray">show all fields</a></div>'
$('#objects-menu > ul.objects.has-settings.non-users').append(html);

var hidden_count = 0;
var object_count = $("#objects-menu ul.objects.has-settings.non-users li").length;

$('.object-search').keyup(function() {
var filter = $('input.object-search').val();
$("#objects-menu ul.objects.has-settings.non-users li").each(function() {
var objectname = $(this)[0].innerText;
if(objectname.toLowerCase().includes(filter.toLowerCase())) {
} else {
$('#hidden-object-count-badge').text(hidden_count + ' of ' + object_count + ' objects hidden');
hidden_count = 0;

$('.hidden-object-badge-expand').click(function() {
$('#objects-menu ul.objects.has-settings.non-users li').show();

EDIT: Any improvements and additions are to be shared with the Knack community.

EDIT: Make sure the correct Jquery version is selected (thanks Tony!)


EDIT: Renamed topic, add code to filter fields and objects and demonstration video.

1000 thanks for this - so much easier than trolling through developer tools in chrome!


Fantastic addition - thanks for sharing.

Thanks Brad. I love this!

Thanks for the feedback Julian,

20760862587 asked the same question about the new builder and I think we should work on that.  It might become a moving beast in some areas with more changes clearly coming (e.g. compact view in page design that'll be better to host view numbers).

I've posted this here to encourage sharing, tweaks and updates for anyone to contribute to if you're up for it Julian!


Hi Brad - this is a pretty cool tool! 

I've found that it doesn't work with the new builder - are there any plans for that?

Wowzer, this is excellent, thanks so much for sharing!!

Great stuff!!!!

Ha - thanks Dean, you know the saying: 'to learn teach others...' and we all stand on the shoulders of others even if it's a quick Google search, or just asking the right question.

And because I reckon this is a ripping product that deserves an active and vibrant community, I'm trying to walk the talk and there are some very special people here.

So in reality I'm being selfish!

I'm looking forward to what the new builder brings us by the way.

Brad you should put a "Donate" button on your website not only for all the help you give on the forum here but for this code as it is a big value add. Appreciate the work especially since Knack doesn't seem to have the resources or inclination to build this community which would be a huge value add to all of us.

Confirmed: Works with the chromium version of Microsoft Edge browser with the same CJS extension installed.

Awesome piece of code! 

30 seconds to install

and proves that the builder can be improved...

Brad: Your are a Knack Genius.

Awesome piece of code! So useful and should be standard in the system. Thank you


  • Added search/filter fields
  • Added search/filter objects
  • Improved field & view ids - less intrusive
  • Added video showing it in action

That's awsome Brad, thanks for sharing

Excellent! Thank you. 

This is a must install. Brad gave this to me last week and its the best thing to happen to Knack since Integromat. Such a great zero impact extension as well, no footprint or speed changes.