Add a button to toggle specific columns in AG Grid. Only visible on a specific page, located within the sidebar buttons container if present, with color change when toggled.
// ==UserScript==
// @name Movable Button for Column Selector in AG Grid
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add a button to toggle specific columns in AG Grid. Only visible on a specific page, located within the sidebar buttons container if present, with color change when toggled.
// @match *://his.kaauh.org/lab/*
// @author Hamad AlShegifi
// @grant none
// @grant none
// ==/UserScript==
(function() {
'use strict';
const columnsToToggle = [
'Lab Order No', 'Hospital MRN', 'DOB', 'Test ID', 'National/Iqama Id',
'Department', 'Clinic', 'Doctor', 'Analyzer', 'Reference Lab',
'Accession No', 'Sequence No'
];
let isToggledOn = false; // Track toggle state
// Check if the user is on the specific page
function isSpecificPage() {
return window.location.href.includes('/lab-test-analyzer');
}
// Add the toggle button to the sidebar
function addToggleButton() {
const sideBarButtons = document.querySelector('.ag-side-buttons[ref="sideBarButtons"]');
if (!sideBarButtons || document.getElementById('toggleColumnsButtonContainer')) return;
// Create the button container
let buttonContainer = document.createElement("div");
buttonContainer.id = "toggleColumnsButtonContainer";
buttonContainer.style.marginTop = "10px";
buttonContainer.style.display = "flex";
buttonContainer.style.alignItems = "center";
buttonContainer.style.justifyContent = "center";
buttonContainer.style.flexDirection = "column";
// Create the toggle button
const toggleButton = document.createElement("button");
toggleButton.textContent = "Toggle Columns";
toggleButton.style.writingMode = "vertical-rl"; // Make text vertical
toggleButton.style.textAlign = "center";
toggleButton.style.color = "#666";
toggleButton.style.backgroundColor = "#fff";
toggleButton.style.border = "none";
toggleButton.style.cursor = "pointer";
toggleButton.style.fontSize = "12px";
toggleButton.style.fontWeight = "bold";
// Add click event to toggle columns and change button color
toggleButton.addEventListener('click', function() {
isToggledOn = !isToggledOn;
toggleButton.style.backgroundColor = isToggledOn ? "#add8e6" : "#fff"; // Light blue when toggled, white when untoggled
if (isToggledOn) {
toggleColumns();
} else {
resetColumns();
}
});
// Append the button to the container and the sidebar buttons container
buttonContainer.appendChild(toggleButton);
sideBarButtons.appendChild(buttonContainer);
}
// Remove the toggle button
function removeToggleButton() {
const buttonContainer = document.getElementById('toggleColumnsButtonContainer');
if (buttonContainer) {
buttonContainer.remove();
}
}
// Function to toggle specified columns
function toggleColumns() {
console.log("Toggling columns...");
const toggleButton = document.querySelector('.ag-side-button button[ref="eToggleButton"]');
if (toggleButton) {
toggleButton.click();
setTimeout(() => {
columnsToToggle.forEach(column => clickColumnLabel(column));
}, 300);
} else {
console.error('Toggle button not found.');
}
}
// Reset the columns back to their original state
function resetColumns() {
console.log("Resetting columns...");
columnsToToggle.forEach(column => clickColumnLabel(column));
}
// Function to click a column label
function clickColumnLabel(labelText) {
const labels = document.querySelectorAll('.ag-column-tool-panel-column-label');
labels.forEach((label) => {
if (label.textContent.trim() === labelText) {
label.click();
}
});
}
// Monitor URL changes to detect SPA navigation
const observer = new MutationObserver(() => {
if (isSpecificPage()) {
addToggleButton();
} else {
removeToggleButton();
}
});
observer.observe(document.body, { childList: true, subtree: true });
// Initial check on page load
if (isSpecificPage()) {
addToggleButton();
}
})();