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.
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.
See what it does here: https://www.loom.com/share/80d4e1554ae34d16babfb0dbf66056d8
1. Install "Custom Javascript for Websites 2" extension - Make sure the correct Jquery version is selected (see below).
Get it from https://chrome.google.com/webstore/detail/custom-javascript-for-web/ddbjnfjiigjmcpcpkmhogomapikjbjdk?hl=en
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');
//console.log($(this));
if ($(this).find('.view_id').length !== 0) {
$(this).find('.view_id').text(view_id);
} 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
$('#field-type-menu').append('<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())) {
$(this).show();
} else {
$(this).hide();
hidden_count++
$('#hidden-count-badge').text(hidden_count + ' of ' + field_count + ' fields hidden').show();
}
} else {
$(this).show();
$('#hidden-count-badge').hide();
}
});
hidden_count = 0;
});
$('.hidden-badge-expand').click(function() {
$('input.field-filter').val('');
$("#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);
$('#objects-menu > ul.objects.has-settings.non-users').append('<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>');
}
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())) {
$(this).show();
} else {
$(this).hide();
hidden_count++
$('#hidden-object-count-badge').text(hidden_count + ' of ' + object_count + ' objects hidden');
$('.hidden-object-badge').show();
}
});
hidden_count = 0;
});
$('.hidden-object-badge-expand').click(function() {
$('input.object-search').val('');
$('#objects-menu ul.objects.has-settings.non-users li').show();
$('.hidden-object-badge').hide();
});
});
;
It'll result in an object view like below and it's similar to pages view adding the view numbers.
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.