Hey Craig, here’s the code for adding a button to open the notes field. I hide the notes column using the KTL keyword _hc. The column is hidden and button will change to yellow if notes are present, green if none are present. The only thing I don’t like and I’m trying to find a solution for, is that when you hide the column using KTL, the edit note dialog appears in the upper right hand corner. If I don’t hide column and user presses notes button, the dialog appears in the column, but notes also are shown in column and that defeats the purpose of the button. If you find a solution with or without KTL, please let me know… JON
CODE TO ADD BUTTONS:
$(document).on(‘knack-view-render.view_157’, function (event, view) {
// Track the state of the inline editor
var isEditorOpen = false;
// Function to add a button to the table rows in view_157
function addButtonToView157() {
// Find the table element in view_157 by its ID
var tableView = document.getElementById(“view_157”);
// Check if the table exists
if (tableView) {
// Get all the rows in the table body (excluding the header row)
var rows = tableView.querySelectorAll("tbody tr");
// Iterate through the rows
for (var i = 0; i < rows.length; i++) {
// Create a new cell for the button in each row
var cell = document.createElement("td");
// Create the button element
var button = document.createElement("button");
button.innerHTML = "Notes"; // Set the button label to "Notes"
// Find the specific row
var row = rows[i];
// Find the cell containing field_141 within the row
var cellWithField141 = row.querySelector("[data-field-key='field_141']");
// Check if field_141 contains data
if (cellWithField141.textContent.trim() !== "") {
// Set a CSS class to change the button's color to yellow
button.classList.add("notes-yellow-button");
} else {
// Set a CSS class to change the button's color to green
button.classList.add("notes-green-button");
}
// Add a click event listener to the button
button.addEventListener("click", function() {
// Find the specific row where the button was clicked
var row = this.closest("tr");
// Find the cell containing field_141 within the row
var cellWithField141 = row.querySelector("[data-field-key='field_141']");
// Toggle the state of the inline editor
if (isEditorOpen) {
// If open, close it
cellWithField141.querySelector(".kn-inplace-editor-close").click();
} else {
// If closed, open it
cellWithField141.click();
}
// Update the state
isEditorOpen = !isEditorOpen;
});
// Append the button to the cell
cell.appendChild(button);
// Append the cell to the current row
rows[i].appendChild(cell);
// Adjust the width of the first column (index 0) to 100 pixels
if (i === 0) {
cell.style.width = "25px";
}
}
}
}
// Call the function to add the button to view_157
addButtonToView157();
});
CODE FOR CSS BUTTONS:
.notes-yellow-button {
background-color: yellow;
border: 0px solid #298af2;
border-radius: 3px;
padding: 3px 6px;
color: #000000;
display: inline-block;
text-align: center;
text-shadow: none;
font-size: 12px;
cursor: pointer;
transition: 0.4s;
}
.notes-green-button {
background-color: green;
border: 0px solid #298af2;
border-radius: 3px;
padding: 3px 6px;
color: #ffffff;
display: inline-block;
text-align: center;
text-shadow: none;
font-size: 12px;
cursor: pointer;
transition: 0.4s;
}
OPTIONAL JS CODE THAT TOGGLES DIALOG BOX
$(document).on(‘knack-view-render.view_157’, function (event, view) {
setTimeout(function() {
// Attach a click event handler to the table
$(‘#view_157’).on(‘click’, ‘button’, function() {
// Find the specific row where the button was clicked
var row = $(this).closest(‘tr’);
// Find the cell containing field_141 within the row
var cellWithField141 = row.find("[data-field-key='field_141']");
// Toggle the state of the inline editor
if (isEditorOpen) {
// If open, close it
cellWithField141.find(".kn-inplace-editor-close").click();
} else {
// If closed, open it
cellWithField141.click();
}
// Update the state
isEditorOpen = !isEditorOpen;
});
}, 1500); // Adjust the delay as needed
});
