"We’ll:
Hide the URL text in the Browse form using CSS or JS (for non-print mode).
On Print mode, dynamically replace the URL text in those specific columns with clickable <a> tags.
Ensure blank column logic still works by checking column content before hiding.
How It Works
In Browse mode:
The script runs on afterbrowse event.
It finds the URL columns and makes their text invisible (color: transparent).
The cell still exists (so your hideBlankColumns() can still detect emptiness correctly).
In Print mode:
The script runs on beforeprint (nuBuilder event triggered before generating the print view).
It replaces plain text in URL cells with clickable <a href="..."> links.
So the printed/exported page shows live hyperlinks.
Full Implementation
Add this below your existing code in the Custom Code (JavaScript) of your Browse form:
Code: Select all
//---------------------------------------------------------------------
// Detect if we are in "Print" mode
//---------------------------------------------------------------------
nuOn('beforeprint', function() {
// Columns that contain URLs
const urlColumns = ['pk_audio_files', 'pk_video_files', 'pk_photo_files'];
// Get all cells in the Browse
const cells = document.querySelectorAll('.nuCell[data-nu-column-name]');
cells.forEach(cell => {
const colName = cell.getAttribute('data-nu-column-name');
const text = cell.textContent.trim();
// Only transform if this is one of the URL columns and not empty
if (urlColumns.includes(colName) && text !== '') {
// Clear cell content
cell.innerHTML = `<a href="${text}" target="_blank">${text}</a>`;
}
});
});
//---------------------------------------------------------------------
// Hide URL columns in Browse mode (not in print)
//---------------------------------------------------------------------
nuOn('afterbrowse', function() {
const urlColumns = ['pk_audio_files', 'pk_video_files', 'pk_photo_files'];
const cells = document.querySelectorAll('.nuCell[data-nu-column-name]');
cells.forEach(cell => {
const colName = cell.getAttribute('data-nu-column-name');
if (urlColumns.includes(colName)) {
// Hide text content visually (still available in DOM for print)
cell.style.color = 'transparent';
cell.style.pointerEvents = 'none';
}
});
// Also hide headers for those columns
const headers = document.querySelectorAll('.nuBrowseTitle[data-nu-column-name]');
headers.forEach(header => {
const colName = header.getAttribute('data-nu-column-name');
if (urlColumns.includes(colName)) {
header.style.color = 'transparent';
}
});
});
I entered the code at the end of my previous custom javascript code block in the Browse form as instructed by ChatGPT and this is the result of clicking on the Print button:
Code: Select all
VM5170:81 Uncaught ReferenceError: nuOn is not defined
at <anonymous>:81:1
at m (jquery-3.7.1.min.js:2:880)
at $e (jquery-3.7.1.min.js:2:46274)
at ce.fn.init.append (jquery-3.7.1.min.js:2:47633)
at nuAddJavaScript (nuform.js?ts=20251009054910:6294:12)
at nuBuildForm (nuform.js?ts=20251009054910:144:3)
at Object.successCallback (nuajax.js?ts=20251009054910:193:4)
at c (jquery-3.7.1.min.js:2:25304)
at Object.fireWith [as resolveWith] (jquery-3.7.1.min.js:2:26053)
at l (jquery-3.7.1.min.js:2:77782)
To be clear, this is the pre-existing code in the Browse form:
Code: Select all
if (!nuGlobalAccess()) {
var columnIndex = 0;
nuSetBrowseColumnSize(columnIndex, 0);
}
//if (!nuGlobalAccess()) //Un-comment this line so Admin users can see all blank columns
{
// Get hidden columns from hideBlankColumns
const hiddenColumns = hideBlankColumns();
// Add the manually specified column index
if (!nuGlobalAccess()) //This allows any admin user to still print the first column (userID)
var columnIndex = 0;
// Combine both arrays and remove duplicates
const columnsToExclude = [...new Set([columnIndex, ...hiddenColumns])];
// Exclude all columns
nuPrintExcludeColumns(columnsToExclude);
}
function hideBlankColumns() {
const hiddenColumns = [];
// Find the browse container element using its ID
const browseDiv = document.getElementById('nuRECORD');
if (!browseDiv) {
console.error(`Browse div with ID "${'nuRECORD'}" not found.`);
return hiddenColumns;
}
// Get all browse title divs (headers)
const headers = browseDiv.querySelectorAll('.nuBrowseTitle');
if (headers.length === 0) {
console.error('No browse title headers found.');
return hiddenColumns;
}
const colCount = headers.length;
const isColumnBlank = new Array(colCount).fill(true);
// Get all data cells (excluding empty rows)
const dataCells = browseDiv.querySelectorAll('.nuCell[data-nu-column]');
// Check each data cell to see if the column has content
dataCells.forEach(cell => {
const colIndex = parseInt(cell.getAttribute('data-nu-column'));
const content = cell.textContent.trim();
// Mark column as not blank if it has content
if (content !== '' && colIndex >= 0) {
isColumnBlank[colIndex] = false;
}
});
// Hide blank columns using nuBuilder's built-in function
for (let j = 0; j < colCount; j++) {
if (isColumnBlank[j]) {
nuSetBrowseColumnSize(j, 0);
hiddenColumns.push(j);
}
}
return hiddenColumns;
}