Skip to main content

Usage

This section describes an example implementation of Interactive Grid Download File Pro in an example Oracle APEX application.

The usage guide shows the basic implementation of the plug-in and doesn’t describe the plug-in attributes.

Introduction​

This usage guide is using the Interactive Grid Download File Pro sample application table, UC_IG_DOWNLOAD. Table columns are described in the table below:

Column NameData TypeDescription
IDNUMBERPrimary key
FILE_CONTENTBLOBContent of a file
MIME_TYPEVARCHAR2(100)The mime type of a file
FILE_NAMEVARCHAR2(50)The filename of a file

In the example application, page 710 is defined. On the page, an interactive grid region called Example is created and contains three columns:

  • ID
  • MIME_TYPE
  • FILE_NAME

All columns are Display Only and the interactive grid doesn’t support editing. This usage guide will lead you through the process of creating the 4th column which will be using the plug-in to download a file stored in the FILE_CONTENT column.

The initial state of page 710 in page designer is presented below:

The page will look like the following:

Implementing the plug-in​

To implement the plug-in you will need to create a new interactive grid column and a dynamic action implementing the plug-in.

Create an interactive grid column​

  1. In page designer, right-click on Columns in the interactive grid

  2. Click Create Column

  3. For the newly created column:

    1. Set Identification \ Column Name to DOWNLOAD

    2. Set Identification \ Type to Link

    3. Set Heading \ Heading to Download

    4. In the Link section, click on the button No Link Defined

    5. In the popup Link Builder - Target

      1. Set Target \ Type to URL
      2. Set Target \ URL to javascript: void(0);
      3. Apply the changes by clicking OK button

    6. Set Link \ Link Text to Download

    7. Set Link \ Link Attributes to class=”download”

    8. Set Source \ Type to None

  4. Save the page

The newly created column definition in page designer is presented below:

Dynamic Action​

  1. Create new dynamic action called Download file from IG
  2. Set When \ Event to Click
  3. Set When \ Selection Type to jQuery Selector
  4. Set When \ jQuery Selector to .download
  5. Set Advanced \ Event Scope to dynamic
  6. Set Advanced \ Static Container (jQuery Selector) to body

The dynamic action definition in the page designer is presented below:

Dynamic Action - True Action​

  1. Change the true action Show to United Codes IG Download File [plug-in]

  2. Set the plug-in attributes

    1. Set Settings \ IG Column Containing BLOB ID to ID
    2. Set Settings \ Table Name to UC_IG_DOWNLOAD
    3. Set Settings \ Primary Key Column to ID
    4. Set Settings \ BLOB Column to FILE_CONTENT
    5. Set Settings \ Mime Type Column to MIME_TYPE
    6. Set Settings \ File Name Column to FILE_NAME
    7. (Optional) Set Settings \ Settings according to your requirements

  3. Set Affected Elements \ Selection Type to Region

  4. Set Affected Elements \ Region to Example

  5. Set Fire on Initialization to No

  6. Save the page

The true action is presented below:

Test the Implementation​

  1. Open page 710 in a browser
  2. Click on the Download anchor

Page 710 after adding a new column is presented below. Clicking on the “Download” link will initialize the download process.