Changing File Hyperlink Text

API & Customization Show & Tell
1

Every now and then, a user will upload a file with an excessively long title, causing tables to stretch for miles across the screen, as seen below:

If you insert this slice of code in API & Code > Javascript, all file hyperlink text will change to whatever you'd like it to read (e.g. Attachment):

$(document).on('knack-view-render.any', function(event, view, data) {
 
 $("a.kn-view-asset").html("Attachment"); 
 
});

This makes table views with file links a lot more visually pleasing. Enjoy!


2 Likes
2

Hey 115990709251, I just tested importing from CSV using the hyperlink as the matching field, and it did match on the actual URL rather than the Text, so you shouldn't have any problems using the 'use the same text for all links' option with this.

3

14442759487 is this still possible with a link field? While I know this option exists in the builder, if enabled, it doesn't allow link matching when you upload a CSV. I like the link to stay the link as the record, but when you view the page use JS to replace the URL with "Link". Is this doable?

4

Stephen Chapman, thank you!

I was wondering: instead of naming it "Attachment", is it possible to get the name from another field in the table?

5

Stephen Chapman - THANK YOU!!!

6

Thanks for the share Stephen!

7

Thanks for the quick response. I just plugged this in and it works perfectly. With my mediocre JS skills, there is no way I would have figured this out quickly (if at all) so much appreciation for sharing as I think this streamlines/improves the UX for file downloads out of Knack.  Thanks again!

8

You're in luck! I wrote this code a little while ago, hopefully it still works. This will automatically display a PDF/image file or start downloading any other file once clicked, rather than display in the preview window. All you need to do is replace {YOUR APPLICATION ID} with your app's ID.

$(document).on('knack-scene-render.any', function (event, view, data) {  
  $("a.kn-view-asset").on("click", function(e) {
    e.preventDefault(); //Prevent normal file window opening
    e.stopPropagation();
    var url = $(this).attr('href'); // Get the URL of the clicked link
    var pathArray = url.split('/'); // Split the URL string into substrings between '/' characters
    var filePath = pathArray[pathArray.length-1]; // Get the file name in the last substring (e.g. file.pdf)
    var assetPath = pathArray[pathArray.length-2]; // Get the asset path in the second-last substring (e.g. 6-13-77-5d2ffb2f47b3c70010ffd98d)
    pathArray = assetPath.split('-'); // Split the assetPath into substrings between '-' characters
    assetPath = pathArray[pathArray.length-1]; // Get the actual asset path in the last substring (e.g. 5d2ffb2f47b3c70010ffd98d)
	var newURL = "https://api.knack.com/v1/applications/{YOUR APPLICATION ID}/download/asset/" + assetPath + "/" + filePath // Concatenate the download URL
    window.open(newURL, '_blank'); // Open the new URL in a new tab
  });
});
2 Likes
9

Thanks - super helpful for view/table formatting. One semi-related question. When a user clicks on one of these file links to access/download, a modal pops up with the download link somewhat buried at the bottom. Does anyone know how to change this behavior so that when a file link is clicked on, the file simply downloads right away without popping up the modal?

10

This code works on pc but doesn't work on mobile devices, any idea what needs to be done to fix that?

11

Thanks, didn't know that was there.

12

Hi Andrew,

If you're using a Link field, there's an option in the Field Editor to use the same text format for all links. See the image below.

13

Hi Team, I use zapier to create a folder structure for a new client in Google Drive and create a link in the Customer Record for each folder for easy access to the created folder. Is there any way to change the long Google Drive Folder name to a simpler one as you do with a file name in you post above?

14

Eddie, I tried doing this with the following code:

$(document).on('knack-view-render.any', function(event, view, data) {

$("a.kn-view-asset").html("<i class='fa fa-paperclip' aria-hidden='true'></i>"); 

});

It converted it into an icon nicely, but when left-clicking on the icon, it didn't open up the attachment. Right-clicking and opening in a new tab however seemed to work. 

15

Is there a way to add in an icon instead of plain text? I tried an icon unicode and it didnt work. 

16

Thanks for that ;)

Great workaround.

17

Thankyou! Works great

18

This works great within the app, but is there a way to get Knack to do this when it generates an e-mail?  So the file name doesn't show but just some generic text?

19

Works great. Thanks!

20

Great little code snippet thank you.

I thought of using small thumbnails but the storage space required when you have limitations isn't worth it.

This is much better way to uniformly display files are in the records.

Thank You