Make a URL a clickable link

[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?

[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?

[Paul]

Yes, your idea as stated above might be the solution. How would I implement that?

[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.

[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."

[kev1n]

I see. When using nuPrintIncludeColumns() you will need include all columns that should be visible.

E.g. nuPrintIncludeColumns([5,6,7]);

[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.

[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.

[Paul]

I already included my code. See above.

[kev1n]

Could AI output a working code?