> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/looks/relabel-attachment-links.md).

# Relabel Attachment Links

How to shorten attachment links to something more readable

![Attachment links](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MXZ3q11MRMOXvzcS9WP%2F-MXZ4A9kjTl4T7V68mg8%2Fimage.png?alt=media\&token=c20e7bbe-dddc-438b-a2a5-a85db67d8ff8)

Without this code, when attachment file names display in tables they can be super long and distort the readability of the field and the table as a whole. Relabeling gives the column a consistent width. This code could be further updated to specify a certain view for your specific use case.

There are two ways to label attachment files:

* Option A : Default Name
* Option B: Field File Name (Table views only)

<details>

<summary>Option A: Default Name</summary>

Modifies all attachments that are a File field asset with a default attachment name using HTML

### The JS

We create a handler that renders on any application view and sets the attachment link text.

```javascript
/********************************************************/
/** Relabel Attachment Links to'Attachment' *************/
/********************************************************/
$(document).on('knack-view-render.any', function(event, view, data) {
 $("a.kn-view-asset").html("Attachment"); 
});
```

### The CSS

None needed 😎

### How to Implement

Adjust text to the preferred nomenclature if other than Attachment (i.e. "File")

```javascript
"Attachment"
```

You may use:

* Attachment
* View
* File

</details>

<details>

<summary>Option B: Field File Name (Table views only)</summary>

Modifies one of the attachment field File types HTML to another field instead. This will only work for connected file fields connected to a parent table view.

Examples:

* Work Orders table view connected to multiple attachments
* Traffic Count records connected to multiple attachments
* Vehicle records connected to multiple attachments

### The JS

We create a function that renders on any application view and sets the attachment link text in the table view using HTML. We add also add the field to the table as well to leverage the text used in that same table and use the `span id` attribute to tie it to the file field.

{% code overflow="wrap" lineNumbers="true" %}

```javascript
/********************************************************/
/** Relabel Attachment Links in Tables to Name Field **/
/********************************************************/
//  replace attachment file name with name field. hide_name to hide nameField from table
function replaceAttachmentFilenameWithNameField(fileFieldId, nameFieldId, hide_name = true) {
  // find each attachment cell
  $("td." + fileFieldId).each(function() {
    // find each attachment link within the cell
    $(this).find("span").children("span").each(function() {
      let attachmentType = "View";
      let fileRecordId = $(this).context.id;

      // if neighboring field exists on same table, retrieve the corresponding type
      $(this).closest("tr").children("td." + nameFieldId)
        .find("span")
        .children("span")
        .each(function() {
          let nameRecordId = $(this).context.id;
          if (fileRecordId == nameRecordId) {
            attachmentType = $(this).text();
          }
        });
      //  update link contents
      $(this).find("a").html(attachmentType);
    });
  });

  // hides the name field ID based on third parameter. Default true.
  if (hide_name){
    $("td." + nameFieldId).hide();
    $("th." + nameFieldId).hide();
  }
}

$(document).on("knack-view-render.any", function (event, view, data) {
  $("a.kn-view-asset").html("View");
  replaceAttachmentFilenameWithNameField("field_AAA", "field_BBB");
});
```

{% endcode %}

### The CSS

None needed 😎

### How to Implement

Copy JS above and modify line 37.

* `field_AAA` is the File type field ID
* `field_BBB` is the text(may use any type) field ID

</details>