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

Code: Select all

pk_audio_files


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?