I have a page with a search component. I like to show a form to add new records if the search returns no records. Only show if no records found. I added the JS below that Open Ai built for me but its not working. The form is always visible.
// UPDATE THESE 2 LINES:
const TABLE_ID = “component_5”; // your table ID
const SHOW_WHEN_EMPTY = “component_28”; // the component to show (form, message, etc.)
$(document).on(‘tb.table.dataLoaded’, function (e, tableId, data) {
if (tableId === TABLE_ID) {
if (data.records.length === 0) {
$("#" + SHOW_WHEN_EMPTY).show(); // show when no records
} else {
$("#" + SHOW_WHEN_EMPTY).hide(); // hide when records exist
}
}
For fun, I just did a test to see if the search text allows html, which it doesn’t unfortunately. Otherwise you could link to a form to create a new record. Leave some feedback for the team to change this? This would be a really clean way to achieve this.
Otherwise, I imagine you could run some javascript on a small loop to change the content of “.tb-no-record-found” to perhaps add some html that includes a link to the form. Something like this, although this is NOT a pretty implementation. Just edit the HREF to point to wherever the user can go to create a record.
const checkRecordElement = setInterval(() => {
console.log("Checking for .tb-no-record-found element...");
const noRecordElement = document.querySelector('.tb-no-record-found');
if (noRecordElement) {
console.log("Element found! Replacing content...");
noRecordElement.innerHTML = '<p>No records found. <a href="#">Create One?</a></p>';
} else {
console.log("Element not found yet");
}
}, 500);
