Highlight Fields in Application Structure > Fields Configuration

[M1S1L]

I use this simple Javascript to highlight field rows in Application Structure > Entities List > Fields Configuration.

When I am working with an entity that contains many field names and I am working on a particular field, I must scroll down the list to find that field after I have saved a change to it. By highlighting the field or fields I am working on they appear at the top of the list making it faster to iterate through changes.

To use it go to Configuration > Custom HTML and place it in the "Add code before </body> tag" box. It uses a simple browser cookie to store your settings.

Please enjoy!

Matt

----Code Below ----

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
function getStoredHighlights() {
var pageKey = 'highlightedRows_' + window.location.search;
var storedHighlights = localStorage.getItem(pageKey);
return storedHighlights ? storedHighlights.split(',') : [];
}

function storeHighlights(newIdArray) {
var existingIdArray = getStoredHighlights(); // Get existing highlights
var combinedArray = existingIdArray.concat(newIdArray); // Combine existing and new highlights
var uniqueCombinedArray = [...new Set(combinedArray)]; // Remove duplicates

var pageKey = 'highlightedRows_' + window.location.search;
localStorage.setItem(pageKey, uniqueCombinedArray.join(','));
}

function getCheckedRowValues() {
var checkboxes = document.querySelectorAll('.fields_checkbox:checked');
return Array.from(checkboxes).map(cb => cb.value); // Use the checkbox value as the row identifier
}

function highlightRowsWithValues(valueArray) {
var rows = document.getElementsByTagName('tr');
/*valueArray.sort((a, b) => b.localeCompare(a)); // Sort in descending order*/
valueArray.sort((a, b) => a.localeCompare(b)); // Sort in ascending order


for (var i = 0; i < rows.length; i++) {
var cells = rows.getElementsByTagName('td');
for (var j = 0; j < cells.length; j++) {
if (valueArray.includes(cells[j].textContent.trim())) {
rows.style.backgroundColor = '#F4CCCC'; // Highlight color
rows.parentNode.prepend(rows);
}
}
}
}

function clearStoredHighlights() {
var checkedRowValues = getCheckedRowValues();
var existingValueArray = getStoredHighlights();
var updatedValueArray = existingValueArray.filter(val => !checkedRowValues.includes(val)); // Remove checked rows

var pageKey = 'highlightedRows_' + window.location.search;
localStorage.setItem(pageKey, updatedValueArray.join(','));
window.location.reload();
}

// Create and add the 'Highlight Rows' and 'Clear Highlights' buttons on pages that contain the "Import fields" button
var importButton = document.querySelector('button[title="Import fields"]');
if (importButton) {
var highlightButton = document.createElement('button');
highlightButton.className = 'btn btn-default';
highlightButton.style.backgroundColor = '#F4CCCC';
highlightButton.innerHTML = 'Highlight Rows';
highlightButton.onclick = function() {
var checkedRowValues = getCheckedRowValues();
highlightRowsWithValues(checkedRowValues);
storeHighlights(checkedRowValues);
};

var clearButton = document.createElement('button');
clearButton.className = 'btn btn-default';
clearButton.style.backgroundColor = '#D9EAD3';
clearButton.innerHTML = 'Clear Highlights';
clearButton.onclick = function() {
clearStoredHighlights();
};

importButton.parentNode.insertBefore(highlightButton, importButton.nextSibling);
importButton.parentNode.insertBefore(clearButton, highlightButton.nextSibling);
}

// Apply stored highlights on page load
var storedValueArray = getStoredHighlights();
if (storedValueArray.length > 0) {
highlightRowsWithValues(storedValueArray);
}
});
</script>

[M1S1L]

One more note: To highlight or clear rows, check the checkbox next to the row and then press either "Highlight Rows" or "Clear Highlights" buttons.

Matt