I have a table that displays a list of documents/files. Instead of having one column display the "Title" of the document, and another column displaying the actual link to the file, I would just like the file (link) column to display the title, instead of the file name.
If I do this:
// Change Document file link text $(document).on('knack-scene-render.scene_XXXX', function(event, scene) { $(".kn-view-asset").html("View File") });
It replaces the filename with "View File", which is a start, but how do I make it display the value of another field instead?
I never got the chance to follow up on this, but I am having issues with it. Seems to only work about 10% of the time. The rest of the time, the page itself hangs and never loads. I check the browser's inspector, and it gives this message:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
If I keep hitting refresh, then eventually it may come up properly.
Any idea what might be going on here? Hangs on both desktop (Chrome) and mobile (iOS/Safari). I did not change anything from what you posted. Weird.
Thank you very much. I really appreciate the help here. This works great on a computer. Question though, any idea why it would not work on a mobile browser (specifically Safari on iOS)? It works perfectly in everything I have tried so far on a desktop (including Safari on macOS), but in iOS the filename still shows. Hiding the other column does work fine in iOS, however.
Again, thank you very much what you have shown so far. This is a huge help.
There never was a viable solution to this. I never actually reached out to Tony about this, I wound up just scrapping the idea. I do not see any of the posts Tony had in this thread, so I am not sure if he still uses Knack or posts here anymore.
Jason,
I got it working. I’m sure someone has a more efficient way to do it but this does work.
$(document).on(“knack-view-render.view_620”, function (event, view, data) {
changeDOName(0); //
});
//---------------------------------------------------------------------------------------------------------------------
function changeDOName(table_num){
//change a Ctr Doc hyperlink to Doc name
console.log(“function changeDOName”);
var newFileName = new Object();
var fileValue = new Object();
//https://support.knack.com/hc/en-us/community/posts/360062451112-Change-Table-Field-Column-Value-to-Another-Value
//https://forums.knack.com/t/changing-file-hyperlink-text/10038/2 hardcoded name
//https://forums.knack.com/t/change-table-field-column-value-to-another-value/8453
// Get the table element
var tableView = document.getElementsByTagName("table")[table_num];
console.log(tableView);
// get data
var data_view_620 = Knack.models['view_620'].data.toJSON();
// Get the cells that contain the files
var fileCell = tableView.getElementsByClassName("field_422");
//console.log("fileCell" + fileCell);
//console.log("fileCell" + JSON.stringify(fileCell));
//console.log("length " + fileCell.length);
//rename each hyperlink in the table
for (r=1; r < data_view_620.length; r++) {
var item = data_view_620[r-1];
//console.log(r + " item " + JSON.stringify(item));
newFileName[r] = item.field_443;
//console.log(r + " newFileName " + newFileName[r]);
// Find the element holding the file
fileValue[r] = fileCell[r].getElementsByClassName("kn-view-asset")[0];
//Check if file exists and if the label exists
if ((typeof fileValue[r] !== "undefined") && (newFileName[r] !== String.fromCharCode(160))) {
// Assign file label
fileValue[r].textContent = newFileName[r];
}
}
Here’s a different approach (DOM based). In a production app, you’d probably want to use the data parameter as the source of truth. I can write that later when I get some free time.
/* This changes the file column to display the title, instead of the file name. */
$(document).on('knack-view-render.view_113', function(event, view, data) {
const fileField = 'field_124' // Replace with your field
const titleField = 'field_125' // Replace with your field
const fileDOM = `td[data-field-key="${fileField}"]`
const titleDOM = `td[data-field-key="${titleField}"]`
$(`#${view.key} tr[id]`).each(function(index, row) {
let file = $(row).find(fileDOM)
let title = $(row).find(titleDOM)
let fileLink = file.find('a.kn-view-asset').attr('href')
let fileText = file.find('a.kn-view-asset')
let titleText = title.text()
fileText.text(titleText)
})
})
This does work @KnackPros, thank you, however, it only seems to work on a desktop browser. It does not work on a mobile device (the file names show in the table on a mobile browser). Also interesting, the table on the mobile browser does not scale as it would normally would.
I do appreciate the efforts on this, but I now remember one of the other reasons I stopped with this idea. I need to make these files open natively as PDF’s, and not in a Knack modal. I have created “links” to the files on the server, and use those now instead. This way the pdf’s open natively with the browser.
Thanks again for your help, but for now, you can stop working on this (unless you really want to keep going).
If you wanted, I guess you could scrap this line:
