Change Table Field Column Value to Another Value

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?

Thanks for any assistance!

The code was working for a couple of hours but now it's not.  Jason K. did you find a fix and if so could you please share it?


thanks much,

Julia

Hi Tony,

Thanks. I will reach out to you shortly on this.

Hi Tony,

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.

Works perfectly. Thank you again Tony. Stay safe.

Hi Tony,

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.

Jason, I’m still not able to get this feature to work. Could you please post the solution. Thanks

Julia,

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];
    }
}

}

2 Likes

@JuliaGlowa31189

Thanks for sharing.

Also the code looks perfectly efficient. :+1: If you wanted, I guess you could scrap this line:

// get data
var data_view_620 = Knack.models['view_620'].data.toJSON();

because we already have access to the data inside the view through the data param here:

$(document).on(“knack-view-render.view_620”, function (event, view, data) {...

and then all references to data_view_620 could be replaced with data.

But Knack properties are great (personally love them) because they reveal new tricks you can do with Knack. Good stuff.

Ian
Knack Pros

@JuliaGlowa31189

This is interesting, thanks. It works on some of the rows in my table, but not all. Odd. I will investigate a little more on my end.

@KnackPros

Removing the:
var data_view_620 = Knack.models['view_620'].data.toJSON();
line and replcing the references with data did not work for me at all.

Hi @jason

Happy to take a deeper look. Can you show a screenshot of your table? For example mine looks like this:

Before:

After:

@jason

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)    
  })
})
1 Like

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

Thanks again.

1 Like