Page 1 of 1
Make a URL a clickable link
Posted: Thu Oct 09, 2025 1:04 am
by Paul
In the browse form, I have some url's.
Browse-urls.PNG
Ultimately, I'd like to wrap those urls in html to make them clickable when displayed on the Print page (and downloaded/saved) when using the Print button.
print-button.PNG
Clickable-link.PNG
How to accomplish this?
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 2:18 am
by kev1n
Do I understand correctly that the links in the browse view are not supposed to be clickable — only in the “print” mode?
Maybe one possible solution would be to add an additional column in the browse view that contains the clickable URL, but keep it hidden there.
Then, when “print” is clicked, that column could be shown instead?
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 2:24 am
by Paul
Yes, your idea as stated above might be the solution. How would I implement that?
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 2:50 am
by kev1n
For each URL field, create an additional column that contains the same URL wrapped in an <a> tag.
Example:
browse_url.png
In this example, the original column is named
url_audio
.
The second column, which displays the clickable link, is defined as:
CONCAT('<a href="', url_audio, '" target="_blank">Audio</a>')
Set the width of the clickable column to 0, since it should not be visible in the Browse view.
Then, in Custom Code → Browse Field, exclude the non-clickable column and include the clickable one:
Code: Select all
nuPrintExcludeColumns([0]); // Exclude the plain URL column
nuPrintIncludeColumns([1]); // Include the clickable URL column
Of course, if you’re already using nuPrintIncludeColumns() or nuPrintExcludeColumns(), you’ll need to merge your column lists accordingly.
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 4:09 am
by Paul
Here is what I have:
Column 4 in the Browse tab
Column 5 in the Browse tab
Code: Select all
CONCAT('<a href="', pk_audio_files, '" target="_blank">Audio Files</a>')
Custom code in the Browse form:
Code: Select all
nuPrintExcludeColumns([4]); // Exclude the plain URL column
nuPrintIncludeColumns([5]); // Include the clickable URL column
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;
}
And the result after clicking the Print button:
print-button-2.PNG
It works, the link is clickable and functions as expected, but everything else is excluded. (There are many other columns to be included.) ? What may have caused this?
And please explain what you meant by "Of course, if you’re already using nuPrintIncludeColumns() or nuPrintExcludeColumns(), you’ll need to merge your column lists accordingly."
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 4:30 am
by kev1n
I see. When using nuPrintIncludeColumns()
you will need include all columns that should be visible.
E.g. nuPrintIncludeColumns([5,6,7]);
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 4:42 am
by Paul
But those visble columns are dynamically determined based upon the exclusion of blank columns. So I would need to get a list of all of the ones that are not blank based upon previous code.
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 4:57 am
by kev1n
In the earlier steps, assign the columns to include to a variable, and then reference that variable inside your function. This way, you only need to call the function nuPrintIncludeColumns() once. You can also use AI to assist you with this, since we don’t know exactly what your code looks like.
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 5:04 am
by Paul
I already included my code. See above.
Re: Make a URL a clickable link
Posted: Thu Oct 09, 2025 5:23 am
by kev1n
Could AI output a working code?