Onclick event for downloading a file on a service portal page

[LizB]

We ported discussions (questions/answers) from an old forum to ServiceNow.  Attachments to those posts were never migrated.  The attachments were stored on a file server that was administered by a third party.  The third party needs to shutdown the server so we have moved all the files to an internal server and now need to run a script to change the attachment hrefs from https://forum.company.com/...... to https://newserver.company.com.

The issue that we are facing is that there was a PHP script that ran to download the attachments on the old server. <a class="ipsAttachLink" href="https://forum.company.com/....../attachment.php?id=19365" rel="" data-fileid="19365" data-fileext="zip">templex.zip</a>. 

Is there a way to add custom javascript to the Service Portal that will run when a link having a class of "ipsAttachLink" is clicked that will download the file?

Thanks for any information that you can provide.

LizB

[Ratnakar7]

Hi @LizB ,

Yes, it is possible to add custom JavaScript to the Service Portal that will run when a link with a specific class is clicked. Here's an example of how you can achieve this:

1. Create a new widget or add the code to an existing widget where you want the functionality to be available.
2. Add an event listener for the click event on the link with the class "ipsAttachLink".
3. In the event listener function, prevent the default behavior of the link by calling the preventDefault() method on the event object.
4. Extract the download URL from the href attribute of the clicked link.
5. Create a new anchor element and set its href attribute to the download URL.
6. Set the download attribute of the anchor element to the desired filename of the downloaded file.
7. Trigger a click event on the anchor element to initiate the download.

Here's an example code snippet that you can use:

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('ipsAttachLink')) {
    event.preventDefault(); // Prevent default link behavior

    var downloadUrl = event.target.href; // Get download URL
    var filename = event.target.getAttribute('data-filename'); // Get filename from data attribute

    var downloadLink = document.createElement('a'); // Create new anchor element
    downloadLink.href = downloadUrl;
    downloadLink.download = filename;
    downloadLink.click(); // Trigger download
  }
});

Note: The data-filename attribute is used to store the desired filename of the downloaded file. Make sure to add this attribute to the link element with the class "ipsAttachLink".

Thanks,

Ratnakar

[LizB]

Hi @Ratnakar7 

Thank you for your quick reply.  I tried your solution.  It appears that the file is opened rather than downloaded.

I'm guessing this is a browser issue but would be interested to know if it is something that can be handled programmatically.

Kind Regards,

LizB

[Marek Sabol]

Hi, have you found solution for this ? I'm trying to do something similiar but in UI page. I want to download file that is base64 but I don't want to save it to sys attachemnts