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: 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
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>'
$('#field-type-menu').append(html);
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);
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())) {
$(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();
});
});
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.