There are plenty of good resources explaining how to create custom download links in APEX so I will skip over that part and list a couple here:
- https://oracle-base.com/articles/misc/apex-tips-file-download-from-a-button-or-link
- https://joelkallman.blogspot.com/2014/03/yet-another-post-how-to-link-to.html
These examples go into good detail on how to generate a custom link to download a file. But what about how to indicate that a file is downloading if it is taking a long time in the backend?
Problem
Some custom download processes can take quite sometime depending on what the process is doing in the backend (generation/business logic). It can be quite confusing to the end user that a process is occurring and for them to even know that they are waiting on downloading a file at all if this is the case.
If it takes a long time to run the process that ultimately downloads the file - then just setting a spinner on page submit or via apex.server.process will not necessarily achieve the desired outcome. Usually the apex engine is killed when you dedicate a page/process to download the file, and subsequently you can not easily signal that the download process is done and to take action upon that to kill a spinner if you had one going.
There are a few plugins out there that you can use in combination with each other as well. Lets just assume that you have a link already set up to download your file and that it kicks off some custom process to do so. Here is a quick Vanilla JavaScript approach to achieve a spinner while the download process is occurring and to remove it when it is done.
Solution
- Declare the following download function:
Page Properties -> Function and Global Variable Declaration
const download = async (url, filename) => {
var lSpinner$ = apex.util.showSpinner();
const data = await fetch(url);
const blob = await data.blob();
const objectUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.setAttribute("href", objectUrl);
link.setAttribute("download", filename);
link.style.display = "none";
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(blob);
link.remove();
lSpinner$.remove();
};
This is utilizing async and await to make us wait for the promise to return a result. Majority of the waiting done is on the fetch here in my case as my process running takes over 5 seconds before it even sends a file back to the client. This allows us to confidently set a spinner before we wait for the result, and then remove the spinner after all of our code is done running.
2. Declare a Dynamic Action on button click to download the file
Dynamic Action -> Code
My download link runs a process that takes over 5 seconds to generate my file. I am using page items to hold the url and filename, so I used this:
download(apex.items.P1_DOWNLOAD_URL.value, apex.items.P1_FILENAME.value)
That is it. This concept can be used also to fire other events after a custom file generation process is done as well and not just to get a spinner. Hope this helps any of you that have long running download processes so that the end user is aware that something is occurring. Cheers!
