Adding a download (blob) link and context menu to your Interactive Grid in Oracle APEX

This post is part of the Getting Started with Plug-ins Pro APEX plug-ins.

In this blog post, I want to highlight another Interactive Grid plug-in we've built: the United Codes Interactive Grid Download File Plug-in.

When you buy any of the United Codes products, when you go to your Account on the website, you can click on View Invoices and have the ability to download them. Those invoices were created with APEX Office Print (AOP) and stored in a BLOB column of a table.

Behind the scenes, we use a Classic Report with a Download BLOB column.

You have the same feature with an Interactive Report, you can go to any column, and make it a Download BLOB column as in the screenshot below. You tell from which table you want the file to be downloaded and give some extra info like mime type etc.

Jackie redid our entire backend system and used many more Interactive Grids (IG). When she tried to include a Download BLOB link, to her surprise there was no such option in an IG. And that is how our IG Download File Plug-in came to live!

Jackie, Bartosz, and I did some brainstorming on what such a plug-in would look like and it became a bit more than just a Download Link 😉

Although this plug-in is probably one of the smaller plug-ins of Plug-ins Pro, we love it and use it a lot in our own applications. Let me first show it in action!

As you can see, it's not just a bleeding fast download link, but you can customize what happens when you click. You can show a context menu on right-click or on a normal click and have full control over it. You can preview files and so much more!

Let's move on integrating this awesome download link into our Interactive Grid. 

The first step is to download and install the plug-in. I covered that in my blog posts Plug-ins Pro: Getting started: Sign-up and install your first Oracle APEX Plug-in. So if you didn't import the IG Download File Pro plug-in yet, read that post first.

Once it's installed it's pretty simple to use the plug-in. Go to your Interactive Grid and right-click on the Columns and add a new column called "DOWNLOAD" from type Link. Give it a CSS Class of "download", specify the target of the link as "javascript:///" and finally give it a link text. You could just give it plain text "Download" or you could specify for example an icon by using:

<i class="fa fa-download"></i>

The above step created a Download link column in our Interactive Grid. Now we will hook up the UC IG Download File Dynamic Action Plug-in to this column. Create a Dynamic Action, Event: Click, Selection: jQuery Selector with .download. As Action, we specify the United Codes IG Download File [Plug-In] and enter the requested details of the BLOB. That's it!

Here a quick screen-recording of me doing all those steps in a few seconds:

You also find the all steps completely documented in the Usage Guide > Implementation Guide.

Now, let's look a bit closer to the settings you can enter:

You specify the (ID) column in the Interactive Grid and the details of the table where the BLOB is found, like the name of the BLOB column, the mime type, and file name columns.

There are also some cool settings. You can keep a normal Download link, or you can extend it so the default behavior is not a download but a menu showing different options. In our own back-end, for example, we quickly wanted to see the preview of a PDF invoice. You just check the checkbox that you want the Context Menu and that is it. This Context Menu by default is enabled on right-click and has some predefined settings like Preview and Download, but you can customize it however you want and even make it the default action.

Events

This plug-in wouldn't be a Pro plug-in if it wouldn't expose events. Events allow you to interfere with the download process at any time. Here are the events you can use in your When of the Dynamic Action:

A typical use case of an event is showing a spinner while the download is transferring data. You find an example in the sample app that comes with the plug-in. Here's what it looks like:

And more ...

As we want our plug-ins to be used over the entire world, the plug-in supports translations and exposes many more customizations. Here's an example of a custom entry opening a modal window and showing more info of the file.

And of course, just like any other Plug-ins Pro plug-in, there's extensive documentation and a great sample app that showcases the different features.

You can try the plug-in yourself for 1 month for free in your own APEX applications, so you can see what it can do for you. I also want to highlight that through the end of September 2020, there's a special running. You can find all the details on the Plug-ins Pro website!